Kuidas luua PWA loomise ja reageerimise rakenduse ning kohandatud teeninduse töötajatega?

Märkus. See ei ole loo-reageeri-rakenduse praimer ega teenindustöötaja. See postitus eeldab eelnevaid teadmisi mõlemast.

Niisiis, hiljuti oli mul võimalus töötada Reacti projekti kallal, mis hõlmas saadud veebirakenduse avaldamist progressiivse veebirakendusena (PWA).

Mõistsin, kui suur on häda PWA saamiseks kohandatud marsruutidega, mis on konfigureeritud loodavas rakenduses (CRA). Loodetavasti aitab see välja aidata kedagi, kes on sarnasesse olukorda sattunud.

PWA-d rakenduses Loo-reageeri

Kuidas täpselt saame PWA-d oma CRA kesta sisse?

Nüüd ühendab CRA kest vaikimisi teenindustöötaja. Te oleksite pidanud tähele panema, et põhilises CRA kestas, faili index.js sees, on üleskutse registerServiceWorker:

Saate luua uue CRA rakenduse ja vaadata faili registerServiceWorker.

See näeb välja üsna keeruline, kuid tegelikult kontrollib ainult seda, kas keskkonnamuutujad on seadistatud tootmise jaoks ja kas praeguses brauseris on toetatud serviceWorker.

Kui käitate ehitust käsuga lõnga build, saate avada ehitamiskausta ja kontrollida, kas teenus-worker.js on loodud. See on teenuse CRA vaikefail, mille CRA teile loob.

Faili vorming on ES5-sisesel JavaScriptil, mis muudab selle lugemise pisut raskeks. Kuid võite selle kausta mis tahes eelvormindada ja peaksite nägema loetavamat faili.

Ülaltoodud faili uurimine peaks teile näitama, et see loob lihtsalt staatilise vahemälu järgmise vahemälu nimega: sw-precache-v3-sw-precache-webpack-plugin - + (selg.registration? Self.registration.scope). Seejärel vahemällu salvestab kõik teie staatilised failid, näiteks index.html, ning teie vahemälus olevad js- ja css-failid.

Samuti peaksite seal nägema tõmbeürituse kuulajat, kes püüab tõmbamissündmuse ja kontrollib, kas rakendus taotleb mõnda varem vahemällu salvestatud staatilisi varasid.

Nüüd tuleb miljoni dollari küsimus: mis saab, kui soovite seadistada konkreetse marsruudi jaoks dünaamilise vahemälu? Sisuliselt vahemälu, mis värskendab ennast serverist saadetud andmetega, kui kasutaja külastab määratud marsruuti. Pange tähele, et see tähendab, et andmed pole ehitamise ajal saadaval ja seetõttu ei saa vaikimisi loodud teenistuja neid vahemällu salvestada.

CRA vaike-PWA-de piirangud

Kahjuks ei ole reitinguagentuuride kasutamisel ülaltoodud ülesandeid eriti kerge täita. Muidugi, kui te pole nõus väljutama.

Vaadake neid GitHubi probleeme, et näha, miks CRA meeskond ei toeta vaiketöötaja kohandamist.

Seega, arvestades, et me ei saa vaikimisi teenindavat töötajat kohandada, kuidas me selle ümber töötame?

Mõistmine, kuidas CRA teenustöötajat genereerib

Esimene samm ehitamissüsteemi jaoks töö leidmiseks on tegelikult mõista, kuidas ehitamissüsteem töötab.

Alustame siis raamatukogust, mida ehitamissüsteem kasutab teenindustöötaja faili genereerimiseks.

sw-precache on teek, mis võimaldab teil malli põhjal genereerida teenindustöötaja faili. Mallifail kirjutatakse allajoone mallimootori abil.

Siin on link mallifaili sw-precache lähtekoodis.

Jällegi näeb mallifail välja keerukas, kuid see on üsna sirgjooneline, kui teil õnnestub mallikeeli ümber pöörata.

Mis juhtub, kui käitate CRA kesta ehitamisprotsessi seoses teenindava töötaja genereerimisega, siis:

  1. SW-eelmäluseadete teeki täidetakse sisemiselt
  2. Valikute objekt on ette nähtud sw-eelmähiseks, et võimaldada teenindustöötaja faili genereerimist mallist
  3. Teenindustöötaja fail genereeritakse ehitamiskaustas nimega service-worker.js

Vaikimisi teenindava töötaja alistamine

Kuidas saaksime ülaltoodud protsessi alistada, et lubada luua meie enda teenindustöötaja fail?

Vastus põhineb Jeff Posnicki (sw-precache hooldaja) ülekandmise vastusel.

Esiteks peame pärast tavalist ehitamisprotsessi käitama thesw-precache CLI.

Installige sw-precache teek, käivitades järgmise käsu: npm install --save-dev sw-precache

Nüüd töötab sw-precache teegi konfiguratsioonifail, mida pakutakse CLI suvandi kaudu. See on käsk: sw-precache --config = sw-precache-config.js, kus sw-precache-config.js on konfiguratsioonifaili nimi.

Siin on näidiskonfiguratsioonifail.

moodul.exports = {
  staticFileGlobs: [
    'ehita / staatiline / css / **. css',
    'ehita / staatiline / js / **. js'
  ],
  swFilePath: './build/service-worker.js',
  templateFilePath: './service-worker.tmpl',
  stripPrefix: 'build /',
  handleFetch: vale,
  runtimeCaching: [{
    urlPattern: / see \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\,
    käitleja: 'networkFirst'
  }]
}

Märkus. On oluline, et määraksite swFilePathi nimega ./build/service-worker.js. See on nii, et teie kohandatud ehitamisprotsessi tulemusel genereeritud teenindaja kirjutab üle CRA poolt loodavale (mõlemad on sama nimega, sel juhul). Vastasel juhul on teil ehitamiskataloogis kaks teenindustöötaja faili!

Objekti atribuutide ja nende kehtivate väärtuste kohta saab GitHubi lehel sw-precache jaoks põhjalikku dokumentatsiooni.

Erilist huvi pakub variant runtimeCaching, kuna see on väga laiendatav lahendus, mis võimaldab teil määratleda kohandatud reeglid, mille abil teie teenindav töötaja dünaamilisele sisule reageerib.

TemplateFilePath on valik, kui soovite, et CLI korjaks teie kohandatud teenindustöötaja mallifaili. Kuid te kasutate peaaegu alati mallifaili, mille pakub teek ise.

Lõpuks peame pakkuma skripti, mis annab CRA ehitamissüsteemile märku, et soovime, et meie kohandatud teeninduse töötaja luuakse. Jätkake ja installige sw-eelmälu teek.

Järgmisena värskendage skripti package.json build järgmiselt:

build: reageeri-skriptid build && sw-precache --config = sw-precache-config.js

Kui olete käivitanud npm run buildiga ehitamisprotsessi, saate avada ehitamiskausta ja näha oma loodud teenindajat.

Käivitage ehitamisprotsess koos kohandatud teenindustöötajaga ja ilma selleta ning märkige nende kahe erinevused.

Järeldus

Ehkki see võib tunduda väga paljusõnaline lähenemine millelegi nii lihtsale kui teenindustöötaja kohandamine, on selle lähenemisviisi eeliseks see, et hoiate teid kindlalt loo-reageeri-rakenduse kesta.

Kohandatud teenindustöötaja genereerimiseks on ka teisi lähenemisviise (kasutades react-app-rewire ja töökasti kombinatsiooni). Proovin selle lähenemisviisi üles leida ka postituses.