Рубрики
Без рубрики

Как построить PWA с помощью Create-React-App и Custom Servirores

ПРИМЕЧАНИЕ. Это не грунт на приложении Create-React-App или какой сервисный работник. Этот пост предполагает предыдущие знания обоих. Таким образом, я недавно имел возможность работать над реагированным проектом, который включал в себя публикацию полученного веб-приложения в качестве прогрессирующего веб-приложения (PWA). Я понял, что

Автор оригинала: FreeCodeCamp Community Member.

ПРИМЕЧАНИЕ. Это не грунт на приложении Create-React-App или какой сервисный работник. Этот пост предполагает предыдущие знания обоих.

Таким образом, я недавно имел возможность работать над реагированным проектом, который включал в себя публикацию полученного веб-приложения в качестве прогрессирующего веб-приложения (PWA).

Я понял, какую борьбу состоит в том, чтобы получить PWA с пользовательскими маршрутами, сконфигурированными внутри создания Create React App (CRA). Надеюсь, это поможет кто-то застрял в аналогичной позиции.

PWA в Create-React-App

Как именно мы получаем PWA, бегущую внутри нашей CRA Shell?

Теперь CRA Shell по умолчанию связывает сервисный работник. Вы должны были заметить, что в основной CRA Shell, внутри index.js Файл, есть звонок на RegisterServiceWorker :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();

Вы можете создать новое приложение CRA и заглянуть внутрь RegisterServiceWorker файл.

Это выглядит довольно сложно, но это действительно просто проверяет, устанавливаются ли переменные среды для производства, а если ServiceWorker Поддерживается в текущем браузере.

Если вы запустите сборку с помощью команды пряжа строит , вы можете открыть папку сборки и проверять внутри, чтобы увидеть, что A Service-Worker.js файл был сгенерирован. Это работник службы по умолчанию, CRA CRA генерирует для вас.

Форматирование файла находится встроенный es5 javaScript, что делает его немного трудно прочитать. Но вы можете сбросить его в любой предел, и вы должны увидеть более разборчивый файл.

Глядя в вышеуказанный файл должен показать вам, что он просто создает статический кэш со следующим именем кэша: SW-Pracache-V3-SW-Prubacach-Webpack-Plugin - + (selg.registration? self.registration.scope) Отказ Затем он кэширует все ваши статические файлы, такие как index.html и ваш JS и CSS файлы внутри этого кеша.

Вы также должны увидеть извлекать Прослушатель событий, который уступает событие Fetch и проверяет, запрашивает ли приложение одним из ранее кэшированных статических активов.

Теперь наступает вопрос миллиона долларов: что, если вы хотите настроить динамический кеш для определенного маршрута? По сути, кэш, который обновит себя с данными, отправленными с сервера, когда пользователь посещает указанный маршрут. Обратите внимание, что это означает, что данные не будут доступны по времени сборки и, следовательно, не могут быть кэшированы по умолчанию службы по умолчанию.

Ограничения PWA по умолчанию в CRA

К сожалению, не очень легко выполнить вышеизложенное при использовании CRA. Если вы не готовы извлекать , конечно.

Посмотрите на эти проблемы Github, чтобы понять, почему команда CRA не поддерживает настройку работника службы по умолчанию.

Custom ServiceWorker Config · Выпуск # 2237 · Facebook/Create-React-App 1.0.0 Добавлена поддержка прогрессивного веб-приложения, возможно ли поддерживать пользовательский конфигурацию в ближайшем будущем? Я действительно не хочу … github.com Сценарии импорта на обслуживающем работнике Piotr-CZ · Pull Prem # 2714 · Facebook/Create-React-App Этот PR добавляет возможность использовать опцию ImportScripts SWPRECACHEWEBPACKPLUGIN. Как: создать файл под названием … github.com.

Итак, учитывая, что мы не можем настраивать услугу по умолчанию, как мы работаем вокруг этого?

Понимание того, как CRA генерирует обслуживающий рабочий

