Die Möglichkeiten von Workbox

Die Workbox ist flexibel genug, um den Build-Prozess jedes Projekts aufzunehmen. Es gibt also mehrere Möglichkeiten, Workbox zu verwenden und die passende Integration für Ihr Projekt auszuwählen. Unabhängig davon, wie Sie Workbox integrieren, bieten die verschiedenen Tools eine ähnliche API.

generateSW im Vergleich zu injectManifest

Sie verwenden eine der zwei grundlegenden Methoden der Build-Tools von Workbox: generateSW oder injectManifest. Welche davon Sie verwenden sollten, hängt davon ab, wie viel Flexibilität Sie benötigen. generateSW legt Wert auf Nutzerfreundlichkeit und Einfachheit, allerdings auf Kosten der Flexibilität. Daher können Sie eine Reihe von Konfigurationsoptionen angeben und erhalten im Gegenzug einen voll funktionsfähigen Service Worker.

injectManifest bietet auf Kosten einiger Einfachheit mehr Flexibilität, da Sie den Code letztendlich für Ihren Service Worker selbst schreiben müssen. Dabei stellt injectManifest ein Precache-Manifest bereit, das von Workbox-Precaching-Methoden 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, einschließlich Dateien, deren URLs Hashes enthalten, die Sie möglicherweise nicht vorab kennen.
  • Sie haben einfache Anforderungen für das Laufzeit-Caching, die über die Optionen von generateSW konfiguriert werden können.

Wann sollte generateSW nicht verwendet werden?

Andererseits sollten Sie generateSW in folgenden Fällen nicht verwenden:

  • Sie möchten andere Service Worker-Funktionen wie Web Push verwenden.
  • Sie benötigen mehr 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).

Der Unterschied zwischen injectManifest und generateSW besteht darin, dass Sie eine Quell-Service-Worker-Datei angeben müssen. In diesem Workflow muss die Quelldienst-Worker-Datei einen speziellen String self.__WB_MANIFEST enthalten, damit injectManifest sie durch das Precache-Manifest ersetzen kann.

Wann sollte injectManifest nicht verwendet werden?

Sie sollten injectManifest nicht verwenden, wenn:

  • Sie sollten Precaching in Ihrem Service Worker nicht verwenden.
  • Unsere Service Worker-Anforderungen sind so einfach, dass sie von generateSW und den zugehörigen Konfigurationsoptionen abgedeckt werden.
  • Nutzerfreundlichkeit hat Vorrang vor Flexibilität.

Build-Tools von Workbox verwenden

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

  1. workbox-cli
  2. workbox-build.
  3. Mit einem Bundler (z. B. workbox-webpack-plugin)

Jedes dieser Build-Tools bietet die Modi generateSW und injectManifest mit ähnlichen Optionen. All das sind gute Optionen, wenn Sie Ihren auf Workbox basierenden Service Worker nicht mit einem bestimmten Framework verknüpfen möchten. Um zu entscheiden, welche dieser Optionen am besten geeignet ist, sehen wir uns diese im Einzelnen an.

workbox-cli

Wenn Sie auf der Suche nach einer möglichst geringen Einstiegsbarriere für die Workbox sind, ist die Befehlszeile die 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. Im Assistenten werden Ihnen einige Fragen gestellt. Die Antworten auf diese Fragen werden verwendet, um ein Projekt mit einer workbox-config.js-Datei einzurichten, die Sie an Ihre Anforderungen anpassen können. Er sieht ungefähr 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 entweder die Methode generateSW oder injectManifest für Sie ausführen. Der Hilfetext der Befehlszeile enthält weitere Informationen und Beispiele zur Verwendung.

workbox-build

workbox-cli ist ein Wrapper um das workbox-build-Modul. Alternativ kannst du workbox-build direkt verwenden. Wenn Sie workbox-build verwenden, anstatt Optionen über eine workbox-config.js-Datei anzugeben, verwenden Sie die Methoden generateSW oder injectManifest direkt als Teil eines Node-Skripts. Dabei übergeben Sie ähnliche 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 ihre eigenen Workbox-Plug-ins. Der einzige Bundler, der offiziell vom Workbox-Team unterstützt wird, ist jedoch 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 entspricht die Nutzung in etwa 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 Sie an GenerateSW oder InjectManifest übergeben, unterscheiden sich von generateSW oder injectManifest, es gibt aber erhebliche Überschneidungen. Insbesondere musst du keine globDirectory-Option für GenerateSW festlegen und kannst das auch nicht tun, da Webpack bereits weiß, wo deine Produktions-Assets gebündelt sind.

Framework verwenden

Alles, was in diesem Punkt behandelt wird, konzentriert sich auf die Verwendung von Workbox, unabhängig von den Framework-Präferenzen. Sie können Workbox jedoch auch in einem bestimmten Framework verwenden, wenn dies die Entwicklung erleichtert. Beispielsweise wird create-react-app standardmäßig mit der Workbox ausgeliefert. Verschiedene Framework-Integrationen mit Workbox werden später in einem späteren Artikel beschrieben.

Es ist zu erwähnen, dass diese Framework-spezifischen Integrationen von Workbox Ihre Möglichkeiten einschränken können, 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 einen Build-Prozess hat, Ihr Projekt aber möglicherweise nicht erstellt wurde. Wenn dies auf Ihre Situation zutrifft, können Sie Workbox weiterhin mit dem workbox-sw-Modul verwenden. Mit workbox-sw können Sie die Workbox-Laufzeit aus einem CDN oder lokal laden und einen eigenen Service Worker erstellen.

Fazit

Die Flexibilität von Workbox sorgt dafür, dass Sie es in nahezu jedem Projekt verwenden können, unabhängig von den Framework- oder Toolchain-Einstellungen. All diese Möglichkeiten bieten Ihnen die Möglichkeit, das Precaching und das Laufzeit-Caching mithilfe verschiedener Methoden zu realisieren und gleichzeitig mehr Flexibilität zu bieten, um Service Worker mit erweiterten Funktionen bei Bedarf zu erstellen.