Machen Sie Ihre web-app funktioniert offline, Teil 1: Das Setup

0
7

Dieses zwei-teilige Serie ist eine sanfte Einführung in die offline-web-Entwicklung. Immer eine web-Anwendung, um etwas zu tun, während man offline ist überraschend schwierig, erfordert eine Menge Dinge, um im Platz ist und ordnungsgemäß funktioniert. Wir decken alle diese Stücke von einem hohen Niveau, mit funktionierenden Beispielen. Dieser post ist eine übersicht, aber es gibt viele mehr-detaillierte Ressourcen, die der gesamten.

Artikel-Serie:

  1. Die Setup (Sie sind hier!)
  2. Die Umsetzung (Beiträge morgen, stay tuned)

Basic Konzept

Ich werde machen starken Gebrauch von JavaScript async/await syntax. Es unterstützt alle wichtigen Browser und Knoten, und vereinfacht den Promise-basierten code. Der link oben erklärt, async, aber in einer nussschale, die Sie erlauben, Sie zu lösen ein Versprechen, und auf dessen Wert direkt in den code mit warten, anstatt zu callen .dann und Zugriff auf den Wert in der callback, das führt oft zu der gefürchteten “nach rechts Driften.”

Was bauen wir auf?

Wir werden die Erweiterung eines bestehenden booklist Projekt zu synchronisieren des aktuellen Benutzers Bücher zu IndexedDB, und erstellen Sie eine vereinfachte offline-Seite, die zeigen werde, selbst wenn der Benutzer über keine Netzwerkverbindung.

Beginnend mit einem service-Mitarbeiter

Das man nicht verhandelbar, was Sie brauchen, für die offline-Entwicklung ist ein service, der Arbeiter. Ein service-Mitarbeiter ist ein Prozess im hintergrund, der unter anderem abfangen von Netzwerk-Anfragen; weiterleiten; Kurzschluss, die Ihnen durch die Rücksendung zwischengespeicherten Antworten; oder führen Sie Sie als normal, und führen Sie benutzerdefinierte Dinge mit der Antwort, wie caching.

Basic-caching

Wahrscheinlich die erste, die meisten einfache, aber hohe Schlagzähigkeit, was du tun wirst mit einem service-Mitarbeiter ist es, den cache der Anwendung Ressourcen. Service-Mitarbeiter und der cache, die es verwendet sind extrem low-level-primitiven, alles ist manuell. Um richtig zu cache-Ihre Ressourcen, die Sie brauchen, zu Holen und fügen Sie Sie in einen cache, aber dann werden Sie auch brauchen, um zu verfolgen änderungen an diesen Ressourcen. Verfolgen Sie, wenn Sie sich ändern, entfernen Sie die Vorherige version, und es wird fetch und update der neuen.

In der Praxis bedeutet dies, dass Ihre service-Mitarbeiter-code generiert werden müssen als Teil eines build-Schritt, die hashes Ihrer Dateien, und generiert eine Datei, die smart genug, um die änderungen zwischen den Versionen und update-caches benötigt.

Abstraktionen zur Rettung

Dies ist äußerst mühsam und fehleranfällig-code, dass Sie würde wahrscheinlich nie schreiben möchten selbst. Glücklicherweise haben einige schlaue Leute haben geschrieben Abstraktionen zu helfen, nämlich sw-precache-und sw-toolbox, die von großen Menschen, die bei Google. Beachten Sie, Google hat da veraltet diese Werkzeuge zu Gunsten von den neueren Workbox. Ich habe noch meinen code über, da sw-* funktioniert so gut, in jedem Fall aber die Ideen sind die gleichen, und ich hab mir sagen lassen der Umbau ist einfach. Und es ist erwähnenswert, dass sw-precache hat derzeit über 30.000 downloads pro Tag, so ist es immer noch weit verbreitet.

Hallo Welt, sw-precache

Lassen Sie uns springen rechts in. Wir sind mit webpack, und als webpack geht, gibt es ein plugin, so lassen Sie prüfen, ob die erste.

// innerhalb deines webpack config
neue SWPrecacheWebpackPlugin({
mergeStaticsConfig: true,
mit dem Namen: “service-worker.js”,
staticFileGlobs: [ //statische Ressourcen-cache
“static/bootstrap/css/bootstrap-booklist-bauen.css”,

],
ignoreUrlParametersMatching: /./,
stripPrefixMulti: { //alle Pfade, einstellen müssen
“static/”: “reagieren-redux/static/”,

},

})

Standardmäßig werden ALLE bundles webpack werden precached. Wir sind auch manuell einige Pfade zu statischen Ressourcen, die ich will-Cache in der staticFileGlobs Eigentum, und ich bin Anpassung einiger Pfade in stripPrefixMulti.

// innerhalb deines webpack config
const getCache = ({ name, Muster, Ablauf, maxEntries }) => ({
urlPattern: Muster,
handler: “cacheFirst”,
Optionen: {
cache: {
maxEntries: maxEntries || 500,
name: name,
maxAgeSeconds: Ablauf|| 60 * 60 * 24 * 365 * 2 //2 Jahre
},
successResponses: /0|[123].*/
}
});

neue SWPrecacheWebpackPlugin({

runtimeCaching: [ //zieht in sw-toolbox und caches dynamisch basierend auf einem Muster
getCache({ pattern: /^https://images-na.ssl-images-amazon.com/ name: “amazon-images1” }),
getCache({ pattern: /book/searchBooks/, name: “Buch-Suche” abläuft: 60 * 7 }), //7 Minuten

]
})

Hinzufügen der runtimeCaching Abschnitt unserer SWPrecacheWebpackPlugin zieht in sw-toolbox und lässt uns cache-urls einem bestimmten Muster, dynamisch, nach Bedarf—mit getCache helfen, halten die boilerplate auf ein minimum.

Hallo Welt, sw-toolbox

Das gesamte service-worker-Datei, die erzeugt wird, ist ziemlich groß, aber lassen Sie uns schauen Sie sich nur ein kleines Stück, nämlich in einem dynamischen caches von oben:

toolbox.router.bekommen, (/^https://images-na.ssl-images-amazon.com/, toolbox.cacheFirst, {
cache: { maxEntries: 500, – name: “amazon-images1”, maxAgeSeconds: 63072000 },
successResponses: /0|[123].*/
});

sw-toolbox hat uns mit einer schönen, high-level-router-Objekt, das wir verwenden können, um die Haken in verschiedenen URL-Anfragen, MVC-Stil. Wir werden dies nutzen, um das setup offline kurz.

Vergessen Sie nicht, registrieren der service-Mitarbeiter

Und, natürlich, die Existenz des Arbeitnehmers-Datei, die generiert wird, ist die oben beschriebene keine Verwendung von selbst; es muss registriert werden. Der code sieht so aus, aber sicher sein, entweder haben es in einer onload-listener, oder irgendeiner anderen Stelle, die garantiert werden ausgeführt, nachdem die Seite geladen wurde.

wenn (“serviceWorker” im navigator) {
navigator.serviceWorker.register(“https://cdn.css-tricks.com/service-worker.js”);
}

Da haben wir es! Wir haben ein basic-service-Mitarbeiter ausgeführt, die caches unserer Anwendung Ressourcen. Tune in morgen, wenn wir erweitern, um offline unterstützen.

Artikel-Serie:

  1. Die Setup (Sie sind hier!)
  2. Die Umsetzung (Beiträge morgen, stay tuned)