A kiszolgáló dolgozók testreszabása a create-react-app segítségével

Ez az előző bejegyzésem folytatása a PWA létrehozásáról a create-reagál-alkalmazással (CRA). A linkelt bejegyzésben megvitattam, hogyan tudnánk továbbépíteni egy egyedi Service Worker-t (SW), miközben maradunk a create-reagál-alkalmazás shellben.

Ha követte a bejegyzést (és remélhetőleg sikerült is működnie), akkor észrevett egy kritikus hibát. Továbbra is rendkívül nehéz egy SW fejlesztése egy dev környezetben. Lényegében módosítania kell az SW-kódot, futtatnia kell egy összeállítási folyamatot, ki kell próbálni, ki kell vasalnia a hibákat, frissítenie és ismételnie kell. Tapasztalatból szólva kimerítő folyamat.

Menjünk előre, és találjuk ki, hogyan lehet megoldani ezt a problémát.

Dev módban dolgozik

Oké, akkor hogyan lehet SW-t futtatni dev módban, így gyorsan írhatunk néhány rossz kódot, és kitalálhatjuk, hogy mi működik és mi nem?

Először derítsük ki, hogy miért nem működik dev módban. Hozzon létre egy új CRA projektet, és nyissa meg registerServiceWorker.jsa srckönyvtár alatt.

A fenti lényegben csak a megfelelő kódrészletem van. Feltételes ellenőrzést fog észrevenni process.env.NODE_ENV === 'production'. Ez ellenőrzi, hogy fut-e gyártási összeállítás. Ha nem termelési verziót futtat, akkor az SW-t egy nem engedélyezett fájl váltja fel.

A döntés hátterében ez a GitHub-szám található.

Először próbálkozzon yarn startaz alkalmazással, és ellenőrizze, hogy van-e SW fájl az eszköztár ablakában. Ha service-worker.jsaz eszköztár linkjére kattint, a következő fájl jelenik meg:

Szerencsére van egy egyszerű megoldás erre. Ez egy egyszerű kétlépéses folyamat.

Először a registerServiceWorker.jsfájl belsejében keresse meg a window.addEventListener('load')függvényhívást. Az első sor egy olyan nyilatkozat, swUrlamely a következőket mondja:

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

Nevezze át a service-workerrészét bármi mással. Meg fogom nevezni az enyémet service-worker-custom.js.

Másodszor hozzon létre egy fájlt a nyilvános könyvtárban, pontosan ugyanazzal a névvel, mint az imént kitalált egyedi név. Szóval létrehoznék egy fájlt service-worker-custom.jsa nyilvános könyvtár belsejében.

Most service-worker-custom.jshelyezzen el egy egyszerű napló utasítást. Olyasmi, mint: console.log('My custom service worker').

Most futtassa újra az alkalmazást a gombbal, yarn startés látnia kell a napló kimutatást a böngésző konzolján. Előfordulhat, hogy törölnie kell egy korábbi szolgáltató regisztrációját, ha korábban futtatta a fonalindítást.

Szóval, itt van. Egyéni szolgáltató, aki biztonságosan futtatható a dev módban.

Megjegyzés: Nem bölcs dolog egy szerviz dolgozót tesztelni a böngészőben a privát böngészési módon kívüli dev env-ben. A dev módban történő teszteléskor mindig ellenőrizze, hogy a Frissítés újratöltéskor be van-e jelölve a dev eszközök ablakában.

A Dev és a Prod kombinálása

Kitaláltuk, hogyan tesztelhetünk egy SW-t dev módban. Meg kell találnunk azonban a módját is, hogy az egyéni kódunkat a CRA által létrehozott SW-be injektálhassuk-e egy produkciós buildben.

Ha mindent megtart az eddigi konfigurációkkal, és futtat egy build folyamatot, és ellenőrzi a böngésző buildjét, akkor észreveszi, hogy a létrehozott SW fájl az általunk létrehozott egyedi fájl. Ez problémát jelent, mert szeretnénk tudni kombinálni a CRA által számunkra kínált jóságot a saját kódunkkal.

Ezt megtehetjük a sw-precachekönyvtárral. Ezt a könyvtárat előző bejegyzésemben mutattam be. Itt található a GitHub link a sw-precachekönyvtárhoz.

Telepítse a könyvtárban yarn add sw-precache. Miután ezt megtette, hozzon létre egy sw-precache-config.jsfájlt a gyökérkönyvtárban. Itt van a fájlom:

Ennek a fájlnak a nagy részét az előző bejegyzésben mutattam be. Az egyetlen új bit az importScriptsopció. Ez meglehetősen magától értetődő, egyszerűen importálja az elérési út által megadott fájlt, és megpróbáljuk importálni az egyedi SW fájlunkat.

Észre fogja venni, hogy a fájl elérési útjából hiányzik az ./publicelőtag, annak ellenére, hogy a fájl a publickönyvtárunkban található. Ezt egy kicsit elmagyarázom.

Most frissítse a package.jsonfájlt a buildparancs módosításával . Hajtsa végre builda következő parancsot:

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

Most térjünk vissza az importScripts opcióhoz megadott fájl elérési útjára. Ha észreveszi, akkor sw-precacheez lényegében post-build folyamatként fut. Most, ha épp futtat egy build folyamatot, és megnyitja a létrehozott build könyvtárat, akkor észre fogja venni az egyéni szervizmunkás fájlját a build mappában. Amikor megadjuk az importScriptsopció elérési útját , akkor azt a build könyvtárhoz viszonyítva adjuk meg!

Miután mindezt megtette, folytassa és futtassa az alkalmazás build verzióját, és észreveszi, hogy a napló kimutatás ismét felbukkan a böngésző konzolján.

Nos, itt van! Most beinjektálhat néhány egyedi SW kódot a CRA által létrehozott alapértelmezett SW-be!