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:
workbox-cli
workbox-build
.- 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.