TLDR;

„Servicii lucrători” reprezintă o nouă evoluție uimitoare a browserului, care este cheia pentru crearea de aplicații web progresive

„Workbox” este un super instrument care vă ajută să creați un lucrător de service

„Preact” este un cadru fantastic, subțire, bazat pe React, care este o alegere excelentă pentru construirea unui PWA datorită amprentei sale ușoare și a suportului PWA din cutie.

Preact CLI

Cel mai simplu mod de a începe cu Preact este să utilizați „preact-cli”. Nu trebuie să îl folosiți, dar vine cu o mulțime de decizii bine gândite care vă fac viața mai ușoară.

Continuați și instalați preact-cli la nivel global:

npm i -g preact-cli

Odată instalat, utilizați următoarea comandă pentru a monta aplicația noastră:

preact create default preact-sw-magic

Preact-cli va crea un PWA pentru tine din cutie, vine complet încărcat cu:

  • Divizarea automată a codului pentru rute
  • Un Service Worker generat automat folosind sw-precache
  • Model PRPL pentru a încărca rapid aplicația
  • Hidratare înainte de randare / randare pe server

Pentru a vă vedea aplicația completă cu service worker, executați următoarea comandă:

cd preact-sw-magic && npm run serve

Acum ar trebui să puteți accesa PWA pe https://localhost:8080. Puteți verifica că Service Worker este instalat deschizând „Chrome Developer Tools” și selectând fila Aplicație, apoi fila Service Worker.

Dacă treceți apoi la fila Cache, veți vedea că întreaga aplicație a fost memorată în cache pentru utilizare offline, bine!

De ce Workbox?

Toate acestea sunt fantastice și dacă tot ceea ce doriți să faceți este să vă preinstalați aplicația în cache, atunci rămâneți cu „SW-Precache” oferit de Preact este o alegere bună.

Dacă nevoile dvs. PWA sunt puțin mai ambițioase, de exemplu, doriți să adăugați notificări push sau sincronizare în fundal lucrătorului dvs. de service, atunci va trebui să treceți la caseta de lucru.

Caseta de lucru care Preact

Preact-cli a generat automat serviciul dvs. de lucru ca parte a procesului de construire. Pentru a obține controlul asupra lucrătorului de serviciu, va trebui mai întâi să dezactivăm magia preact-cli.

Dezactivați generarea de lucrători ai serviciului Preact CLI

În package.json modificați scripturile implicite pentru build și serviți după cum urmează:

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

Acest lucru îi spune lui Preact să nu genereze un lucrător de service.

Instalați modulul pachet web workbox

Vom folosi cel mai recent workbox 3.0 care este în versiune beta:

npm install --save-dev [email protected]

Creați preact.config.js

În rădăcina proiectului, creați un fișier preact.config.js și configurați pluginul workbox webpack după cum urmează:

Acest lucru îi spune webpack să folosească „workbox injectManifest”, ceea ce ne va permite să folosim propriul nostru service worker combinat cu workbox.

Creați service-worker.js

Pentru a face acest lucru, va trebui să creăm fișierul service-worker.js în rădăcina proiectului. Vom aduce lucrurile înapoi la locul în care erau și vom configura pre-caching în service-worker.js, după cum urmează:

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

Instalați service worker folosind șablonul html Preact

index.html, la fel ca și lucrătorul de serviciu, este generat automat pentru tine de preact-cli. În cazul nostru, avem nevoie de puțin mai mult control asupra acelui fișier pentru a-i spune să folosească fișierul nostru personalizat de lucrător al serviciului. Din fericire, putem adăuga un alt steag la preact-cli pentru a folosi un personalizat template.html.

Înapoi în package.json ne vom extinde în continuare scripturile de compilare după cum urmează:

Creați un template.html

Index.html implicit pentru Preact poate fi găsit în Github repo. Creați un fișier numit template.html în directorul src și copiați conținutul din depozit. La sfârșit, adăugați o altă etichetă de script cu următoarele:

Lucrător cu servicii personalizate

Încă o dată alergați:

npm run serve

Dacă reveniți la instrumentele pentru dezvoltatori Chrome și accesați secțiunea de lucrători de service, ar trebui să puteți verifica dacă lucrătorul dvs. de service este acum service-worker.js în loc de sw.js.

Dacă deschideți fișierul service-worker.js, ar trebui să vedeți ceva similar cu:

Rețineți că pre-caching este în loc, indicând un fișier manifest generat de webpack care listează toate fișierele care urmează să fie stocate în cache. Veți vedea, de asemenea, că folosim Workbox în lucratorul de service.

Totul este acum configurat pentru ca dvs. să adăugați la service-worker.js și să vă personalizați lucrătorul de service după cum este necesar. Aș recomanda să începeți prin a vă uita la „Rețetele comune ale cutiei de lucru”, dar puteți face multe altele:

  • „Personalizați precache”
  • „Configurați sincronizarea în fundal”
  • „Configurați Google Analytics offline”
  • „Configurați notificările push”

Codul

Codul pentru acest tutorial poate fi găsit pe Github la https://github.com/applification/workbox-preact

Numele meu este Dave Hudson, sunt un pedant UX care construiește produse care conduce echipe de dezvoltare și scrie cod.

Consult la „Applification Ltd” și sunt disponibil pentru toate lucrurile React, agil și dezvoltare de produse!