Workbox: Ihr übergeordnetes Service Worker-Toolkit

Jeff Posnick

Zwei APIs spielen eine entscheidende Rolle beim Erstellen zuverlässiger Web-Apps: Service Worker und Cache Storage. Ihre effektive Nutzung – ohne subtile Fehler einzuführen oder auf Grenzfälle zu stoßen – kann jedoch eine Herausforderung sein. Beispielsweise können Fehler im Service Worker-Code zu Caching-Problemen führen. Nutzern werden dann möglicherweise veraltete Inhalte oder fehlerhafte Links angezeigt.

Workbox ist ein übergeordnetes Service Worker-Toolkit, das auf den Service Worker- und Cache Storage-APIs basiert. Es bietet eine Reihe von produktionsreifen Bibliotheken, mit denen Webanwendungen offlinefähig gemacht werden können. Das Toolkit ist in zwei Sammlungen unterteilt: Tools, mit denen Sie Code verwalten können, der in Ihrem Service Worker ausgeführt wird, und Tools, die sich in Ihren Build-Prozess einbinden lassen.

Laufzeitcode

Dies ist der Code, der in Ihrem Service Worker-Skript ausgeführt wird und steuert, wie er ausgehende Anfragen abfängt und mit der Cache Storage API interagiert. Workbox umfasst insgesamt etwa ein Dutzend Bibliotheksmodule, die jeweils für eine Vielzahl spezialisierter Anwendungsfälle geeignet sind. Die wichtigsten Module bestimmen, ob der Service Worker antwortet (Routing) und wie er antwortet (Caching-Strategie).

Integration erstellen

Workbox bietet Tools für die Befehlszeile, Node.js-Module und webpack-Plug-ins, die alternative Möglichkeiten für zwei Dinge bieten:

  • Erstellen Sie ein Service Worker-Skript basierend auf einer Reihe von Konfigurationsoptionen. Der generierte Service Worker verwendet die Laufzeitbibliotheken von Workbox, um die von Ihnen konfigurierten Caching-Strategien umzusetzen.
  • Generieren Sie eine Liste von URLs, die vorab im Cache gespeichert werden sollen, basierend auf konfigurierbaren Mustern, um Dateien einzuschließen und auszuschließen, die während des Build-Prozesses generiert wurden.

Warum sollten Sie Workbox verwenden?

Die Verwendung von Workbox beim Erstellen Ihres Service Workers ist optional. Es gibt eine Reihe von Anleitungen, in denen gängige Caching-Strategien aus der Perspektive eines „Vanilla“-Service Workers erläutert werden. Wenn Sie sich für Workbox entscheiden, profitieren Sie von folgenden Vorteilen:

Cache-Verwaltung

Workbox übernimmt die Cache-Aktualisierungen für Sie, entweder im Rahmen des Build-Prozesses, wenn Sie Pre-Caching verwenden, oder über konfigurierbare Größen-/Altersrichtlinien, wenn Sie Laufzeit-Caching verwenden. Die zugrunde liegende Cache Storage API ist leistungsstark, bietet aber keine integrierte Unterstützung für den Cache-Ablauf. Tools wie Workbox schließen diese Lücke.

Umfangreiches Logging und Error Reporting

Wenn Sie mit Service Workern beginnen, ist es eine Herausforderung, herauszufinden, warum etwas im Cache gespeichert wird (oder, ebenso frustrierend, warum es nicht im Cache gespeichert wird). Workbox erkennt automatisch, wenn Sie eine Entwicklungsversion Ihrer Website auf localhost ausführen, und aktiviert das Debugging-Logging in der JavaScript-Konsole Ihres Browsers.

Workbox-Logging in der Entwicklertools-Konsole

Wenn Sie die Logeinträge verfolgen, können Sie die Ursache von Konfigurations- oder Entwertungsproblemen viel schneller finden, als wenn Sie es allein versuchen würden.

Eine getestete, browserübergreifende Codebasis

Workbox wird mit einer browserübergreifenden Test-Suite entwickelt und greift, wenn möglich, automatisch auf alternative Implementierungen von Funktionen zurück, die in bestimmten Browsern fehlen.

Wie sollten Sie Workbox verwenden?

Framework-Integration

Wenn Sie ein neues Projekt von Grund auf neu starten, können Sie die Workbox-Integration nutzen, die in vielen gängigen Starter-Kits und Add-on-Plug-ins enthalten ist:

Workbox dem vorhandenen Build-Prozess hinzufügen

Wenn Sie bereits einen Build-Prozess für Ihre Website eingerichtet haben, müssen Sie möglicherweise nur das entsprechende Befehlszeilen-, Node.js-Modul- oder webpack-Plug-in-Tool einfügen, um Workbox zu verwenden.

Insbesondere die Workbox-Befehlszeile erleichtert den Einstieg. Sie bietet einen wizard-Modus, der Ihre lokale Entwicklungsumgebung prüft und eine sinnvolle Standardkonfiguration vorschlägt, die Sie für die Zukunft verwenden können:

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 im Rahmen eines Build-Prozesses aus, um Ihren Service Worker zu erstellen. Weitere Informationen finden Sie in der generateSW-Dokumentation. 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 Laufzeitbibliotheken von Workbox ausprobieren möchten, importieren Sie Workbox über das offizielle CDN und verwenden Sie es sofort für das Laufzeit-Caching. In diesem Fall können Sie das Precaching nicht nutzen, da dafür eine Integration während des Build-Prozesses erforderlich ist. Es eignet sich jedoch hervorragend für das Prototyping und das spontane Ausprobieren verschiedener 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',
  })
);