Het maken van uw web app werkt offline, Deel 1: Het Setup –

0
9

Deze twee-delige serie is een zachte inleiding tot het offline web development. Het krijgen van een web applicatie om iets te doen terwijl u off line is verrassend lastig, die veel dingen op zijn plaats is en correct werkt. We gaan voor elk van deze stukken van een hoog niveau, met voorbeelden uit de praktijk. Deze post is een overzicht, maar er zijn veel meer gedetailleerde bronnen vermeld in het hele gebouw.

Serie Artikelen:

  1. De Setup (dat je hier bent!)
  2. De Uitvoering (posts morgen, stay tuned)

Basic aanpak

Ik zal het maken intensief gebruik van JavaScript ‘ s async/wachten-syntaxis. Het ondersteund wordt in alle belangrijke browsers en het Knooppunt, en vereenvoudigt Belofte op basis van code. De link hierboven uitgelegd async, maar in een notendop ze stellen u in staat tot het oplossen van een belofte, en de waarde direct in de code met wachten, eerder dan te bellen .en dan het openen van de waarde in het terugbellen, wat vaak leidt tot de gevreesde “naar rechts drift.”

Wat zijn we bezig?

We zullen het uitbreiden van een bestaande boekenlijst project te synchroniseren van de huidige gebruiker te boeken IndexedDB, en het maken van een vereenvoudigde offline pagina die u te zien, zelfs wanneer de gebruiker geen verbinding met het netwerk.

Te beginnen met een service werknemer

De één niet-verhandelbare wat je nodig hebt voor offline ontwikkeling is een service werknemer. Een service werknemer is een achtergrond proces dat kan, onder andere, te onderscheppen netwerk verzoeken omleiden van hen; kortsluiting ze door terug te keren in de cache antwoorden; of het uitvoeren ze als normale en aangepaste doen dingen met het antwoord, zoals caching.

Basic caching

Waarschijnlijk het eerste, meest eenvoudige, maar kwalitatief effect wat je doet met een service werknemer is het cache van de toepassing van middelen. Service werknemer en de cache gebruikt, zijn uiterst laag niveau primitieven; alles is handmatig. Om goed te kunnen cache van uw middelen die je nodig hebt op te halen en ze toevoegen aan een cache, maar dan heb je ook nodig hebt voor het bijhouden van wijzigingen aan deze middelen. U zult bijhouden wanneer ze veranderen, verwijder dan de vorige versie, en het ophalen en bijwerken van de nieuwe.

In de praktijk betekent dit dat de service worker-code moet worden gegenereerd als onderdeel van een te bouwen stap, die hashes van uw bestanden, en genereert u een bestand dat is slim genoeg om de opname van deze wijzigingen tussen de versies, en update caches als dat nodig is.

De onttrekking aan de redding

Dit is zeer vervelend en foutgevoelig code die u zou waarschijnlijk nooit willen schrijven zelf. Gelukkig waren er slimme mensen hebben geschreven abstracties te helpen, namelijk sw-precache, en sw-toolbox door de grote mensen bij Google. Let op, Google is sindsdien niet meer in gebruik van deze tools in het voordeel van de nieuwere Workbox. Ik heb nog mijn code over omdat sw-* zo goed werkt, maar in ieder geval de ideeën zijn dezelfde, en ik vertelde de conversie is eenvoudig. En het is de moeite waard te vermelden dat sw-precache heeft op dit moment ongeveer 30.000 downloads per dag, dus het is nog steeds veel gebruikt.

Hallo Wereld, sw-precache

Laten we springen recht in. We gebruiken webpack, en als webpack gaat, er is een plugin, dus laten we check dat eerst uit.

// binnen de webpack config
nieuwe SWPrecacheWebpackPlugin({
mergeStaticsConfig: true,
bestandsnaam: “service-worker.js”,
staticFileGlobs: [ //statische bronnen cache
“static/bootstrap/css/bootstrap-boekenlijst-bouwen.css”,

],
ignoreUrlParametersMatching: /./,
stripPrefixMulti: { //alle paden die moet aanpassen
“static/”: “reageer-redux/static/”,

},

})

Standaard worden ALLE bundels webpack maakt zal worden precached. We zijn ook handmatig verstrekken van enkele paden om statische bronnen wil ik in de cache van de staticFileGlobs eigendom, en ik ben het aanpassen van enkele paden in stripPrefixMulti.

// binnen de webpack config
const getCache = ({ naam, patroon verloopt, maxEntries }) => ({
urlPattern: patroon,
handler: “cacheFirst”,
opties: {
cache: {
maxEntries: maxEntries || 500,
naam: de naam,
maxAgeSeconds: vervalt|| 60 * 60 * 24 * 365 * 2 //2 jaar
},
successResponses: /0|[123].*/
}
});

nieuwe SWPrecacheWebpackPlugin({

runtimeCaching: [ //trekt in sw-toolbox en caches dynamisch op basis van een patroon
getCache({ patroon: /^https://images-na.ssl-images-amazon.com/ naam: “amazon-images1″ }),
getCache({ patroon: /book/searchBooks/, naam: ‘het boek-search”, vervalt: 60 * 7 }), //7 minuten

]
})

Het toevoegen van de runtimeCaching deel aan onze SWPrecacheWebpackPlugin trekt in sw-toolbox en laat ons cache url ‘ s die overeenkomen met een bepaalde patroon, dynamisch, als dat nodig is—met getCache helpt bij het behouden van de bewaarplaats tot een minimum te beperken.

Hallo Wereld, sw-toolbox

De gehele service worker-bestand dat is gegenereerd is vrij groot, maar laten we eens kijken naar een klein stukje, namelijk een van de dynamische caches van boven:

toolbox.router.krijgen(/^https://images-na.ssl-images-amazon.com/, toolbox.cacheFirst, {
cache: { maxEntries: 500, naam: ‘amazon-images1″, maxAgeSeconds: 63072000 },
successResponses: /0|[123].*/
});

sw-toolbox heeft ons voorzien van een mooie, hoge niveau router object dat we kunnen gebruiken om de haak in verschillende URL-aanvragen, MVC-stijl. We gebruiken deze om de instellingen voor offline kort.

Vergeet niet te registreren voor de service werknemer

En, natuurlijk, het bestaan van de service worker-bestand dat is gegenereerd bovenstaande is geen op zichzelf; het moet worden geregistreerd. De code ziet er als volgt, maar zorg dat het binnen een onload luisteraar, of een andere plaats die je gegarandeerd worden uitgevoerd nadat de pagina is geladen.

als (“serviceWorker” in de navigator) {
navigator.serviceWorker.registreren(“https://cdn.css-tricks.com/service-worker.js”);
}

Daar hebben we het! We kregen een basic service werknemer wordt uitgevoerd, die caches onze bronnen. Tune in morgen, wanneer we uit te breiden ter ondersteuning van offline.

Serie Artikelen:

  1. De Setup (dat je hier bent!)
  2. De Uitvoering (posts morgen, stay tuned)