Первый шаг к поиску работы вокруг для системы сборки – на самом деле понять, как работает система сборки.

Итак, давайте начнем с Библиотека Система сборки использует для генерации файла сервисного работника.

SW-regache это библиотека, которая позволяет создавать файл сервисного работника на основе шаблона. Файл шаблона написан с использованием механизма шаблона подчеркивания.

Здесь ссылка на файл шаблона в SW-regache исходный код.

Опять же, файл шаблона выглядит сложным, но это довольно просто, как только вам удастся получить голову вокруг языка шаблонов.

Итак, что происходит, когда вы запускаете процесс сборки в CRA Shell, по отношению к генерированию сервисного работника:

  1. SW-regache Библиотека выполнена внутри
  2. Объект параметров предоставляется SW-regache Разрешить генерацию файла работника обслуживания из шаблона
  3. Файл сервисного работника генерируется в построить папка с именем Service-Worker.js.

Переопределение службы службы по умолчанию

Теперь, как мы переопределим вышеуказанный процесс, чтобы позволить наш собственный файл пользовательского обслуживания работника?

Ответ основан на Джеффе Посник (сопровождающий SW-regache ) Ответ в Stackoverflow Отказ

Во-первых, нам нужно запустить SW-regache CLI после нормального процесса сборки.

Установите SW-regache Библиотека, запустив следующую команду: NPM установить --save-dev sw-ordacach

Теперь SW-regache Библиотека работает в конфигурации файла, который предоставляется через опцию на CLI. Это команда: SW-Prearacache-Pracache-Config.js , где SW-Pracache-Config.js это имя файла конфигурации.

Вот пример файла конфигурации.

module.exports = {
  staticFileGlobs: [
    'build/static/css/**.css',
    'build/static/js/**.js'
  ],
  swFilePath: './build/service-worker.js',
  templateFilePath: './service-worker.tmpl',
  stripPrefix: 'build/',
  handleFetch: false,
  runtimeCaching: [{
    urlPattern: /this\\.is\\.a\\.regex/,
    handler: 'networkFirst'
  }]
}

Примечание: Важно, чтобы вы указываете SWFILEPATH как ./build/service-worker.js Это так, чтобы рабочий-работник, генерированный в результате вашего пользовательского процесса сборки, перезаписывает, созданный CRA (они оба имеют одно и то же имя, в этом случае). В противном случае вы получите двумя сервисными рабочими файлами в вашем каталоге сборки!

Существует обширная документация по свойствам объекта и какие допустимые значения могут быть назначены им на Страница GitHub для SW-regache Отказ

Особый интерес представляет собой вариант Runtimecaching, поскольку это очень расширяемое решение, позволяющее определить пользовательские правила для вашего обслуживания, чтобы ответить на динамическое содержание.

TemplateFilePath – это вариант, когда вы хотите, чтобы CLI забрать свой пользовательский файл шаблона работника услуг. Но вы почти всегда собираетесь использовать файл шаблона, предоставленный самим библиотекой.

Наконец, нам нужно предоставить сценарий сигнализировать систему CRA Build, которую мы хотим, чтобы наш пользовательский сервис был генерирован. Идите вперед и установите SW-regache библиотека.

Далее обновите сценарий Build Package.json, следующие:

Build: React-Scripts Build && SW-Pracache-Pracache-Config.js

Как только вы запустите процесс сборки с NPM запустить сборку , вы можете открыть папку сборки и увидеть ваш созданный сервисный работник.

Запустите процесс сборки с помощью и без пользовательского обслуживания и обратите внимание на различия между двумя.

Заключение

Хотя это может показаться очень многослойным подходом к чему-то простому, как настраивание служебного работника, этот подход имеет преимущество того, что он надежно поддерживает вас в рамках Create-React-App.

Существуют и другие подходы для генерации пользовательского обслуживания работника (с использованием комбинации React-App-rewire и Workbox ). Я постараюсь и получить этот подход в пост.

Читайте ещё по теме: