Workbox: Ihr Service Worker-Toolkit auf höchster Ebene

Jeff Posnick

Zwei APIs spielen eine entscheidende Rolle bei der Erstellung zuverlässiger Web-Apps: Service Worker und Cache-Speicher. Aber ohne dass kleine Insekten entstehen oder an die Kante stoßen, kann eine Herausforderung sein. So können Fehler in Ihrem Service Worker-Code Caching-Probleme verursachen; dass Nutzern veraltete oder fehlerhafte Inhalte angezeigt werden. Links.

Workbox ist eine übergeordnete Service Worker-Toolkit, das auf Service Worker und Cache Storage basiert APIs Es bietet einen produktionsreifen Satz von Bibliotheken für das Hinzufügen von Offline-Unterstützung zu Web-Apps. Das Toolkit ist in zwei Sammlungen gegliedert: Tools, Code, der in Ihrem Service Worker ausgeführt wird, und Tools, die sich in Ihren des Build-Prozesses.

Laufzeitcode

Dieser Code wird in Ihrem Service Worker-Skript ausgeführt und steuert, fängt sie ausgehende Anfragen ab und interagiert mit der Cache Storage API. Die Workbox hat ein insgesamt etwa Dutzende Bibliotheksmodule, die jeweils für eine Vielzahl von speziellen Anwendungsfällen geeignet sind. Die wichtigsten Module ob der Service Worker antwortet (sogenannte routing), und wie er darauf reagiert (die Caching-Strategie).

Build-Integration

Workbox-Angebote Befehlszeile, Node.js-Modul und Webpack-Plug-in Tools, die alternative Möglichkeiten bieten, zwei Dinge zu erreichen:

  • Service Worker-Skript auf Basis eines Konfigurationssatzes erstellen Optionen. Der generierte Service Worker verwendet die Laufzeitbibliotheken von Workbox. Details um die von Ihnen konfigurierten Caching-Strategien in die Tat umzusetzen.
  • Liste der URLs erstellen, die "vorab im Cache gespeichert", basierend auf konfigurierbaren Mustern zum Ein- und Ausschließen generierter Dateien während des Build-Prozesses.

Warum sollten Sie Workbox verwenden?

Die Verwendung der Workbox beim Erstellen Ihres Service Workers ist optional, die Ihnen Schritt für Schritt Gängige Caching-Strategien von einem „Vanille“ aus der Service-Worker-Perspektive. Wenn Sie sich für Workbox entscheiden, Hier sind einige der Vorteile.

Cache-Verwaltung

Workbox übernimmt Cache-Updates für Sie, die entweder in Ihren Build-Prozess eingebunden sind, mit Precaching oder über konfigurierbare Richtlinien für Größe/Alter bei Verwendung der Laufzeit Caching. Die zugrunde liegende Cache Storage API ist leistungsstark, enthält aber keine integrierte Unterstützung für den Cache-Ablauf. Tools wie Workbox schließen diese Lücke.

Umfassende Protokollierung und Fehlerberichte

Wenn Sie gerade erst mit Service Workern beginnen, sollten Sie herausfinden, warum etwas zwischengespeichert wird (oder ebenso frustrierend, warum es nicht im Cache gespeichert wird) ist eine Herausforderung. Workbox erkennt automatisch, wenn Sie eine Entwicklerversion Ihres unter localhost und aktiviert die Debugging-Protokollierung im JavaScript-Code Ihres Browsers .

Workbox-Logging in der Entwicklertools-Konsole

Wenn Sie den Protokollmeldungen folgen, können Sie zum Stamm aller Konfigurations- oder Entwertungsprobleme viel schneller als allein.

Getestete, browserübergreifende Codebasis

Workbox wurde für eine browserübergreifende Testsuite entwickelt. Wenn möglich, auf alternative Implementierungen von Funktionen zurückgreift, in bestimmten Browsern fehlt.

Wie sollten Sie Workbox verwenden?

Framework-Integration

Wenn Sie ein neues Projekt von Grund auf neu starten, können Sie die Vorteile Workbox-Integration, die in vielen beliebten Starter Kits und Add-on-Plug-ins verwendet wird:

Workbox zu Ihrem bestehenden Erstellungsprozess hinzufügen

Falls Sie bereits über einen Erstellungsprozess für Ihre Website verfügen, fügen Sie angemessen Befehlszeile, Node.js-Modul oder Webpack-Plug-in Tool ist möglicherweise alles, was Sie brauchen, um Workbox verwenden zu können.

Besonders die Workbox-Befehlszeilenschnittstelle vereinfacht das ausgeführt, mit einem wizard-Modus, der Ihre lokale Entwicklung überprüft und schlagen eine angemessene Standardkonfiguration vor, Zukünftig:

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

Führen Sie workbox generateSW workbox-config.js aus, um den Service Worker zu erstellen als Teil eines Build-Prozesses. Weitere Informationen finden Sie in der Dokumentation zu generateSW. Sie können den Service Worker weiter anpassen, indem Sie Änderungen an workbox-config.js vornehmen. Weitere Informationen finden Sie in der Dokumentation zu den Optionen.

Workbox zur Laufzeit in einem vorhandenen Service Worker verwenden

Wenn Sie bereits einen Service Worker haben und die Workbox-Laufzeit testen möchten Bibliotheken Workbox aus ihrem offiziellen CDN importieren und nutzen es sofort für das Laufzeit-Caching. Diese Verwendung bedeutet das, dass ihr Precaching nicht nutzen könnt, erfordert Integration während der Build-Erstellung), eignet sich jedoch hervorragend für das Prototyping und verschiedene Caching-Strategien.

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);