Kako izraditi PWA pomoću Create-React-App i prilagođenih servisnih radnika

Napomena: Ovo nije temelj na aplikaciji create-react ili što je uslužni radnik. Ovaj post pretpostavlja znanje o oboje.

Dakle, nedavno sam imao priliku raditi na React projektu koji je uključivao objavljivanje nastale web aplikacije kao Progressive Web Application (PWA).

Shvatio sam što je borba dobiti PWA s prilagođenim rutama konfiguriranim unutar sastavljanja Create React App (CRA). Nadam se da će ovo pomoći da netko zaglavi u sličnom položaju.

PWA-i u Create-React-App

Kako točno dobivamo PWA da radi unutar naše CRA ljuske?

Sada CRA školjka skuplja uslužnog radnika prema zadanim postavkama. Trebali ste primijetiti da se u osnovnoj CRA ovojnici, unutar datoteke index.js, poziva da se registriraServiceWorker:

Možete stvoriti novu aplikaciju CRA i pogledati unutar datoteke registerServiceWorker.

Izgleda prilično složeno, ali zapravo je samo provjeravanje jesu li varijable okoline postavljene za proizvodnju proizvodnje i je li servisni radnik podržan u trenutnom pregledniku.

Ako pokrenete gradnju pomoću naredbe pređe, možete otvoriti mapu sastavljanja i provjeriti iznutra da biste vidjeli da je generirana datoteka service-worker.js. Ovo je zadana datoteka uslužnog radnika koju CRA generira za vas.

Oblikovanje datoteke je unutarnji ES5 JavaScript, što ga čini malo teškim za čitanje. Ali možete je izbaciti u bilo koji prettijer i trebali biste vidjeti čitljiviju datoteku.

Gledanje u gornju datoteku trebalo bi vam pokazati da jednostavno stvara statičku predmemoriju sa sljedećim nazivom predmemorije: sw-precache-v3-sw-precache-webpack-plugin - + (selg.registration? Self.registration.scope). Zatim predmemorira sve vaše statičke datoteke poput index.html i vaše js i css datoteke unutar te predmemorije.

Tamo biste trebali vidjeti i slušatelja dohvaćanog događaja koji bilježi događaj dohvaćanja i provjerava traži li aplikacija neki od prethodno spremljenih statičkih elemenata.

Sada se postavlja pitanje u iznosu od milijun dolara: što ako želite konfigurirati dinamičku predmemoriju za određenu rutu? U biti, predmemorija koja će se ažurirati podacima poslanim s poslužitelja kad korisnik posjeti određenu rutu. Imajte na umu da to znači da podaci neće biti dostupni u vrijeme izrade, pa ih zadani generirani radnik ne može predmemorirati.

Ograničenja zadanih PWA-ova u RAK-u

Nažalost, sve ovo nije jednostavno kada se koristi CRA. Osim ako naravno niste voljni izbaciti.

Pogledajte ove probleme sa GitHubom kako biste vidjeli zašto tim u CRA neće podržati prilagodbu zadanog servisnog radnika.

Dakle, s obzirom na to da mi ne možemo prilagoditi zadanog uslužnog radnika, kako ćemo to raditi?

Razumijevanje kako CRA generira uslužnog radnika

Prvi korak u pronalaženju problema oko sustava gradnje je zapravo razumjeti kako sustav gradnje funkcionira.

Dakle, započnimo s knjižnicom koju sustav gradnje koristi za generiranje datoteke uslužnog radnika.

sw-precache je knjižnica koja vam omogućuje generiranje datoteke uslužnog radnika na temelju predloška. Datoteka predloška napisana je pomoću mehanizma za podcrtavanje.

Ovdje je poveznica na datoteku predloška u izvornom kodu sw-precache.

Ponovno, datoteka predloška izgleda složeno, ali sasvim je jednostavno nakon što uspijete zaobići jezik oko predloška.

Dakle, ono što se događa kada pokrenete postupak sastavljanja u CRA školjci, u odnosu na generiranje uslužnog radnika, jest:

  1. Interno se izvršava knjižnica sw-predbilježbe
  2. Predmetni je objekt opcija za sw-predbilježbu kako bi se omogućila generacija datoteke servisnog radnika iz predloška
  3. Datoteka servisnog radnika generira se u mapi sastavljanja s nazivom service-worker.js

Nadjačavanje zadanog uslužnog radnika

Sada, kako poništiti gornji postupak kako bismo omogućili generiranje vlastite datoteke radničkog prilagođenog servisa?

Odgovor se temelji na odgovoru Jeffa Posnicka (održavača sw-predbilježbe) stackoverflow odgovora.

Prvo, moramo pokrenuti thesw-precache CLI nakon uobičajenog postupka izrade.

Instalirajte sw-precache biblioteku izvođenjem sljedeće naredbe: npm install --save-dev sw-precache

Sada, sw-predbilježba knjižnica radi na config datoteku, koja se pruža putem opcije na CLI. Ovo je naredba: sw-precache --config = sw-precache-config.js, gdje je sw-precache-config.js naziv config datoteke.

Evo primjera konfiguracijske datoteke.

module.exports = {
  staticFileGlobs: [
    'Graditi / statički / css / **. Css',
    'Graditi / statički / js / **. Js'
  ],
  swFilePath: './build/service-worker.js',
  templateFilePath: './service-worker.tmpl',
  stripPrefix: 'graditi /',
  handleFetch: lažno,
  runtimeCaching: [{
    urlPattern: /this\\.is\\.a\\.regex/,
    handler: 'networkFirst'
  }]
}

Napomena: Važno je da swFilePath navedete kao ./build/service-worker.js To je tako da je uslužni radnik generiran kao rezultat vašeg prilagođenog postupka izrade prebrisao onog kreiranog od strane CRA-a (oba dijele isto ime, u ovom slučaju). U protivnom ćete u direktoriju gradnje dobiti dvije datoteke servisnog radnika!

Postoji opsežna dokumentacija o svojstvima objekta i koje valjane vrijednosti mogu im se dodijeliti na stranici GitHub za sw-predbilježbu.

Posebno je zanimljiva opcija runtimeCaching, jer je ovo vrlo proširivo rješenje koje će vam omogućiti definiranje prilagođenih pravila kako bi vaš uslužni radnik odgovarao na dinamični sadržaj.

TemplateFilePath je opcija za koju CLI želi preuzeti datoteku predloška za prilagođeni uslužni radnik. Ali gotovo uvijek ćete koristiti datoteku predloška koju je dostavila sama knjižnica.

Napokon, trebamo pružiti skriptu koja će signalizirati CRA sustavu izgradnje da želimo da se generira naš prilagođeni radnik. Naprijed i instalirajte sw-precache knjižnicu.

Zatim ažurirajte skriptu gradnje package.json sa sljedećim:

build: react-skripte build && sw-precache --config = sw-precache-config.js

Jednom kada pokrenete postupak sastavljanja pomoću npm run build-a, možete otvoriti mapu gradnje i vidjeti generiranog servisnog radnika.

Pokrenite postupak izrade sa i bez prilagođenog servisnog radnika i primijetite razlike između to dvoje.

Zaključak

Iako se ovo može činiti kao vrlo složeni pristup nečemu tako jednostavnom kao što je prilagođavanje uslužnom radniku, ovaj pristup ima prednost zato što se čvrsto držite unutar ljuske create-react-app.

Postoje i drugi pristupi stvaranju prilagođenog uslužnog radnika (koristeći kombinaciju reakcije-aplikacije-preusmjeravanja i radnog okvira). Pokušat ću i taj post iskoristiti u postu.