Die Möglichkeiten von Workbox

Die Workbox ist flexibel genug, um nahezu den Build-Prozess jedes Projekts aufzunehmen. Das bedeutet, dass es mehr als eine Möglichkeit gibt, Workbox zu verwenden, sodass Sie die richtige Integration für Ihr Projekt auswählen können. Unabhängig davon, wie Sie Workbox integrieren, bieten die verschiedenen Tools ein ähnliches API.

generateSW im Vergleich zu injectManifest

Dabei verwenden Sie eine von zwei zentralen Methoden der Build-Tools von Workbox: generateSW oder injectManifest. Welche Methode Sie verwenden sollten, hängt davon ab, wie viel Flexibilität Sie benötigen. generateSW steht für Nutzerfreundlichkeit und Einfachheit, allerdings auf Kosten der Flexibilität. Sie können also eine Reihe von Konfigurationsoptionen deklarieren und erhalten im Gegenzug einen voll funktionsfähigen Service Worker.

injectManifest bietet mehr Flexibilität, allerdings auf Kosten einer Einfachheit, da Sie den Code für Ihren Service Worker selbst schreiben. Dabei stellt injectManifest ein Precache-Manifest bereit, das von den Precaching-Methoden von Workbox verwendet werden kann.

Verwendung von generateSW

Sie sollten generateSW verwenden, wenn:

  • Sie möchten Dateien, die mit Ihrem Build-Prozess verknüpft sind, vorab im Cache speichern. Dazu gehören auch Dateien, deren URLs Hashes enthalten, die Sie möglicherweise nicht im Voraus kennen.
  • Ihre Anforderungen für das Caching von Laufzeiten sind einfach und können über die Optionen von generateSW konfiguriert werden.

Wann sollte generateSW nicht verwendet werden?

Andererseits sollten Sie generateSW nicht verwenden, wenn:

  • Sie möchten andere Service Worker-Funktionen verwenden, z. B. Web Push.
  • Sie benötigen zusätzliche Flexibilität, um zusätzliche Skripts zu importieren oder bestimmte Workbox-Module zu verwenden, um Ihren Service Worker an die Anforderungen Ihrer Anwendung anzupassen.

Verwendung von injectManifest

Sie sollten injectManifest verwenden, wenn:

  • Sie möchten Dateien vorab im Cache speichern, aber Ihren eigenen Service Worker schreiben.
  • Sie haben komplexe Caching- oder Routinganforderungen, die nicht über die Konfigurationsoptionen von generateSW ausgedrückt werden können
  • Sie möchten andere APIs in Ihrem Service Worker verwenden, z. B. Web Push.

injectManifest unterscheidet sich von generateSW insofern, als Sie eine Quell-Service-Worker-Datei angeben müssen. In diesem Workflow muss die Quelldienst-Worker-Datei einen speziellen self.__WB_MANIFEST-String enthalten, damit injectManifest sie durch das Precache-Manifest ersetzen kann.

Wann sollte injectManifest nicht verwendet werden?

Sie sollten injectManifest nicht verwenden, wenn:

  • Sie möchten in Ihrem Service Worker kein Precaching verwenden.
  • Unsere Service Worker-Anforderungen sind so einfach, dass sie von generateSW und den zugehörigen Konfigurationsoptionen abgedeckt werden.
  • Sie legen Wert auf Nutzerfreundlichkeit statt Flexibilität.

Build-Tools von Workbox verwenden

Wenn Sie nach einer Framework-unabhängigen Möglichkeit suchen, um Workbox in Ihrem Build-Prozess zu verwenden, haben Sie drei Möglichkeiten:

  1. workbox-cli
  2. workbox-build Befehlszeilentool.
  3. Sie verwenden einen Bundler (z. B. workbox-webpack-plugin).

Jedes dieser Build-Tools bietet die Modi generateSW und injectManifest mit ähnlichen Optionen. Das sind alles gute Möglichkeiten, wenn Sie Ihren Workbox-Service Worker nicht an ein bestimmtes Framework binden möchten. Um herauszufinden, welche dieser Optionen am besten geeignet ist, sehen wir uns jede dieser Optionen kurz an.

