Fehlerbehebung und Logging

Die Fehlerbehebung bei einem Service Worker ist schwierig. Sie haben es mit dem Lebenszyklus, Aktualisierungen, Caches und der Interaktion zwischen all diesen Dingen zu tun. Glücklicherweise vereinfacht Workbox nicht nur die Service Worker-Entwicklung, sondern auch die Fehlerbehebung durch die informative Protokollierung. Auf dieser Seite werden einige der verfügbaren Debugging-Tools behandelt. Außerdem erfahren Sie, wie die Protokollierung von Workbox funktioniert und wie sie konfiguriert werden kann.

Verfügbare Tools zur Fehlerbehebung

Im Browser stehen zahlreiche Tools für Debugging und Fehlerbehebung bei der Entwicklung eines Service Workers zur Verfügung. Hier finden Sie einige Ressourcen, die Ihnen den Einstieg in den Browser Ihrer Wahl erleichtern.

Chrome und Edge

Chrome und aktuelle Versionen von Edge, die auf der Blink-Engine basieren, verfügen über eine solide Auswahl an Entwicklertools. Einige dieser Tools – insbesondere in den Entwicklertools von Chrome – wurden in dieser Dokumentation bereits erwähnt. Es gibt jedoch noch mehr zu entdecken:

Firefox

Firefox-Nutzer finden hier weitere Informationen:

Safari

Safari verfügt derzeit über eine eingeschränktere Anzahl von Entwicklertools zum Debuggen von Service Workern. In den folgenden Ressourcen können Sie mehr darüber erfahren:

Workbox-Logging

Eine wichtige Verbesserung der Arbeitsumgebung von Workbox für Entwickler ist die informative Protokollierung. Wenn das Logging aktiviert ist, protokolliert Workbox fast alle Aktivitäten auf unverwechselbare und funktionale Weise.

Screenshot der Workbox-Protokollierungsmeldungen in der Konsole der Chrome-Entwicklertools. Die Protokollierungsmeldungen unterscheiden sich von normalen Konsolenprotokollen durch ein Workbox-Logo. Jede Meldung kann maximiert werden, um weitere Debugging-Informationen zu erhalten.

Bei Workbox-Entwicklungs-Builds ist das Logging standardmäßig aktiviert, bei Produktions-Builds ist es dagegen deaktiviert. Es gibt unterschiedliche Schritte für den Wechsel zwischen Entwicklungs- und Produktions-Builds, je nachdem, ob du ein benutzerdefiniertes Workbox-Bundle erstellst oder eine vorab gebündelte Kopie über workbox-sw verwendest.

Mit oder ohne Bundler

Bundler sind Tools, die mithilfe von Code aus einzelnen Modulen eine JavaScript-Ausgabe erstellen, die dann im Browser ausgeführt werden kann. Wenn Sie einen Bundler verwenden, können Sie auch ein Bundler-spezifisches Workbox-Plug-in wie workbox-webpack-plugin verwenden, das beim Pre-Caching unterstützt wird, oder nur die Workbox-Laufzeit-Caching-Logik. In beiden Fällen wird das Logging von Workbox dadurch beeinflusst, dass in der Konfiguration des Bundler ein Produktionsmodus festgelegt wird:

  • Im Webpack kann die Konfigurationsoption mode auf 'production' oder 'development' festgelegt werden. workbox-webpack-plugin verwendet das Produktions- oder Entwicklungs-Logging in Workbox basierend auf diesem Wert.
  • Für Rollup akzeptiert rollup-plugin-workbox eine mode-Konfigurationsoption, die sich auch darauf auswirkt, ob Workbox Daten in der Konsole protokolliert. Wenn Sie Rollup ohne das Workbox-spezifische Plug-in verwenden, müssen Sie @rollup/plugin-replace so konfigurieren, dass process.env.NODE_ENV durch 'development' oder 'production' ersetzt wird.

Angenommen, das Standard-Logging-Verhalten muss in der Entwicklung überschrieben werden. In diesem Fall sollten Sie mit dem entsprechenden Workbox-Plug-in für Ihren Bundler eine Einstellung für das Debugging von Protokollen in der Konfiguration hartcodieren können. Zum Beispiel könnten Sie die Anmeldung in Workbox über die Option mode von workbox-webpack-plugin für die Methode GenerateSW deaktivieren.

Ohne Bundler

Bundler sind zwar toll, aber nicht jedes Projekt benötigt sie. Wenn Sie in einer Situation arbeiten, in der Sie einem Projekt ohne Bundler eine Workbox hinzufügen möchten, ist workbox-sw die richtige Wahl.

Das Modul workbox-sw vereinfacht das Laden anderer Workbox-Module (z.B. workbox-routing, workbox-precaching usw.) aus einem CDN abrufen. Ob die Entwicklungs- oder Produktions-Bundles geladen werden, hängt von der URL ab, über die auf Ihre Webanwendung zugegriffen wird. Standardmäßig wird mit workbox-sw die Entwicklungsversion von Workbox geladen, wenn Ihre Web-App unter http://localhost ausgeführt wird. Ansonsten wird die Produktionsversion geladen.

Sie können das Standardverhalten überschreiben, indem Sie die Methode setConfig von Workbox aufrufen und die Option debug auf true festlegen:

// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

// This must come before any other workbox.* methods.
workbox.setConfig({
  debug: true
});

// Now use workbox.routing.*, workbox.precaching.*, etc.

Logging in Entwicklungs-Builds in Workflows deaktivieren

Unabhängig davon, ob Sie einen Bundler verwenden oder nicht, können Sie das Logging in Entwicklungs-Builds deaktivieren, indem Sie Ihrem Service Worker true einer speziellen self.__WB_DISABLE_DEV_LOGS-Variable zuweisen:

//
self.__WB_DISABLE_DEV_LOGS = true;

// The rest of your Workbox service worker code goes here

Ein Vorteil dieses Ansatzes besteht darin, dass er völlig unabhängig von Ihrer Bundler-Konfiguration ist und unabhängig davon funktioniert, ob Sie workbox-sw direkt verwenden oder einen Bundler benötigen, um Ihren Workbox-basierten Service Worker für Sie zu verpacken.

Weitere Informationen

Wenn Sie immer noch Schwierigkeiten haben, herauszufinden, was in einem fehlerhaften Service Worker vor sich geht, und das Logging einfach nicht ausreicht, können Sie eine Frage auf Stack Overflow mit dem Tag workbox posten. Wenn Sie dort keine Antwort finden, melden Sie ein GitHub-Problem, nachdem Sie die Richtlinien für Beiträge gelesen haben. So kann nicht nur ein breites Publikum von Entwicklern Ihre Fragen lesen und beantworten, sondern die Antwort auf Ihre Frage kann später auch anderen helfen, die sich in derselben Situation befinden.