Sådan tilpasses servicearbejdere med create-react-app

Dette er en opfølgning på mit tidligere indlæg om opbygning af en PWA med create-react-app (CRA). I det sammenkædede indlæg diskuterede jeg, hvordan vi kunne gå omkring opbygningen af ​​en brugerdefineret servicearbejder (SW), mens vi holdt os i shell-create-react-app.

Hvis du fulgte med indlægget (og forhåbentlig fik det til at fungere), ville du have bemærket en kritisk fejl. Det er stadig ekstremt svært at udvikle en SW i et dev miljø. I det væsentlige skal du ændre din SW-kode, køre en byggeproces, teste den, stryge eventuelle fejl, opdatere og gentage. Når vi taler af erfaring, er det en udmattende proces.

Lad os gå videre og finde ud af, hvordan vi løser dette problem.

Arbejder i Dev-tilstand

Okay, så hvordan får vi en SW, der kører i dev-tilstand, så vi hurtigt kan skrive en dårlig kode og finde ud af, hvad der fungerer, og hvad der ikke fungerer?

Lad os først finde ud af, hvorfor det ikke fungerer i dev-tilstand. Opret et nyt CRA-projekt, og åbn registerServiceWorker.jsunder srcbiblioteket.

I ovenstående kerne har jeg kun det relevante stykke kode. Du vil bemærke en betinget kontrol process.env.NODE_ENV === 'production'. Dette kontrollerer, om du kører en produktionsbygning. Hvis du ikke kører en produktionsversion, erstattes SW med en no-op-fil.

Begrundelsen bag denne beslutning findes i dette GitHub-udgave.

Prøv først at køre yarn startpå din app og se efter en SW-fil i værktøjslinjens vindue. Hvis du klikker på service-worker.jslinket i værktøjslinjen, får du vist følgende fil:

Heldigvis er der en simpel løsning på dette. Det er en nem totrins proces.

Først inden i registerServiceWorker.jsfilen skal du kigge efter window.addEventListener('load')funktionsopkaldet. Den første linje er en erklæring, swUrlsom siger:

const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

Omdøb den service-workerdel af det med noget andet. Jeg skal navngive min service-worker-custom.js.

For det andet skal du oprette en fil inde i din offentlige mappe med det nøjagtige samme navn som det brugerdefinerede navn, du lige kom op med. Så jeg ville oprette en fil kaldet service-worker-custom.jsinde i det offentlige bibliotek.

Nu, indersiden af service-worker-custom.js, placere en simpel log erklæring. Noget i retning af: console.log('My custom service worker').

Kør nu din app igen med, yarn startog du skal se logsætningen dukke op i din browserkonsol. Du bliver muligvis nødt til at afregistrere en tidligere servicearbejder, hvis du nogensinde har kørt garnstart før dette.

Så der har du det. En brugerdefineret servicearbejder, som du kan køre sikkert i dev-tilstand.

Bemærk: Det er uklogt at teste en servicearbejder i en dev env uden for privat browsing-tilstand i din browser. Sørg også altid for, at Update On Reload er markeret i dit dev-værktøjsvindue, når du tester i dev-tilstand.

Kombination af Dev og Prod

Nu har vi fundet ud af, hvordan man tester en SW i dev-tilstand. Vi skal dog også finde en måde at indsprøjte vores brugerdefinerede kode i SW genereret af CRA i en produktionsbygning.

Hvis du holder alt som det er med de konfigurationer, vi hidtil har foretaget, og kører en byggeproces og kontrollerer build i din browser, vil du bemærke, at den genererede SW-fil er den brugerdefinerede, vi oprettede. Dette er et problem, fordi vi vil være i stand til at kombinere godheden af, hvad CRA har at tilbyde os med vores egen kode.

Vi kan gøre dette med sw-precachebiblioteket. Jeg introducerede dette bibliotek i mit tidligere indlæg. Her er GitHub-linket til sw-precachebiblioteket.

Installer biblioteket med yarn add sw-precache. Når du har gjort det, skal du oprette en sw-precache-config.jsfil i din rodmappe. Her er min fil:

Jeg har introduceret det meste af denne fil i det forrige indlæg. Den eneste nye bit er importScriptsmuligheden. Dette er ret selvforklarende, det importerer simpelthen den fil, der er angivet af stien, og vi prøver at importere vores brugerdefinerede SW-fil.

Du vil bemærke, at stien til filen mangler ./publicpræfikset, på trods af at filen findes i vores publicbibliotek. Jeg forklarer det lidt.

Opdater nu din package.jsonfil med en ændring af buildkommandoen. Giv din buildkommando følgende:

react-scripts build && sw-precache --config=sw-precache-config.js

Lad os nu gå tilbage til den filsti, vi leverede til importScripts-indstillingen. Hvis du bemærker, sw-precachekører det i det væsentlige som en post-build-proces. Nu, hvis du bare kører en byggeproces og åbner den buildmappe, der oprettes, vil du bemærke din brugerdefinerede servicearbejderfil i buildmappen. Når vi giver en sti til importScriptsindstillingen, leverer vi den i forhold til buildmappen!

Når du har gjort alt dette, skal du køre build-versionen af ​​din app, og du vil bemærke, at logerklæringen dukker op igen i din browserkonsol.

Nå, der har du det! Du kan nu indsprøjte en brugerdefineret SW-kode i standard SW genereret af CRA!