Gjør din web app arbeide i frakoblet modus, Del 1: Oppsett

0
8

Denne to-del-serien er en forsiktig introduksjon til frakoblet web-utvikling. Å få en web-programmet for å gjøre noe mens du er frakoblet, er overraskende vanskelig, krever en masse ting å være på plass og fungere på riktig måte. Vi kommer til å dekke alle disse bitene fra et høyt nivå, med fungerende eksempler. Dette innlegget er en oversikt, men det er nok av mer detaljerte ressursene som er nevnt over hele hotellet.

Artikkel-Serien:

  1. Setup (er du her!)
  2. Gjennomføring (innlegg i morgen, stay tuned)

Grunnleggende tilnærming

Jeg skal gjøre omfattende bruk av JavaScript er async/await syntaks. Den er støttet i alle de store nettleserne og Node, og forenkler Løfte-basert kode. Linken ovenfor forklarer asynkron godt, men i et nøtteskall de tillater deg å løse et løfte, og tilgang sin verdi direkte i koden venter med, snarere enn å ringe .klikk og få tilgang til verdien i innb., noe som ofte fører til den fryktede “mot høgre drift.”

Hva skal vi bygge?

Vi skal utvide en eksisterende booklist prosjekt for å synkronisere den gjeldende brukerens bøker til IndexedDB, og lag en forenklet frakoblet side som vil vise selv når brukeren har ingen nettverkstilkobling.

Starter med en service arbeidstaker

En ikke-omsettelig ting du trenger for frakoblet utvikling er en tjeneste arbeidstaker. En tjeneste ansatt er en bakgrunnsprosess som kan blant annet fange opp nettverk forespørsler; omdirigere dem; kortslutning dem ved å gå tilbake bufret svar, eller utføre dem som normalt og gjøre tilpassede ting med responsen, som caching.

Grunnleggende caching

Trolig den første og mest grunnleggende, men likevel stor innvirkning ting du vil gjøre med en service arbeidstaker er har det cache programmets ressurser. Service arbeidstaker og buffer bruker er svært lavt nivå primitiv; alt er manuell. For å riktig cache ressursene du trenger for å hente og legge dem til i en cache, men da vil du også trenger for å spore endringer til disse ressursene. Vil du spor når de endre, fjerne den tidligere versjonen, og hente og oppdatere den nye.

I praksis betyr dette at tjenesten arbeidstaker-kode må genereres som en del av et bygge trinn, som hasher til filene dine, og genererer en fil som er smart nok til å ta opp disse endringene mellom versjonene, og oppdatere cacher som er nødvendig.

Abstraksjoner til unnsetning

Dette er svært kjedelig og utsatt for feil-kode som du ville trolig aldri vil skrive selv. Heldigvis noen smarte folk har skrevet abstraksjoner for å hjelpe, nemlig sw-precache, og sw-toolbox av flotte mennesker på Google. Merk, Google har siden deprecated disse verktøyene i favør av den nye Workbox. Jeg har ennå til å flytte koden min over siden sw-* fungerer så godt, men i alle tilfelle ideer er den samme, og jeg fortalte konvertering er enkelt. Og det er verdt å nevne at sw-precache i dag har rundt 30 000 nedlastinger per dag, så det er fortsatt mye brukt.

Hei Verden, sw-precache

La oss hoppe rett i. Vi bruker webpack, og som webpack går, det er en plugin, så la oss sjekke det ut først.

// inne webpack config
nye SWPrecacheWebpackPlugin({
mergeStaticsConfig: true,
filnavn: “service-worker.js”,
staticFileGlobs: [ //statiske ressurser til å bufre
“statisk/bootstrap/css/bootstrap-booklist-bygg.css”,

],
ignoreUrlParametersMatching: /./,
stripPrefixMulti: { //noen veier som trenger justering
“statisk/”: “reagere-redux/statisk/”,

},

})

Som standard ALLE buntene webpack gjør vil være precached. Vi er også manuelt gir noen stier til statiske ressurser jeg vil bufret i staticFileGlobs eiendom, og jeg justere noen stier i stripPrefixMulti.

// inne webpack config
const getCache = ({ navn, mønster, utløper, maxEntries }) => ({
urlPattern: mønster,
handler: “cacheFirst”,
valg: {
cache: {
maxEntries: maxEntries || 500,
navn: navn,
maxAgeSeconds: utløper|| 60 * 60 * 24 * 365 * 2 //2 år
},
successResponses: /0|[123].*/
}
});

nye SWPrecacheWebpackPlugin({

runtimeCaching: [ //trekker i sw-toolbox-og oppdateres dynamisk basert på et mønster
getCache({ mønster: /^https://images-na.ssl-images-amazon.com/, name: “amazon-images1” }),
getCache({ mønster: /bok/searchBooks/, name: “book-søk”, utløper: 60 * 7 }), //7 minutter

]
})

Å legge runtimeCaching delen til vår SWPrecacheWebpackPlugin trekker i sw-toolbox-og lar oss cache nettadresser matchende et bestemt mønster, dynamisk etter behov—med getCache hjelpe til å holde standardteksten til et minimum.

Hei Verden, sw-verktøykasse

Hele tjenesten arbeidstaker fil som er generert er ganske stor, men la oss bare se på en liten del, nemlig en av de dynamiske cacher fra over:

verktøykassa.ruteren.få(/^https://images-na.ssl-images-amazon.com/ toolbox.cacheFirst, {
cache: { maxEntries: 500, name: “amazon-images1”, maxAgeSeconds: 63072000 },
successResponses: /0|[123].*/
});

sw-toolbox har gitt oss en fin, high-nivå ruter objekt som vi kan bruke til å koble inn ulike URL-forespørsler, MVC-stil. Vi vil bruke dette til å setup frakoblet kort tid.

Ikke glem å registrere tjenesten arbeidstaker

Og, selvfølgelig, eksistensen av service arbeidstaker fil som er generert over er ikke av bruk av seg selv; det er behov for å bli registrert. Koden ser slik ut, men sørg for å enten ha det i en onload lytteren, eller noen andre plasser som vil være garantert å kjøre etter at siden er lastet.

hvis (“serviceWorker” i navigator) {
navigator.serviceWorker.registrer deg(“https://cdn.css-tricks.com/service-worker.js”);
}

Der har vi det! Vi fikk en grunnleggende service arbeidstaker som kjører, som cacher vår søknad ressurser. Tune i morgen når vi utvide det til støtte for frakoblet modus.

Artikkel-Serien:

  1. Setup (er du her!)
  2. Gjennomføring (innlegg i morgen, stay tuned)