Precaching mit Workbox

Das Precaching ist eine der häufigsten Aufgaben in einem Service Worker. Workbox bietet Ihnen Flexibilität bei der Durchführung dieser wichtigen Aufgabe, unabhängig davon, für welches Build-Tool von Workbox Sie sich entscheiden. In diesem Leitfaden erfährst du, wie du Assets mit generateSW und injectManifest vorab im Cache speichern kannst. Außerdem erfährst du, welche dieser Methoden für dein Projekt am besten geeignet ist.

Precaching mit generateSW

generateSW ist die einfachste Möglichkeit, Assets in Workbox vorab im Cache zu speichern. Das Wichtigste an generateSW ist, dass Sie keinen eigenen Service Worker schreiben, sondern Workbox bitten, einen für Sie zu generieren. Sie können das Verhalten jedoch durch verschiedene Konfigurationsoptionen beeinflussen.

generateSW führt standardmäßig unterschiedliche Aktionen aus, je nachdem, welches Build-Tool Sie verwenden. Wenn Sie workbox-webpack-plugin verwenden, müssen Sie keine Konfigurationsoptionen angeben. Standardmäßig speichert das Plug-in alle Inhalte des Webpacks im Abhängigkeitsdiagramm vorab im Cache und schreibt einen Service Worker namens service-worker.js in das von output.path angegebene Verzeichnis

Wenn du dagegen workbox-build oder workbox-cli verwendest, werden standardmäßig nur aus dem lokalen Dateisystem gelesene HTML-, CSS- und JavaScript-Assets vorab im Cache gespeichert. In Bezug auf die Konfiguration müssen Sie swDest und die Option globDirectory in der generateSW-Konfiguration angeben, damit das Precaching funktioniert. Es ist sehr wahrscheinlich, dass Sie zusätzliche Optionen konfigurieren möchten, die sich auf das Verhalten Ihres Service Workers auswirken. Sehen Sie sich daher die Dokumentation an.

Precaching mit injectManifest

Die Verwendung von injectManifest ist nicht so einfach wie die Verwendung von generateSW, aber Sie tauschen Nutzerfreundlichkeit gegen mehr Flexibilität ein. Dabei übernimmt generateSW die gesamte Service Worker-Generierung für Sie. injectManifest verwendet einen von Ihnen geschriebenen Service Worker als Quelle und fügt eine Liste mit URLs in den Precache ein. Der Rest Ihres Service Workers bleibt unverändert.

Wenn Sie injectManifest verwenden, sind Sie für die Verkabelung der Precaching-Logik verantwortlich. Bei der Prüfung Ihres Input Service Workers sucht injectManifest nach einer speziellen self.__WB_MANIFEST-Variable und ersetzt sie durch das Precache-Manifest. Wenn diese Variable nicht vorhanden ist, gibt injectManifest einen Fehler aus.

Die Liste der Einträge im Precache-Manifest kann mit zusätzlichen Konfigurationsoptionen optimiert werden.

Vergleich

Klicken Sie auf die folgenden Tabs, um die Verwendung der Methoden generateSW und injectManifest zu vergleichen:

Da generateSW einen Service Worker generiert, müssen Sie nur eine Konfiguration angeben. Hier ist ein Beispiel mit workbox-build:

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

Der Service Worker kann dann in der Befehlszeile mit Node erstellt werden:

node build-sw.js

Da injectManifest einen Quell-Service-Worker erfordert, ist für ein minimal realisierbares Beispiel eine Quell-Service-Worker-Datei erforderlich. Wenn lediglich das Precaching benötigt wird, könnte der Input Service Worker etwa so aussehen:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Notieren Sie sich den String self.__WB_MANIFEST. Dies ist ein Platzhalter, den Workbox durch das Precache-Manifest ersetzt. Im Folgenden finden Sie eine gültige Konfiguration für diesen Anwendungsfall:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

injectManifest ist zu bevorzugen, wenn Sie komplexe Anforderungen wie erweitertes Routing, benutzerdefinierte Caching-Strategien oder andere Aspekte haben, die von den Optionen von generateSW nicht abgedeckt werden.

Fazit

Das Precaching in Workbox ist viel einfacher, als wenn Sie es selbst verwalten müssten. Dies gilt insbesondere für versionierte Assets, die von Bundlern kompiliert wurden. Allerdings ist das Precaching nicht das Einzige, was Sie in einem Service Worker tun werden. Im weiteren Verlauf lernen Sie andere Techniken wie das Laufzeit-Caching kennen.