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, wie die aktuelle service-worker.js-Datei) wird nur verwendet, wenn er zuerst registriert wurde. Sie können dies über einen Aufruf von

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 ist es eine Best Practice, navigator.serviceWorker.register() bedingt aufzurufen, nachdem geprüft wurde, ob navigator.serviceWorker unterstützt wird.

Zweitens: Wenn Sie einen Dienst-Worker registrieren, führt der Browser den Code in Ihrer service-worker.js-Datei aus und beginnt möglicherweise mit dem Herunterladen von URLs, um die Caches zu füllen. Das hängt vom Code in den Ereignishandlern install und activate des Dienst-Workers ab.

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örungen zu vermeiden, sollten Sie die Registrierung eines Service Workers verzögern, bis der Browser das Rendern der aktuellen Seite abgeschlossen 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 normalerweise die gesamte Logik für die Implementierung des Service Workers. Sie verwenden eine Mischung aus den Lebenszyklusereignissen des Service Workers, der Cache Storage API und Informationen zum Netzwerkverkehr Ihrer Webanwendung, um einen perfekten 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, drücken Sie App ansehen und dann Vollbild 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:

Der Dienst-Worker ist installiert und aktiviert.

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

Zeigt Service Worker-Details im Service Worker-Steuerfeld an.

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.

Über die Links in diesem Bereich, z. B. Unregister oder stop, können Sie zur Fehlerbehebung Änderungen am aktuell registrierten Dienstarbeiter vornehmen.

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

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

Wenn 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. Was passiert aber, 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 der Ä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:

Es sind zwei Versionen des Dienst-Workers installiert.

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 geschlossen sind, die vom alten Service Worker gesteuert werden.

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 jetzt mit der Registrierung eines Dienstarbeiters und der Beobachtung des Verhaltens eines Dienstarbeiters mithilfe der Chrome DevTools vertraut sein.

Sie sind jetzt gut gerüstet, um Caching-Strategien und alle anderen nützlichen Funktionen zu implementieren, die dazu beitragen, dass Ihre Webanwendung sowohl zuverlässig als auch schnell geladen wird.