Die Workbox-Befehlszeile (im Paket workbox-cli enthalten) besteht aus einem Node.js-Programm namens Workbox, das über eine Windows, macOS-, UNIX-kompatible Befehlszeilenumgebung ausgeführt werden kann. Im Prinzip umschließt „workbox-cli“ das Workbox-Build-Modul und bietet eine einfache Möglichkeit, Workbox mit flexiblen Konfigurationen in einen Befehlszeilen-Build-Prozess zu integrieren.
Installieren Sie die Befehlszeile
Führen Sie den folgenden Befehl in Ihrem Terminal aus, um die Befehlszeile mit Node zu installieren:
npm install workbox-cli --global
Befehlszeilenmodi
Die Befehlszeile hat vier verschiedene Modi:
wizard: Eine detaillierte Anleitung zur Einrichtung von Workbox für Ihr Projekt.generateSW: Generiert einen vollständigen Service Worker für Sie.injectManifest: Die Assets werden eingeschleust, die vorab im Cache gespeichert werden sollen.copyLibraries: Kopieren Sie die Workbox-Bibliotheken in ein Verzeichnis.
wizard
Der Workbox-Assistent stellt Ihnen eine Reihe von Fragen zu Ihrer Einrichtung des lokalen Verzeichnisses und zu den Dateien, die vorab im Cache gespeichert werden sollen. Anhand Ihrer Antworten wird eine Konfigurationsdatei generiert, die dann beim Ausführen im generateSW-Modus verwendet werden kann.
Die meisten Entwickler müssen den Workbox-Assistenten nur einmal ausführen. Sie können die ursprüngliche Konfigurationsdatei, die generiert wird, manuell anpassen. Verwenden Sie dazu eine der unterstützten Build-Konfigurationsoptionen.
Führen Sie folgenden Befehl aus, um den Assistenten zu starten:
npx workbox-cli wizard
generateSW
Sie können die Workbox CLI verwenden, um einen vollständigen Service Worker mithilfe einer Konfigurationsdatei (z. B. der vom Assistenten generierten Datei) zu generieren.
Führen Sie einfach den folgenden Befehl aus:
npx workbox-cli generateSW path/to/config.js
Entwicklern, die mit den integrierten Precaching- und Laufzeit-Caching-Funktionen von Workbox zufrieden sind und das Verhalten ihres Service Workers nicht anpassen müssen, wird der generateSW-Modus empfohlen.
Verwendung von generateSW
- Sie möchten Dateien vorab im Cache speichern.
- Sie haben einfache Anforderungen an das Laufzeit-Caching.
Wann sollte generateSW NICHT verwendet werden?
- Sie möchten andere Service Worker-Funktionen verwenden (z.B. Web Push).
- Sie möchten zusätzliche Skripts importieren oder zusätzliche Logik für benutzerdefinierte Caching-Strategien hinzufügen.
injectManifest
Für Entwickler, die mehr Kontrolle über ihre endgültige Service Worker-Datei haben möchten, können Sie den injectManifest-Modus verwenden. Bei diesem Modus wird davon ausgegangen, dass Sie bereits eine Service Worker-Datei haben, deren Speicherort in config.js angegeben ist.
Wenn workbox injectManifest ausgeführt wird, wird in der Quelldienst-Worker-Datei nach einem bestimmten String (standardmäßig precacheAndRoute(self.__WB_MANIFEST)) gesucht. Es ersetzt das leere Array durch eine Liste von URLs, die vorab im Cache gespeichert werden sollen, und schreibt die Service Worker-Datei anhand der Konfigurationsoptionen in config.js an ihren Zielspeicherort.
Der restliche Code im Quelldienst-Worker bleibt unverändert.
Sie können die Workbox in diesem Modus so verwenden:
npx workbox-cli injectManifest path/to/config.js
Verwendung von injectManifest
- Sie möchten mehr Kontrolle über Ihren Service Worker.
- Sie möchten Dateien vorab im Cache speichern.
- Du musst das Routing und die Strategien anpassen.
- Sie möchten Ihren Service Worker mit anderen Plattformfunktionen verwenden, z.B. Web Push.
Wann sollte injectManifest NICHT verwendet werden?
- Sie möchten Ihrer Website am einfachsten einen Service Worker hinzufügen.
copyLibraries
Dieser Modus ist hilfreich, wenn Sie injectManifest und die Workbox-Bibliotheksdateien nutzen möchten, die in Ihrem eigenen Ursprung gehostet werden, anstatt das CDN zu verwenden.
Sie müssen es nur mit einem Pfad ausführen, in den die Dateien geschrieben werden sollen:
npx workbox-cli copyLibraries third_party/workbox/
Build-Prozessintegration
Warum muss die Workbox in meinen Build-Prozess integriert werden?
Das Workbox-Projekt enthält eine Reihe von Bibliotheken, die zusammen den Service Worker Ihrer Webanwendung unterstützen. Damit Sie diese Bibliotheken effektiv nutzen können, muss Workbox in den Build-Prozess Ihrer Webanwendung eingebunden werden. Dadurch wird sichergestellt, dass Ihr Service Worker alle kritischen Inhalte Ihrer Web-App effizient vorab im Cache speichern und diese Inhalte auf dem neuesten Stand halten kann.
Ist workbox-cli die richtige Wahl für meinen Build-Prozess?
Wenn Sie bereits einen Build-Prozess haben, der vollständig auf npm-Skripts basiert, ist workbox-cli eine gute Wahl.
Wenn Sie derzeit webpack als Build-Tool verwenden, ist die Verwendung des workbox-webback-plugin die bessere Wahl.
Wenn Sie derzeit Gulp, Grunt oder ein anderes Node.js-basiertes Build-Tool verwenden, ist es besser, workbox-build in Ihr Build-Skript zu integrieren.
Wenn Sie noch keinen Build-Prozess haben, sollten Sie sich einen ausdenken, bevor Sie mit Workbox Assets vorab im Cache speichern. Der Versuch, „workbox-cli“ manuell auszuführen, kann fehleranfällig sein. Und wenn Sie es vergessen, kann es passieren, dass wiederkehrenden Besuchern veraltete Inhalte angezeigt werden.
Setup und Konfiguration
Nachdem Sie workbox-cli als Entwicklungsabhängigkeit für Ihr lokales Projekt installiert haben, können Sie den Aufruf workbox am Ende des npm-Skripts Ihres vorhandenen Build-Prozesses hinzufügen:
Aus „package.json“:
{
"scripts": {
"build": "my-build-script && workbox <mode> <path/to/config.js>"
}
}
Ersetzen Sie <mode> durch generateSW oder injectManifest (je nach Anwendungsfall) und <path/to/config.js> durch den Pfad zu Ihren Konfigurationsoptionen. Ihre Konfiguration wurde möglicherweise automatisch von workbox wizard erstellt oder manuell optimiert.
Konfiguration
Von generateSW verwendete Optionen
Eine vollständige Reihe an Konfigurationsoptionen finden Sie in der Referenzdokumentation.
Von injectManifest verwendete Optionen
Eine vollständige Reihe an Konfigurationsoptionen finden Sie in der Referenzdokumentation.