Workbox

Die Verwaltung Ihres Service Workers und der Cache-Speicherlogik kann eine Herausforderung sein, wenn Ihre PWA wächst. Workbox besteht aus einer 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 Oberflächen.

Einige Aufgaben, die sie unterstützen können, sind der Abgleich von Caching-Strategien mit Pfaden (oder Routingmustern), die Arbeit mit Streams und die Verwendung von Funktionen wie der Hintergrundsynchronisierung mit den richtigen Fallbacks.

Workbox unterstützt Sie beim Verwalten Ihrer Anforderungen an das Caching und die Bereitstellung von Assets. Sie ist auch die am häufigsten verwendete Bibliothek für Service Worker. wird von 54% der mobilen Websites verwendet und in vielen Build-Tools und CLIs verwendet, einschließlich der Angular CLI, Create-React-App und Vue CLI. Auch für die meisten anderen Bibliotheken und Frameworks, z. B. Next.js, gibt es Plug-ins.

54%

Mobile Websites mit Service Workern nutzen die Workbox-Bibliothek

Workbox-Module

Workbox umfasst mehrere Bibliotheken – intern als Module bezeichnet –, die sich jeweils auf einen anderen Aspekt der Verwaltung Ihrer Assets und des Service Worker-Verhaltens konzentrieren.

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

  • Innerhalb eines Service Worker-Kontexts: 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 window-Hauptkontext: Unterstützung beim Registrieren eines Service Workers und Kommunikation mit ihm
  • Als Teil eines Build-Systems, z. B. Webpack, um ein Manifest Ihrer Assets oder sogar Ihren gesamten Service Worker zu generieren

Einige 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 um eine Implementierung des fetch-Event-Handlers, wie im Kapitel zur Auslieferung erwähnt.
  • workbox-strategies: Eine Reihe von Laufzeit-Caching-Strategien, die die Reaktion auf eine Anfrage verarbeiten, z. B. „zuerst im Cache speichern“ und „Bei Neuvalidierung veraltet“; Es handelt sich um eine Implementierung der verschiedenen Strategien, die im Kapitel zur Anzeigenbereitstellung erwähnt werden.
  • Workbox-Precaching: Es handelt sich um eine Implementierung des Cachings von Dateien im install-Event-Handler des Service Workers (auch Precaching genannt), wie im Kapitel zum Caching erwähnt. Mit diesem Modul können Sie eine Reihe von Dateien einfach vorab im Cache speichern und Aktualisierungen dieser Assets effizient verwalten. Wie das geht, erfährst du im Kapitel „Update“.
  • workbox-expiration: Dieses Plug-in wird zusammen mit den Caching-Strategien verwendet, um im Cache gespeicherte Anfragen auf Grundlage der Anzahl der Elemente im Cache oder des Alters der im Cache gespeicherten Anfrage zu entfernen. Er unterstützt Sie bei der Verwaltung Ihrer Caches und legt Limits für Zeit und die Anzahl der Elemente in jedem Cache fest.
  • workbox-window: Eine Reihe von Modulen, die im Fensterkontext ausgeführt werden, also innerhalb Ihrer PWA-Webseiten. Sie können die Registrierung und Aktualisierung von Service Workern vereinfachen und die Kommunikation zwischen Code, der im Service Worker-Kontext ausgeführt wird, und dem Fensterkontext vereinfachen.

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 erforderliche 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 soll in Ihren eigenen Build-Prozess eingebunden werden.
  • workbox-sw: Eine Möglichkeit, Workbox-Service-Worker-Pakete von einem CDN zu laden, das keinen Build-Prozess verwendet.

Die Workbox CLI bietet einen Assistenten, der Sie Schritt für Schritt durch das Erstellen Ihres Service Workers führt. Geben Sie in der Befehlszeile Folgendes ein, um den Assistenten auszuführen:

npx workbox-cli wizard

Workbox-CLI in Aktion in einem Terminal

Caching und Bereitstellung mit Workbox

Workbox wird häufig dazu genutzt, die Routing- und Strategiemodule zusammen zum Zwischenspeichern und Bereitstellen von Dateien zu verwenden.

Das Modul workbox-strategies stellt sofort die Caching-Strategien bereit, die in den Kapiteln Assets und Daten und Bereitstellung erläutert werden.

Mit dem Modul workbox-routing können Sie eingehende Anfragen an Ihren Service Worker sortieren und mit den Caching-Strategien oder -Funktionen abgleichen, um Antworten auf diese Anfragen zu erhalten.

Nach dem Abgleich von Routen mit Strategien bietet Workbox die Möglichkeit, mit dem Plug-in workbox-cacheable-response zu filtern, welche Antworten dem 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 eine Strategie des Typs „Cache zuerst“ (ü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 der Caching- und Anfragelösung von Workbox nutzen. Hier wird CacheableResponsePlugin nur verwendet, um Anfragen im Cache zu speichern, die den Status 200 zur Folge haben. Dadurch wird verhindert, dass fehlerhafte Anfragen im Cache gespeichert werden.

Nachdem wir die Strategie entwickelt haben, ist es an der Zeit, eine Route zu registrieren. Im folgenden Beispiel wird registerRoute() aufgerufen und ein Anfrageobjekt an seinen Callback übergeben. Wenn request.mode den Wert "navigate" hat, wird die CacheFirst-Strategie (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 verfügt auch über ein exportiertes setCatchHandler(), das eine Fehlerbehebung für den Fall ermöglicht, dass eine Route einen Fehler auslöst. Damit können Sie ein Offline-Fallback einrichten, um Nutzer darüber zu informieren, 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 mit einer Nur-Cache-Strategie. Zuerst wird während des Installationszyklus des Service Workers der Cache offline-fallbacks geöffnet und das Array der Offline-Fallbacks dem Cache 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 ermittelt, die einen Fehler ausgegeben 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. Falls nicht vorhanden oder das Ziel kein Dokument ist (z. B. ein Bild oder Stylesheet), wird eine Fehlerantwort zurückgegeben. Sie können dieses Muster nicht nur für Dokumente erweitern, sondern auch für Bilder, Videos, Schriftarten und alles, 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 weit verbreitet, dass sie in wiederverwendbare Schemas gekapselt werden. Prüfen Sie workbox-recipes. Diese können Ihnen helfen, wenn sie eine für Ihre Architektur geeignete Lösung bieten. Sie sind normalerweise als eine einzige Codezeile verfügbar, die Sie dem Code Ihres Service Workers hinzufügen müssen.

Assets im Cache speichern und aktualisieren

Das Caching von Assets beinhaltet auch die Aktualisierung. Workbox unterstützt Sie dabei, Ihre Assets auf die von Ihnen gewünschte Weise zu aktualisieren. Möglicherweise werden sie aktualisiert, wenn sie auf dem Server geändert werden, oder warten, bis Sie eine neue Version Ihrer App haben. Weitere Informationen dazu finden Sie im Kapitel zu Updates.

Mit Workbox spielen

Mit dem folgenden Code-Lab können Sie direkt mit Workbox experimentieren:

Ressourcen