workbox-cli

Wenn Sie nach der geringstmöglichen Einstiegshürde für Workbox suchen, ist die Befehlszeile das Richtige für Sie:

npm install workbox-cli --save-dev

Führen Sie den Assistenten mit npx workbox wizard aus, um die Befehlszeile zu verwenden. Der Assistent wird Ihnen einige Fragen stellen. Die Antworten auf diese Fragen dienen dazu, ein Projekt mit einer workbox-config.js-Datei einzurichten, die Sie an Ihre Anforderungen anpassen können. Sie sieht in etwa so aus:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

Nachdem die Konfigurationsdatei erstellt wurde, kann die Befehlszeile die Methoden generateSW oder injectManifest für Sie ausführen. Der Hilfetext der Befehlszeile enthält weitere Informationen und Anwendungsbeispiele.

workbox-build

workbox-cli ist ein Wrapper um das Modul workbox-build. Alternativ können Sie workbox-build direkt verwenden. Wenn Sie workbox-build verwenden, statt Optionen über eine workbox-config.js-Datei anzugeben, verwenden Sie die Methoden generateSW oder injectManifest direkt als Teil eines Knotenskripts und übergeben einen ähnlichen Satz von Optionen:

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

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

Im obigen Beispiel schreibt workbox-build den generierten Service Worker in das Verzeichnis dist, wenn der Befehl node build-sw.mjs ausgeführt wird.

Bundler verwenden

Verschiedene Bundler haben eigene Workbox-Plug-ins. Der einzige Bundler, der offiziell vom Workbox-Team unterstützt wird, ist Webpack, über workbox-webpack-plugin. Wie workbox-cli und workbox-build führt auch workbox-webpack-plugin die Methoden generateSW oder injectManifest aus, mit der Ausnahme, dass das Plug-in diese Methodennamen als GenerateSW oder InjectManifest großschreibt. Andernfalls sieht die Verwendung in etwa so aus: workbox-build:

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

Die Optionen, die du an GenerateSW oder InjectManifest übergibst, sind nicht mit generateSW oder injectManifest identisch, es gibt jedoch erhebliche Überschneidungen. Insbesondere müssen Sie – und können Sie auch nicht – für GenerateSW keine globDirectory-Option angeben, da dem Webpack bereits bekannt ist, wo Ihre Produktions-Assets gebündelt sind.

Framework verwenden

Bei allem, was in diesem Punkt behandelt wurde, steht die Verwendung von Workbox unabhängig von den Framework-Präferenzen im Vordergrund. Es ist jedoch möglich, Workbox in einem bestimmten Framework zu verwenden, wenn dies die Entwicklung vereinfacht. create-react-app wird beispielsweise standardmäßig mit Workbox ausgeliefert. Verschiedene Framework-Integrationen mit Workbox werden später in einem anderen Artikel behandelt.

Beachten Sie, dass diese Frameworks-spezifischen Workbox-Integrationen möglicherweise Ihre Fähigkeit einschränken, Workbox nach Ihren Wünschen zu konfigurieren. In solchen Fällen können Sie jederzeit auf die hier beschriebenen Methoden zurückgreifen.

Was ist, wenn ich keinen Build-Prozess habe?

In diesem Dokument wird davon ausgegangen, dass Ihr Projekt über einen Build-Prozess verfügt. Tatsächlich ist es aber nicht der Fall. Wenn dies auf Ihre Situation zutrifft, können Sie Workbox mit dem workbox-sw-Modul verwenden. Mit workbox-sw können Sie die Workbox-Laufzeit aus einem CDN oder lokal laden und Ihren eigenen Service Worker erstellen.

Fazit

Dank der Flexibilität von Workbox können Sie den Dienst in nahezu jedem Projekt verwenden, unabhängig von den Framework- oder Toolchain-Einstellungen. Auf all diesen Wegen können Sie Pre- und Laufzeit-Caching mit verschiedenen Methoden durchführen, während Sie gleichzeitig mehr Flexibilität bei der Erstellung von Service Workern mit erweiterten Funktionen bei Bedarf haben.