Mit Service Workern arbeiten

Jeff Posnick

In diesem Codelab erfahren Sie, wie Sie einen Service Worker in Ihrer Webanwendung registrieren und sein Verhalten mit den Chrome-Entwicklertools beobachten. Außerdem werden einige Techniken zur Fehlerbehebung beschrieben, die Ihnen beim Umgang mit Dienstarbeitern nützlich sein können.

Beispielprojekt kennenlernen

Die für dieses Codelab wichtigsten Dateien im Beispielprojekt sind:

• register-sw.js ist zu Beginn leer, enthält aber den Code, mit dem der Dienst-Worker registriert wurde. Es wird bereits über ein <script>-Tag im index.html des Projekts geladen.
• service-worker.js ist ebenfalls leer. Diese Datei enthält den Service Worker für dieses Projekt.

Registrierungscode für Service Worker hinzufügen

Ein Service Worker (auch ein leerer Dienst wie die aktuelle Datei service-worker.js) wird nur verwendet, wenn er zuerst registriert wurde. Rufen Sie dazu an:

navigator.serviceWorker.register(
  '/service-worker.js'
)

in Ihrer register-sw.js-Datei.

Bevor Sie diesen Code hinzufügen, sollten Sie jedoch einige Punkte beachten.

Erstens: Nicht alle Browser unterstützen Dienstprogramme. Das gilt insbesondere für ältere Browserversionen, die nicht automatisch aktualisiert werden. Daher hat es sich bewährt, navigator.serviceWorker.register() bedingt aufzurufen, nachdem geprüft wurde, ob navigator.serviceWorker unterstützt wird.

Wenn Sie einen Service Worker registrieren, führt der Browser den Code in Ihrer service-worker.js-Datei aus und kann je nach Code in den install- und activate-Event-Handlern Ihres Service Workers möglicherweise URLs herunterladen, um Caches zu füllen.

Das Ausführen zusätzlichen Codes und das Herunterladen von Assets kann wertvolle Ressourcen beanspruchen, die Ihr Browser sonst zum Anzeigen der aktuellen Webseite verwenden könnte. Um diese Störung zu vermeiden, empfiehlt es sich, die Registrierung eines Service Workers so lange zu verzögern, bis der Browser die aktuelle Seite gerendert hat. Eine praktische Möglichkeit, dies zu erreichen, besteht darin, zu warten, bis das Ereignis window.load ausgelöst wurde.

Fügen Sie Ihrer register-sw.js-Datei diesen Registrierungscode für Service Worker für allgemeine Zwecke hinzu:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

Code zum Logging von Service Workern hinzufügen

In der Datei service-worker.js befindet sich die gesamte Logik für Ihre Service Worker-Implementierung normalerweise. Sie verwenden eine Mischung aus Service Worker-Lebenszyklusereignissen, der Cache Storage API und Kenntnissen über den Netzwerktraffic Ihrer Webanwendung, um einen perfekt erstellten Service Worker zu erstellen, der alle Anfragen Ihrer Webanwendung verarbeiten kann.

Aber… das ist alles für später. In dieser Phase liegt der Schwerpunkt darauf, verschiedene Service Worker-Ereignisse zu beobachten und sich mit den Chrome-DevTools vertraut zu machen, um den Status Ihres Service Workers zu debuggen.

Fügen Sie dazu den folgenden Code zu service-worker.js hinzu. Dadurch werden in der DevTools-Konsole in Reaktion auf verschiedene Ereignisse Nachrichten protokolliert, aber nicht viel mehr:

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

self.addEventListener('activate', (event) => {
  console.log('Inside the activate handler:', event);
});

self.addEventListener(fetch, (event) => {
  console.log('Inside the fetch handler:', event);
});

Bereich „Dienstworker“ in den Entwicklertools kennenlernen

Nachdem Sie den Code den Dateien register-sw.js und service-worker.js hinzugefügt haben, können Sie die Liveversion Ihres Beispielprojekts aufrufen und den Service Worker in Aktion sehen.

• Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen und dann auf Vollbild .
• Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
• Klicken Sie auf den Tab Console.

Sie sollten etwa die folgenden Protokollmeldungen sehen, die anzeigen, dass der Dienst-Worker installiert und aktiviert wurde:

Rufen Sie dann den Tab Anwendungen auf und wählen Sie den Bereich Dienstworker aus. Die Ausgabe sollte etwa so aussehen:

Das bedeutet, dass es einen Service Worker mit der Quell-URL service-worker.js für die Webanwendung solar-donkey.glitch.me gibt, der derzeit aktiviert und ausgeführt wird. Außerdem sehen Sie, dass derzeit ein Client (offener Tab) vom Service Worker gesteuert wird.

Sie können die Links in diesem Bereich wie Unregister oder stop verwenden, um Änderungen am aktuell registrierten Service Worker für Fehlerbehebungszwecke vorzunehmen.

Ablauf für die Aktualisierung des Dienst-Workers auslösen

Eines der wichtigsten Konzepte bei der Entwicklung mit Service Workern ist der Aktualisierungsablauf.

Wenn Ihre Nutzer eine Webanwendung besuchen, in der ein Dienstworker registriert ist, erhalten sie den Code für die aktuelle Kopie von service-worker.js, die in ihrem lokalen Browser installiert ist. Aber was passiert, wenn Sie die Version von service-worker.js aktualisieren, die auf Ihrem Webserver gespeichert ist?

Wenn ein wiederkehrender Besucher zu einer URL zurückkehrt, die in den Zuständigkeitsbereich eines Service Workers fällt, fordert der Browser automatisch die neueste service-worker.js an und prüft, ob sich etwas geändert hat. Wenn etwas im Service Worker-Script anders ist, kann der neue Service Worker installiert, aktiviert und schließlich die Kontrolle übernehmen.

Sie können diesen Aktualisierungsablauf simulieren, indem Sie zum Code-Editor für Ihr Projekt zurückkehren und eine beliebige Änderung am Code vornehmen. Eine schnelle Änderung wäre,

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

mit

self.addEventListener('install', (event) => {
  console.log('Inside the UPDATED install handler:', event);
});

Kehren Sie nach dieser Änderung zur Liveversion Ihrer Beispielanwendung zurück und aktualisieren Sie die Seite, während der Tab „Anwendung“ in den Entwicklertools geöffnet ist. Die Ausgabe sollte in etwa so aussehen:

Das bedeutet, dass derzeit zwei Versionen Ihres Service Workers installiert sind. Die vorherige Version, die bereits aktiviert war, wird ausgeführt und steuert die aktuelle Seite. Die aktualisierte Version des Dienstarbeiters ist direkt darunter aufgeführt. Er hat den Status waiting und wartet, bis alle geöffneten Tabs, die vom alten Service Worker gesteuert werden, geschlossen wurden.

Dieses Standardverhalten sorgt dafür, dass der neue Dienst-Worker erst dann in Kraft tritt, wenn ein Nutzer alle vorherigen Instanzen Ihrer Webanwendung geschlossen hat, wenn sich sein Verhalten grundlegend von dem des alten Dienst-Workers unterscheidet, z. B. wenn ein fetch-Handler mit Ressourcen antwortet, die mit älteren Versionen Ihrer Webanwendung nicht kompatibel sind.

Zusammenfassung

Sie sollten nun mit der Registrierung eines Service Workers und der Beobachtung seines Verhaltens mithilfe der Entwicklertools von Chrome vertraut sein.

Sie sind jetzt gut gerüstet, um Caching-Strategien und alle anderen nützlichen Funktionen zu implementieren, mit denen sich Ihre Webanwendung zuverlässig und schnell laden lässt.