Workbox

Wenn Ihre PWA wächst, kann es schwierig sein, die Service Worker- und Cache-Speicherlogik zu pflegen. Workbox enthält eine Reihe von Open-Source-Bibliotheken, die Ihnen dabei helfen. Workbox kapselt die Low-Level-APIs wie die Service Worker API und die Cache Storage API und bietet entwicklerfreundlichere Schnittstellen.

Sie kann beispielsweise helfen, Caching-Strategien mit Pfaden (oder Routingmustern) abzugleichen, mit Streams zu arbeiten und Funktionen wie die Hintergrundsynchronisierung mit geeigneten Fallbacks zu verwenden.

Workbox kann Ihnen dabei helfen, Ihre Anforderungen an das Caching und die Bereitstellung von Assets zu verwalten. Sie ist auch die am häufigsten verwendete Bibliothek für Service Worker. Sie wird von 54% der mobilen Websites und in vielen Build-Tools und Befehlszeilen, einschließlich Angular CLI, Create-React-App und Vue CLI, genutzt. Es gibt auch Plug-ins für die meisten anderen Bibliotheken und Frameworks, z. B. Next.js.

54%

Mobile Websites mit Service Workern verwenden die Workbox-Bibliothek

Workbox-Module

Workbox enthält mehrere Bibliotheken, die intern als Module bezeichnet werden und jeweils einen anderen Aspekt der Verwaltung Ihrer Assets und des Service Worker-Verhaltens abdecken.

Workbox-Module funktionieren in verschiedenen Kontexten, z. B.:

  • In einem Service Worker-Kontext: Sie importieren die benötigten Module und verwenden sie aus Ihrer Service Worker-Datei, um beispielsweise das Caching zu verwalten und Dateien mit verschiedenen Strategien bereitzustellen.
  • Im Hauptkontext von window: Unterstützung bei der Registrierung eines Service Workers und der Kommunikation mit ihm
  • Als Teil eines Build-Systems: beispielsweise Webpack, um ein Manifest Ihrer Assets zu erstellen oder sogar Ihren gesamten Service Worker zu generieren.

Beliebte Module sind:

  • workbox-routing: Wenn der Service Worker Anfragen abfängt, leitet dieses Modul diese Anfragen an verschiedene Funktionen weiter, die Antworten liefern. Es handelt sich dabei um eine Implementierung des Event-Handlers fetch, wie im Kapitel „Serving“ beschrieben.
  • workbox-strategies: Eine Reihe von Strategien für die Laufzeit-Caching, mit denen auf eine Anfrage reagiert wird, z. B. „zuerst in den Cache“ und während der erneuten Validierung veraltet. Hierbei handelt es sich um eine Implementierung der verschiedenen Strategien, die im Kapitel zur Auslieferung erwähnt werden.
  • Workbox-Precaching: Eine Implementierung von Caching-Dateien im Event-Handler install des Service Workers (auch Precaching genannt), wie im Kapitel „Caching“ beschrieben. Mit diesem Modul können Sie eine Reihe von Dateien einfach vorab im Cache speichern und Aktualisierungen dieser Assets effizient verwalten. Wir behandeln das Aktualisieren von Assets im Kapitel „Update“.
  • workbox-expiration: Dieses Plug-in wird mit den Caching-Strategien verwendet, um im Cache gespeicherte Anfragen basierend auf der Anzahl der Elemente in einem Cache oder dem Alter der im Cache gespeicherten Anfrage zu entfernen. Sie hilft Ihnen beim Verwalten Ihrer Caches und legt Limits für die Zeit und die Anzahl der Elemente in einem Cache fest.
  • workbox-window: Eine Reihe von Modulen, die im Fensterkontext, also innerhalb Ihrer PWA-Webseiten, ausgeführt werden sollen. Sie können die Registrierung und Aktualisierung von Service Workern vereinfachen und die Kommunikation zwischen dem im Service Worker-Kontext ausgeführten Code und dem Fensterkontext ermöglichen.

Workbox verwenden

Workbox bietet verschiedene Möglichkeiten zur Integration in Ihre PWA. Sie können auswählen, was am besten zur Architektur Ihrer App passt:

  • Workbox-Befehlszeile: Ein Befehlszeilendienstprogramm, das einen vollständigen Service Worker generiert, ein Precache-Manifest einfügt oder benötigte Workbox-Dateien kopiert.
  • Workbox Build: Ein npm-Modul, das einen vollständigen Service Worker generiert, ein Precache-Manifest einfügt und die Workbox-Dateien kopiert. Dies sollte in Ihren eigenen Build-Prozess integriert werden.
  • workbox-sw: Eine Möglichkeit, Workbox-Service-Worker-Pakete aus einem CDN zu laden, das keinen Build-Prozess verwendet.

Die Workbox CLI bietet einen Assistenten, der Sie durch die Erstellung Ihres Service Workers führt. Geben Sie Folgendes in einer Befehlszeile ein, um den Assistenten auszuführen:

npx workbox-cli wizard

Workbox CLI in einem Terminal

Caching und Bereitstellung mit Workbox

Workbox wird häufig verwendet, um die Routing- und Strategiemodule gemeinsam zu verwenden, um Dateien im Cache zu speichern und bereitzustellen.

