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, но вы можете сделать гораздо больше:
- Настроить Precache
- Настроить фоновую синхронизацию
- Настроить Google Analytics в автономном режиме
- Настроить push-уведомления
Код
Код этого руководства можно найти на Github по адресу https://github.com/applification/workbox-preact.
Меня зовут Дэйв Хадсон, я педант UX в создании продуктов, который возглавляет группы разработчиков и пишет код.
Я консультирую в Applification Ltd, и я доступен по всем вопросам, связанным с React, agile и разработкой продуктов!