Att göra din webb app som fungerar offline, Del 1: Installation

0
10

Denna två-serie är en mjuk introduktion till offline webbutveckling. Att få en webb-applikation för att göra något när du är offline är förvånansvärt svårt, kräver en hel del saker att vara på plats och fungerar korrekt. Vi kommer att täcka alla dessa bitar från en hög nivå, med exempel som fungerar. Det här inlägget är en översikt, men det finns massor av mer detaljerade resurser som anges i hela byggnaden.

Artikel-Serien:

  1. Setup (att du är här!)
  2. Genomförandet (inlägg imorgon, stay tuned)

Grundläggande strategi

Jag kommer att göra stor användning av JavaScript ‘ s async/väntar syntax. Det stöds i alla större webbläsare och Nod, och förenklar Lovar-baserad kod. Länken ovan förklarar asynkron väl, men i ett nötskal de tillåter dig att lösa ett löfte, och få tillgång till dess värde direkt i koden med väntar, snarare än att ringa .då och åtkomst av värdet på återuppringning, vilket ofta leder till att den fruktade “åt höger drift.”

Vad ska vi bygga?

Vi kommer att utöka en befintlig booklist projekt för att synkronisera den aktuella användarens böcker till IndexedDB, och skapa en förenklad offline sida som ska visa även när användaren inte har någon nätverksanslutning.

Börjar med en tjänst arbetstagare

En icke-förhandlingsbar sak som du behöver för offline utveckling är en tjänst som arbetare. En tjänst som arbetstagaren är en bakgrundsprocess som kan, bland annat, avlyssna nätet önskemål. omdirigera dem; kortslutning dem genom att återvända cachade svar, eller köra dem som vanligt och göra egna saker med svar, som cachning.

Grundläggande caching

Förmodligen den första, mest grundläggande, men ändå med stor genomslagskraft sak du kommer att göra med en tjänst som arbetstagaren har den cache din ansökan resurser. Service till arbetstagare och cache det används är extremt låg nivå primitiver, allt är manuell. För att korrekt cache dina resurser du behöver för att hämta och lägga till dem i en cache, men då kommer du också att behöva spåra ändringar till dessa resurser. Du kommer att spåra när de ändra, ta bort den tidigare versionen, och hämta och uppdatera den nya.

I praktiken innebär detta din tjänst arbetstagare kod kommer att behöva skapas som en del av ett bygge steg, som hashar dina filer, och genererar en fil som är tillräckligt smart för att spela in dessa förändringar mellan olika versioner och uppdatera cachar som behövs.

Abstraktioner till undsättning

Detta är oerhört jobbigt och fel-benägen kod som du skulle förmodligen aldrig vill skriva själv. Lyckligtvis några smarta människor har skrivit abstraktioner för att hjälpa, nämligen sw-precache, och sw-verktygslåda av de fantastiska människorna på Google. Observera att Google har sedan utfasade dessa verktyg till förmån för nyare Syask. Jag har ännu inte röra min kod över eftersom sw-* fungerar så bra, men i alla fall idéer är de samma, och jag berättade för konverteringen är enkel. Och det är värt att nämna att sw-precache för närvarande har cirka 30 000 nedladdningar per dag, så det är fortfarande i stor utsträckning.

Hej Världen, sw-precache

Låt oss hoppa rätt i. Vi använder webpack, och som webpack går, det finns en plugin, så låt oss kontrollera att ut först.

// i din config webpack
nya SWPrecacheWebpackPlugin({
mergeStaticsConfig: sant,
filnamn: “service-worker.js”,
staticFileGlobs: [ //statiska resurser för att cache
“static/bootstrap/css/bootstrap-booklist-bygg.css”,

],
ignoreUrlParametersMatching: /./,
stripPrefixMulti: { //för alla vägar som behöver justera
“static/”: “reagera-redux/static/”,

},

})

Som standard kan ALLA paket webpack gör kommer att vara precached. Vi är också manuellt ge några vägar till statiska resurser jag vill cachas i staticFileGlobs egendom, och jag är en anpassning av vissa vägar i stripPrefixMulti.

// i din config webpack
const getCache = ({ namn, mönster, löper ut, maxEntries }) => ({
urlPattern: mönster,
handler: “cacheFirst”,
alternativ: {
cache: {
maxEntries: maxEntries || 500,
namn: namn,
maxAgeSeconds: cookien förfaller|| 60 * 60 * 24 * 365 * 2 //2 år
},
successResponses: /0|[123].*/
}
});

nya SWPrecacheWebpackPlugin({

runtimeCaching: [ //drar i sw-verktygslåda och cachar dynamiskt baserat på ett mönster
getCache({ mönstret: /^https://images-na.ssl-images-amazon.com/ namn: “amazon-images1” }),
getCache({ mönstret: /boka/searchBooks/, namn: “boka-sök”, går ut: 60 * 7 }), //7 minuter

]
})

Lägga till runtimeCaching avsnitt till vår SWPrecacheWebpackPlugin drar i sw-verktygslåda och låter oss cache webbadresser som matchar ett visst mönster, dynamiskt, som behövs—med getCache bidrar till att hålla standardtext till ett minimum.

Hej Världen, sw-verktygslådan

Hela tjänsten arbetstagare fil som genereras är ganska stor, men låt oss bara titta på en liten bit, nämligen en av de dynamiska cacherna från ovan:

verktygslåda.routern.få(/^https://images-na.ssl-images-amazon.com/, verktygslådan.cacheFirst, {
cache: { maxEntries: 500, namn: “amazon-images1”, maxAgeSeconds: 63072000 },
successResponses: /0|[123].*/
});

sw-toolbox har gett oss en bra, hög nivå router objekt som vi kan använda för att ansluta till olika URL-begäranden, MVC-stil. Vi kommer att använda denna till setup offline inom kort.

Glöm inte att registrera dig för tjänsten för arbetstagare

Och, naturligtvis, förekomsten av tjänsten arbetstagare fil som genereras ovan är till någon nytta av sig själv, det måste vara registrerade. Koden ser ut så här, men se till att antingen ha det inuti en onload lyssnaren, eller någon annan plats som kommer att garanteras att köra efter att sidan har laddats.

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

Där har vi det! Vi fick en grundläggande service arbetstagare kör, som cachar våra resurser. Lyssna på imorgon när vi utvidga det till stöd för offline.

Artikel-Serien:

  1. Setup (att du är här!)
  2. Genomförandet (inlägg imorgon, stay tuned)