TL; DR;

Service Workers - это удивительное новое достижение в браузере, которое играет ключевую роль в создании прогрессивных веб-приложений.

Workbox - это супер-инструмент, который поможет вам создать сервис-воркера.

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

Preact CLI

Самый простой способ начать работу с Preact - использовать preact-cli. Вам не обязательно использовать это, но он приходит с множеством хорошо продуманных и самоуверенных решений, которые облегчают вашу жизнь.

Идите вперед и установите preact-cli глобально:

npm i -g preact-cli

После установки используйте следующую команду для формирования нашего приложения:

preact create default preact-sw-magic

Preact-cli создаст для вас PWA из коробки, он полностью загружен:

  • Автоматическое разделение кода для маршрутов
  • Автоматически созданный Service Worker с использованием sw-preache
  • Шаблон PRPL для быстрой загрузки приложения
  • Гидратация до рендеринга / рендеринга на стороне сервера

Чтобы увидеть ваше приложение в комплекте с Service Worker, выполните следующую команду:

cd preact-sw-magic && npm run serve

Теперь у вас должен быть доступ к PWA по адресу https: // localhost: 8080. Вы можете убедиться, что Service Worker установлен, открыв Инструменты разработчика Chrome и выбрав вкладку Application, затем вкладку Service Worker.

Если вы затем перейдете на вкладку Кэш, вы увидите, что все ваше приложение было кэшировано для использования в автономном режиме, хорошо!

Почему Workbox?

Все это фантастика, и если все, что вы хотите сделать, - это предварительно кэшировать свое приложение, то использование SW-Precache, предоставленного вам Preact из коробки, - прекрасный выбор.

Если ваши потребности в PWA немного более амбициозны, например, вы хотите добавить push-уведомления или фоновую синхронизацию для своего сервис-воркера, тогда вам нужно будет перейти на workbox.

Workbox, который Preact

Preact-cli автоматически сгенерировал вашего сервис-воркера в процессе сборки. Чтобы получить контроль над этим сервис-воркером, нам нужно сначала отключить эту магию preact-cli.

Отключить создание сервис-воркеров Preact CLI

В package.json измените сценарии по умолчанию для сборки и обслуживания следующим образом:

"scripts": {
    "build": "preact build --no-service-worker
false",
    "serve": "preact build --no-service-worker && preact serve"
}

Это говорит Preact не создавать сервис-воркера.

Установите модуль webpack для рабочей панели

Мы будем использовать последнюю версию бета-версии Workbox 3.0:

npm install --save-dev [email protected]

Создайте preact.config.js

В корне вашего проекта создайте файл preact.config.js и настройте плагин webpack workbox следующим образом:

Это говорит webpack использовать workbox injectManifest, который позволит нам использовать нашего собственного сервис-воркера в сочетании с workbox.

Создайте service-worker.js

Для этого нам нужно создать service-worker.js файл в корне проекта. Мы просто вернем все на круги своя и настроим предварительное кэширование в service-worker.js следующим образом:

workbox.precaching.precacheAndRoute(self.__precacheManifest || []);

Установите Service worker с помощью шаблона Preact html

Index.html, как и сервис-воркер, автоматически создается для вас с помощью preact-cli. В нашем случае нам нужно немного больше контроля над этим файлом, чтобы указать ему использовать наш пользовательский файл сервис-воркера. К счастью, мы можем добавить еще один флаг в preact-cli, чтобы использовать custom template.html.

Вернувшись в package.json, мы расширим наши сценарии сборки следующим образом:

Создайте template.html

Файл index.html по умолчанию для Preact можно найти в репозитории Github. Создайте файл с именем template.html в каталоге src и скопируйте его содержимое из репозитория. В конце добавьте еще один тег скрипта со следующим:

Специалист по обслуживанию

Еще раз запускаем:

npm run serve

Если вы вернетесь в инструменты разработчика Chrome и войдете в раздел сервис-воркера, вы сможете убедиться, что ваш сервис-воркер теперь service-worker.js, а не sw.js..

Если вы откроете файл service-worker.js, вы должны увидеть что-то похожее на:

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

Теперь все готово, чтобы вы могли добавить его в service-worker.js и настроить своего сервис-воркера по мере необходимости. Я бы порекомендовал начать с ознакомления с Распространенными рецептами Workbox, но вы можете сделать гораздо больше:

Код

Код этого руководства можно найти на Github по адресу https://github.com/applification/workbox-preact.

Меня зовут Дэйв Хадсон, я педант UX в создании продуктов, который возглавляет группы разработчиков и пишет код.

Я консультирую в Applification Ltd, и я доступен по всем вопросам, связанным с React, agile и разработкой продуктов!