Das Modul workbox-strategies enthält standardmäßig die Caching-Strategien, die in den Kapiteln Assets und Daten und Auslieferung erläutert werden.

Das Modul workbox-routing hilft Ihnen, eingehende Anfragen für Ihren Service Worker zu sortieren und sie mit den Caching-Strategien oder -Funktionen abzugleichen, um Antworten für diese Anfragen zu erhalten.

Nach dem Abgleich von Routen mit Strategien bietet Workbox auch die Möglichkeit zu filtern, welche Antworten mit dem Plug-in workbox-cacheable-response zum Cache hinzugefügt werden. Mit diesem Plug-in können Sie beispielsweise nur Antworten im Cache speichern, die ohne Fehler zurückgegeben wurden.

Im folgenden Codebeispiel wird die Strategie „Cache-First“ (über das Modul CacheFirst) verwendet, um Seitennavigationen im Cache zu speichern und bereitzustellen.

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

const pageStrategy = new CacheFirst({
  // Put all cached files in a cache named 'pages'
  cacheName: 'pages',
  plugins: [
    // Only requests that return with a 200 status are cached
    new CacheableResponsePlugin({
      statuses: [200],
    }),
  ],
});

Mit dem Plug-in können Sie den Lebenszyklus von Workbox für die Zwischenspeicherung nutzen und die Auflösung anfordern. Hier wird die CacheableResponsePlugin verwendet, um nur Anfragen im Cache zu speichern, die zu einem 200-Status führen. Dadurch wird verhindert, dass fehlerhafte Anfragen im Cache gespeichert werden.

Nachdem die Strategie erstellt wurde, ist es an der Zeit, eine Route für die Verwendung zu registrieren. Im folgenden Beispiel wird registerRoute() aufgerufen und ein Anfrageobjekt wird an sein Callback übergeben. Wenn request.mode auf "navigate" gesetzt ist, wird die Strategie CacheFirst (hier pageStrategy genannt) verwendet, die im vorherigen Codebeispiel definiert wurde.

// Cache page navigations (HTML) with a Cache First strategy
registerRoute( ({ request }) => request.mode === 'navigate',
  pageStrategy );

Weitere Beispiele und Best Practices finden Sie in der Workbox-Dokumentation.

Offline-Fallback

Das Modul workbox-routing enthält auch eine exportierte setCatchHandler(), die die Verarbeitung im Falle eines Fehlers durch eine Route ermöglicht. So können Sie ein Offline-Fallback einrichten, mit dem Nutzer darüber informiert werden, dass die von ihnen angeforderte Route derzeit nicht verfügbar ist.

Hier bietet eine Kombination aus Workbox und der Cache Storage API ein Offline-Fallback, das eine reine Cache-Strategie verwendet. Zuerst wird während des Installationslebenszyklus des Service Workers der Cache offline-fallbacks geöffnet und dem Cache das Array der Offline-Fallbacks hinzugefügt.

import { setCatchHandler } from 'workbox-routing';

// Warm the cache when the service worker installs
self.addEventListener('install', event => {
  const files = ['/offline.html']; // you can add more resources here
  event.waitUntil(
    self.caches.open('offline-fallbacks')
        .then(cache => cache.addAll(files))
  );
});

Dann wird in setCatchHandler() das Ziel der Anfrage bestimmt, die einen Fehler ausgelöst hat, und der offline-fallbacks-Cache wird geöffnet. Wenn das Ziel ein Dokument ist, wird der Inhalt des Offline-Fallbacks an den Nutzer zurückgegeben. Wenn dieses Element nicht vorhanden ist oder das Ziel kein Dokument ist (z. B. ein Bild oder Stylesheet), wird eine Fehlerantwort zurückgegeben. Sie können dieses Muster nicht nur auf Dokumente, sondern auf Bilder, Videos, Schriftarten und so ziemlich alles erweitern, was Sie als Offline-Fallback bereitstellen möchten.

// Respond with the fallback if a route throws an error
setCatchHandler(async (options) => {
  const destination = options.request.destination;
  const cache = await self.caches.open('offline-fallbacks');
  if (destination === 'document') {
    return (await cache.match('/offline.html')) || Response.error();
  }
  return Response.error();
});

Rezepte

Mehrere Routing- und Caching-Muster wie NetworkFirst-Navigationen und Offline-Fallbacks sind so allgemein, dass sie in wiederverwendbare Schemas gekapselt werden können. Überprüfen Sie die Arbeitsbox-Rezepte, die Ihnen helfen können, ob sie eine für Ihre Architektur geeignete Lösung bieten. Sie sind normalerweise in Form einer einzelnen Codezeile verfügbar, die Sie dem Code Ihres Service Workers hinzufügen müssen.

Assets im Cache speichern und aktualisieren

Beim Caching von Assets müssen sie ebenfalls aktualisiert werden. Mit Workbox können Sie Ihre Assets auf die für Sie optimale Weise aktualisieren. Sie werden möglicherweise aktualisiert, wenn sie auf dem Server geändert werden, oder warten, bis Sie eine neue Version Ihrer App haben. Weitere Informationen zu Updates finden Sie im Kapitel zu Updates.

Mit der Workbox spielen

Mit dem folgenden Code-Lab können Sie sofort mit Workbox loslegen:

Ressourcen