TLDR;

„Service Workers“ са невероятен нов напредък в браузъра, който е ключ към създаването на прогресивни уеб приложения

Workbox е супер инструмент, който ви помага да създадете Service Worker

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-precache
  • PRPL модел за бързо зареждане на приложението
  • Предварително рендиране / хидратиране на рендиране от страна на сървъра

За да видите приложението си пълно със service worker, изпълнете следната команда:

cd preact-sw-magic && npm run serve

Вече трябва да имате достъп до вашия PWA на https://localhost:8080. Можете да проверите дали Service Worker е инсталиран, като отворите Chrome Developer Tools и изберете раздела Application, след това раздела Service Worker.

Ако след това преминете към раздела Кеш, ще видите, че цялото ви приложение е кеширано за офлайн употреба, хубаво!

Защо Workbox?

Всичко това е фантастично и ако всичко, което искате да направите, е предварително да кеширате приложението си, тогава придържането към SW-Precache, предоставено за вас от кутията от Preact, е чудесен избор.

Ако вашите нужди от PWA са малко по-амбициозни, например, искате да добавите насочени известия или фоново синхронизиране към вашия сервизен работник, тогава ще трябва да преминете към работна кутия.

Работна кутия, която Preact

Preact-cli автоматично генерира вашия service worker като част от процеса на изграждане. За да получим контрол над този сервизен работник, ще трябва първо да деактивираме тази магия preact-cli.

Изключете генерирането на Preact CLI service worker

В package.json променете скриптовете по подразбиране за изграждане и обслужване, както следва:

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

Това казва на Preact да не генерира сервизен работник.

Инсталирайте модула workbox webpack

Ще използваме най-новата работна кутия 3.0, която е в бета версия:

npm install --save-dev [email protected]

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

В основата на вашия проект създайте файл preact.config.js и конфигурирайте приставката за уеб пакет на работната кутия, както следва:

Това казва на webpack да използва workbox injectManifest, което ще ни позволи да използваме нашия собствен service worker, комбиниран с workbox.

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

За да работи това, ще трябва да създадем файла service-worker.js в корена на проекта. Просто ще върнем нещата там, където са били и ще настроим предварително кеширане в service-worker.js, както следва:

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

Инсталирайте service worker с помощта на html шаблон на Preact

index.html точно като service worker се генерира автоматично за вас от preact-cli. В нашия случай се нуждаем от малко повече контрол върху този файл, за да му кажем да използва нашия персонализиран файл на услугата. За щастие можем да добавим друг флаг към preact-cli, за да използваме персонализиран шаблон.html.

Обратно в package.json ще разширим допълнително нашите скриптове за изграждане, както следва:

Създайте template.html

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

Служител по поръчка

Още веднъж стартирайте:

npm run serve

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

Ако отворите файла service-worker.js, трябва да видите нещо подобно на:

Обърнете внимание, че е налице предварително кеширане, което сочи към файл на манифест, генериран от webpack, изброяващ всички файлове, които трябва да бъдат кеширани. Ще видите също, че използваме Workbox в Service Worker.

Вече всичко е настроено, за да можете да добавите към service-worker.js и да персонализирате вашия обслужващ работник според нуждите. Бих препоръчал да започнете, като разгледате „Общите рецепти на Workbox“, но можете да направите още много:

Кодът

Кодът за този урок може да бъде намерен в Github на адрес https://github.com/applification/workbox-preact

Казвам се Дейв Хъдсън, аз съм UX педант за изграждане на продукти, който ръководи екипи за разработка и пише код.

Консултирам се в „Applification Ltd“ и съм на разположение за всичко свързано с React, agile и разработка на продукти!