Verbesserung der Service Worker-Entwicklung

Der Lebenszyklus des Service Workers sorgt für einen vorhersehbaren Installations- und Aktualisierungsprozess, kann der lokale Entwicklungszyklus etwas differenzierter werden.

Im typischen lokalen Entwicklungszyklus speichern Entwickler Änderungen an Dateien in einem Texteditor, Wechseln Sie dann zum Browser, um die Änderungen zu überprüfen. Der Vorgang wird wiederholt. Wenn ein Service Worker dabei ist, ist dieser Zyklus weitgehend gleich, Es kann jedoch Unterschiede zwischen den Erwartungen des Entwicklers und der Funktionsweise des Browsers geben.

Ausnahmen für lokale Entwicklung

Im Allgemeinen sind Service Worker APIs nur auf Seiten verfügbar, die über HTTPS, Es gibt jedoch Ausnahmen von dieser Regel, bei denen sie möglicherweise über HTTP verfügbar sind. Eine Ausnahme stellen Seiten dar, die über localhost bereitgestellt werden, was sich gut für die lokale Entwicklung eignet.

Es ist jedoch nicht ungewöhnlich, dass Entwickler lokale Hostnamen mit Ausnahme von localhost in einem hosts-Datei. Dies ist in lokalen Entwicklungsumgebungen erforderlich, wenn für mehrere Projekte separate Hostnamen erforderlich sind. In diesen Fällen reicht es aus, ein selbst signiertes Zertifikat bereitzustellen.

Eine praktischere Problemumgehung besteht darin, den Browser anzuweisen, Ausnahmen für Service Worker-Tests festzulegen. Rufen Sie in Chrome chrome://flags/#unsafely-treat-insecure-origin-as-secure auf. und unsichere Ursprünge angeben, die als sichere Ursprünge behandelt werden. In Firefox können Service Worker über unsichere Ursprünge über die Einstellung devtools.serviceWorkers.testing.enabled in about:config getestet werden.

Service Worker-Entwicklungshilfen

Eine lokale Entwicklung mit einem Service Worker kann zu scheinbar unerwarteten Verhaltensweisen führen. Nehmen wir zum Beispiel an, für nicht versionierte statische Assets oder eine vorab im Cache gespeicherte „Sie sind offline“-Strategie gibt es eine reine Cache-Strategie. Seite, die beim Aktualisieren nach Änderungen aktualisiert wird. Da eine veraltete Version dieser Assets immer von einer Cache-Instanz bereitgestellt wird, sie scheinen nie aktualisiert zu werden! Das ist frustrierend, denn der Service Worker tut nur das, wofür er entwickelt wurde. aber es gibt einige Möglichkeiten, das Testen zu vereinfachen.

Die bei Weitem effektivste Methode zum Testen eines Service Workers sind private Browserfenster wie Inkognitofenster in Chrome, oder die Funktion "Privates Surfen" in Firefox. Jedes Mal, wenn Sie ein Fenster zum privaten Surfen öffnen, beginnen Sie von vorn. Es gibt keine aktiven Service Worker und keine offenen Cache-Instanzen. Die Routine für diese Art von Tests ist:

1. Öffnen Sie ein privates Browserfenster.
2. Rufen Sie eine Seite auf, auf der ein Service Worker registriert wird.
3. Prüfen Sie, ob sich der Service Worker wie erwartet verhält.
4. Schließen Sie das Inkognitofenster.
5. Wiederholen.

Mit diesem Prozess ahmen Sie den Service Worker-Lebenszyklus authentisch nach.

Weitere Testtools, die im Anwendungsbereich der Chrome-Entwicklertools verfügbar sind können Abhilfe schaffen, können aber den Lebenszyklus des Service Workers irgendwie ändern.

Das Anwendungsfeld hat ein untergeordnetes Steuerfeld mit der Bezeichnung Service Workers. der aktiven Service Worker für die aktuelle Seite anzeigt. Jeder aktive Service Worker kann manuell aktualisiert oder sogar ganz abgemeldet werden. Oben gibt es drei Ein-/Aus-Schaltflächen, die bei der Entwicklung helfen.

1. Bei der Option Offline werden Offlinebedingungen simuliert. Dies ist hilfreich, wenn Sie testen möchten, ob ein aktiver Service Worker Offlineinhalte bereitstellt.
2. Beim Aktualisieren aktualisieren: Wenn diese Option aktiviert ist, wird der aktuelle Service Worker bei jedem erneuten Laden der Seite noch einmal abgerufen und ersetzt.
3. Wenn die Option Umgehen für Netzwerk aktiviert ist, wird jeder Code im fetch-Ereignis eines Service Workers umgangen und es werden immer Inhalte aus dem Netzwerk abgerufen.

Dies sind hilfreiche Ein-/Aus-Schaltflächen, insbesondere Für Netzwerk umgehen, Das ist praktisch, wenn Sie ein Projekt mit einem aktiven Service Worker entwickeln, sondern auch ohne Service Worker erwartungsgemäß funktioniert.

