Mit Service Workern arbeiten

Jeff Posnick

In diesem Codelab erfahren Sie, wie Sie einen Service Worker in Ihrer Webanwendung registrieren und mit den Chrome-Entwicklertools ihr Verhalten beobachten können. Außerdem werden einige Methoden zur Fehlerbehebung beschrieben, die für den Umgang mit Service Workern hilfreich sein können.

Mit dem Beispielprojekt vertraut machen

Die für dieses Codelab am relevantesten Dateien im Beispielprojekt:

• register-sw.js ist anfangs leer, enthält aber den Code, der zum Registrieren des Service Workers verwendet wird. Es wird bereits über ein <script>-Tag in der index.html des Projekts geladen.
• service-worker.js ist ebenfalls leer. Das ist die Datei, die den Service Worker für dieses Projekt enthält.

Service Worker-Registrierungscode hinzufügen

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

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

in der Datei register-sw.js.

Bevor Sie diesen Code hinzufügen, müssen jedoch einige Punkte berücksichtigt werden.

Zunächst einmal unterstützt nicht jeder Browser Service Worker. Dies gilt insbesondere für ältere Browserversionen, die nicht automatisch aktualisiert werden. Daher sollten Sie navigator.serviceWorker.register() bedingt aufrufen, nachdem Sie geprüft haben, ob navigator.serviceWorker unterstützt wird.

Zweitens: 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 URLs herunterladen, um Caches zu füllen.

Das Ausführen von zusätzlichem Code und das Herunterladen von Assets können wertvolle Ressourcen aufbrauchen, 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 die aktuelle Seite vollständig gerendert hat. Dies lässt sich am besten abwarten, bis das Ereignis window.load ausgelöst wurde.

Fügen Sie diese beiden Punkte anschließend in die Datei register-sw.js ein:

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

Service Worker-Logging-Code hinzufügen

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

Aber... das ist alles zum späteren Lernen. In dieser Phase liegt der Fokus auf der Beobachtung verschiedener Service Worker-Ereignisse und der Verwendung der Chrome-Entwicklertools zur Fehlerbehebung des Service Worker-Status.

Füge dazu den folgenden Code in service-worker.js ein. Dadurch werden Nachrichten in der Entwicklertools-Konsole als Reaktion auf verschiedene Ereignisse protokolliert (aber nicht viel:)

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);
});

Mit dem Service Workers-Bereich in den Entwicklertools vertraut machen

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

• Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.
• Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
• Klicken Sie auf den Tab Console.

Sie sollten in etwa folgende Log-Nachrichten sehen, die darauf hinweisen, dass der Service Worker installiert und aktiviert wurde:

Wechseln Sie dann zum Tab Applications und wählen Sie das Steuerfeld Service Workers aus. Die Ausgabe sollte etwa so aussehen:

Dadurch werden Sie darüber informiert, dass es einen Service Worker mit der Quell-URL service-worker.js für die Web-App solar-donkey.glitch.me gibt, der derzeit aktiviert ist und ausgeführt wird. Außerdem erfahren Sie, dass derzeit ein Client (offener Tab) vorhanden ist, der vom Service Worker gesteuert wird.

Über die Links in diesem Bereich, z. B. Unregister oder stop, können Sie zu Debugging-Zwecken Änderungen am aktuell registrierten Service Worker vornehmen.

Service Worker-Aktualisierungsvorgang auslösen

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

Wenn Ihre Nutzer eine Webanwendung aufrufen, durch die ein Service Worker registriert wird, erhalten sie am Ende den Code für die aktuelle Kopie von service-worker.js, die in ihrem lokalen Browser installiert ist. Aber was passiert, wenn Sie Aktualisierungen an der Version von service-worker.js vornehmen, die auf Ihrem Webserver gespeichert ist?

Wenn ein wiederkehrender Besucher zu einer URL zurückkehrt, die in den Bereich eines Service Workers fällt, fordert der Browser automatisch den letzten service-worker.js an und prüft, ob Änderungen vorgenommen wurden. Wenn etwas im Service Worker-Skript anders ist, hat der neue Service Worker die Möglichkeit, ihn zu installieren, zu aktivieren und schließlich die Kontrolle zu übernehmen.

Sie können diesen Aktualisierungsablauf simulieren, indem Sie zum Code-Editor für Ihr Projekt zurückkehren und beliebige Änderungen am Code vornehmen. Eine kurze Ä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);
});

Nachdem Sie diese Änderung vorgenommen haben, kehren Sie zur Live-Version der Beispiel-App zurück und laden Sie die Seite neu. Der Tab für die Entwicklertools-Anwendung ist noch geöffnet. Die Ausgabe sollte in etwa so aussehen:

Dies zeigt, dass zu diesem Zeitpunkt zwei Versionen Ihres Service Workers installiert sind. Die vorherige Version, die bereits aktiviert wurde, wird ausgeführt und wird über die aktuelle Seite gesteuert. Die aktualisierte Version des Service Workers ist rechts unten aufgeführt. Sie befindet sich im Status waiting und wartet, bis alle geöffneten Tabs, die vom alten Service Worker gesteuert werden, geschlossen sind.

Mit diesem Standardverhalten wird sichergestellt, dass der neue Service Worker erst wirksam wird, wenn ein Nutzer alle vorherigen Instanzen Ihrer Webanwendung heruntergefahren hat, wenn sich das Verhalten des neuen Service Workers vom alten unterscheidet – z. B. wenn ein fetch-Handler mit Ressourcen antwortet, die mit älteren Versionen der Webanwendung nicht kompatibel sind.

Zusammenfassung

Sie sollten jetzt mit dem Registrieren eines Service Workers und der Beobachtung des Verhaltens eines Service Workers mit den Entwicklertools von Chrome vertraut sein.

Jetzt sind Sie bestens aufgestellt, um Caching-Strategien und all die praktischen Funktionen zu implementieren, die dafür sorgen, dass Ihre Webanwendung sowohl zuverlässig als auch zuverlässig schnell geladen wird.