Ovo je nastavak mog prethodnog posta o izgradnji PWA-a pomoću aplikacije create-response-app (CRA). U povezanom postu raspravljao sam o tome kako bismo mogli krenuti u izgradnju prilagođenog uslužnog radnika (SW), a da pritom ostanemo unutar ljuske aplikacije create-response-app.
Da ste pratili post (i nadamo se da je uspio), primijetili biste jednu kritičnu manu. Još je uvijek teško razviti SW u razvojnom okruženju. U osnovi, morali biste izmijeniti svoj SW kôd, pokrenuti postupak izrade, testirati ga, ispeglati sve pogreške, osvježiti i ponoviti. Govoreći iz iskustva, to je iscrpljujući proces.
Idemo naprijed i smislimo kako riješiti taj problem.
Rad u Dev modu
Dobro, kako onda dobiti SW koji radi u dev modu, tako da možemo brzo napisati neki loš kod i shvatiti što radi, a što ne?
Prvo, shvatimo zašto to ne radi u dev modu. Stvorite novi CRA projekt i otvorite registerServiceWorker.jspod srcdirektorij.
U gornjoj suštini imam samo odgovarajući dio koda. Primijetit ćete uvjetnu provjeru process.env.NODE_ENV === 'production'. Ovo provjerava radite li izvodite li produkciju. Ako ne izvodite produkcijsku gradnju, SW će biti zamijenjen datotekom koja ne radi.
Obrazloženje ove odluke nalazi se u ovom izdanju GitHub-a.
Prvo isprobajte i pokrenite yarn startaplikaciju i u prozoru alatne trake potražite SW datoteku. Ako kliknete service-worker.jsvezu na alatnoj traci, prikazat će vam se sljedeća datoteka:
Srećom, postoji jednostavno rješenje. To je jednostavan postupak u dva koraka.
Prvo, unutar registerServiceWorker.jsdatoteke, potražite window.addEventListener('load')poziv funkcije. Prvi redak je deklaracija za swUrlkoju stoji:
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;Preimenujte njegov service-workerdio s bilo čime drugim. Idem imenovati svoje service-worker-custom.js.
Drugo, stvorite datoteku unutar svog javnog direktorija s istim imenom kao i prilagođeno ime koje ste upravo smislili. Dakle, stvorio bih datoteku koja se zove service-worker-custom.jsunutar javnog direktorija.
Sada, unutar service-worker-custom.js, stavite jednostavan zapisnik. Nešto poput: console.log('My custom service worker').
Sada ponovo pokrenite aplikaciju yarn starti trebali biste vidjeti ispis dnevnika na konzoli preglednika. Možda ćete trebati odjaviti prijašnjeg uslužnog radnika ako ste ikad prije toga pokrenuli pređu.
Pa, eto vam. Prilagođeni uslužni radnik kojeg možete sigurno pokretati unutar razvojnog načina.
Napomena: Nije pametno testirati uslužnog radnika u razvojnom okruženju izvan načina privatnog pregledavanja u vašem pregledniku. Također, uvijek provjerite je li Ažuriranje pri ponovnom učitavanju označeno u prozoru alata za razvojne programere prilikom testiranja u načinu rada.
Kombinirajući Dev i Prod
Sada smo smislili kako testirati SW u dev načinu. Međutim, također moramo pronaći način za ubrizgavanje našeg prilagođenog koda u SW generiran od strane CRA u proizvodnoj građi.
Ako zadržite sve kako je s konfiguracijama koje smo do sada napravili i pokrenete postupak gradnje i provjerite izgradnju u vašem pregledniku, primijetit ćete da je generirana SW datoteka prilagođena koju smo stvorili. To je problem, jer želimo kombinirati dobrotu onoga što nam nudi CRA s vlastitim kodom.
To možemo učiniti s sw-precacheknjižnicom. Ovu sam knjižnicu predstavio u svom prethodnom postu. Ovdje je GitHub veza do sw-precacheknjižnice.
Instalirajte knjižnicu s yarn add sw-precache. Nakon što to učinite, stvorite sw-precache-config.jsdatoteku u svom korijenskom direktoriju. Evo moje datoteke:
Većinu ove datoteke predstavio sam u prethodnom postu. Jedina nova bit je importScriptsopcija. To je prilično samorazumljivo, jednostavno uvozi datoteku navedenu putem, a mi pokušavamo uvesti našu prilagođenu SW datoteku.
Primijetit ćete da na putu do datoteke nedostaje ./publicprefiks, unatoč tome što je datoteka prisutna u našem publicdirektoriju. Ovo ću malo objasniti.
Sada ažurirajte svoju package.jsondatoteku izmjenom buildnaredbe. Učinite svoj buildnaredbu sljedeće:
react-scripts build && sw-precache --config=sw-precache-config.js
Vratimo se sada putu datoteke koji smo naveli za opciju importScripts. Ako primijetite, u sw-precacheosnovi se izvodi kao postupak izrade naknadno. Sada, ako samo pokrenete postupak gradnje i otvorite kreirani direktorij gradnje, primijetit ćete svoju datoteku prilagođenog uslužnog radnika u mapi gradnje. Kada pružimo put do importScriptsopcije, pružamo je u odnosu na direktorij gradnje!
Jednom, kad ste sve to učinili, izvolite i pokrenite verziju izrade aplikacije i primijetit ćete da se zapisnik ponovo pojavljuje na konzoli preglednika.
Pa, eto ti! Sada možete ubrizgati neki prilagođeni SW kod u zadani SW koji generira CRA!