Für Firefox gibt es in den Entwicklertools ein ähnliches Anwendungsfeld, aber die Funktionalität beschränkt sich darauf, welche Dienst-Worker installiert sind. sowie die Möglichkeit, alle aktiven Service Worker für die aktuelle Seite manuell abzumelden. Es ist genauso hilfreich, erfordert jedoch im lokalen Entwicklungszyklus mehr manuellen Aufwand.

Umschalttaste und Aktualisierung

Wenn Sie lokal mit einem aktiven Service Worker entwickeln, ohne dass Funktionen wie Bei Aktualisierung aktualisieren oder Umgehen für das Netzwerk erforderlich sind, ist es auch hilfreich, die Umschalttaste gedrückt zu halten und die Schaltfläche zum Aktualisieren zu drücken.

Dies wird als erzwungene Aktualisierung bezeichnet, bei der der HTTP-Cache für das Netzwerk umgangen wird. Wenn ein Service Worker aktiv ist, umgeht eine erzwungene Aktualisierung auch den Service Worker vollständig.

Diese Funktion ist sehr nützlich, wenn die Unsicherheit darüber besteht, ob eine bestimmte Caching-Strategie und es ist hilfreich, alles aus dem Netzwerk abzurufen, um das Verhalten mit und ohne Service Worker zu vergleichen. Noch besser ist es aber, dass es sich um ein festgelegtes Verhalten handelt, das von allen Browsern, die Service Worker unterstützen, beobachtet wird.

Cache-Inhalte prüfen

Wenn der Cache nicht überprüft werden kann, lässt sich nur schwer beurteilen, ob eine Caching-Strategie wie vorgesehen funktioniert. Natürlich, der Cache könnte im Code untersucht werden. Dieser Prozess umfasst jedoch Debugger und/oder console-Anweisungen, wenn ein visuelles Tool für diese Aufgabe besser geeignet wäre. Der Anwendungsbereich in den Chrome-Entwicklertools bietet ein untergeordnetes Steuerfeld zum Prüfen des Inhalts von Cache-Instanzen.

Dieses untergeordnete Steuerfeld erleichtert die Entwicklung von Service Workern, da es Funktionen wie die folgenden bietet:

• Sehen Sie sich die Namen der Instanzen Cache an.
• Die Möglichkeit, den Antworttext von im Cache gespeicherten Assets und die zugehörigen Antwortheader zu prüfen.
• Entfernen Sie ein oder mehrere Elemente aus dem Cache oder löschen Sie ganze Cache-Instanzen.

Diese grafische Benutzeroberfläche erleichtert es, Service Worker-Caches zu überprüfen, um festzustellen, ob Elemente einem Service Worker-Cache hinzugefügt, aktualisiert oder vollständig daraus entfernt wurden. Firefox bietet einen eigenen Cache-Viewer mit ähnlichen Funktionen, allerdings befindet er sich in einem separaten Speicher-Bereich.

Speicherkontingent simulieren

Auf Websites mit vielen großen statischen Assets wie hochauflösenden Bildern kann es vorkommen, dass Speicherkontingente erreicht werden. In diesem Fall entfernt der Browser Elemente aus dem Cache, die er für veraltet oder anderweitig wertvoll erachtet, um Platz für neue Assets zu schaffen.

Der Umgang mit Speicherkontingenten sollte Teil der Service Worker-Entwicklung sein. und Workbox macht diesen Prozess einfacher, als ihn selbst zu verwalten. Mit oder ohne Workbox kann es jedoch eine gute Idee sein, ein benutzerdefiniertes Speicherkontingent zu simulieren, um die Cache-Verwaltungslogik zu testen.

<ph type="x-smartling-placeholder">

</ph>

Der Anwendungsbereich in den Chrome-Entwicklertools hat ein untergeordnetes Steuerfeld Speicher, in dem angezeigt wird, wie viel des aktuellen Speicherkontingents von der Seite belegt wird. Außerdem kann ein benutzerdefiniertes Kontingent in Megabyte angegeben werden. Wenn dies der Fall ist, erzwingt Chrome das benutzerdefinierte Speicherkontingent, damit es getestet werden kann.

Übrigens enthält dieses untergeordnete Steuerfeld auch die Schaltfläche Websitedaten löschen sowie eine Reihe zugehöriger Kontrollkästchen für die Elemente, die beim Anklicken der Schaltfläche entfernt werden sollen. Zu diesen Elementen gehören alle offenen Cache-Instanzen und die Möglichkeit, alle aktiven Service Worker abzumelden, die die Seite steuern.

Einfachere Entwicklung, höhere Produktivität

Unbeteiligte Entwickler können selbstbewusster und produktiver arbeiten. Die lokale Entwicklung mit einem Service Worker kann differenziert sein, muss aber nicht mühsam sein. Mit diesen Tipps und Tricks sollte die Entwicklung mit einem aktiven Service Worker viel transparenter und vorhersehbarer sein. und verbessern so die Entwicklungserfahrung.