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.jsist zu Beginn leer, enthält aber den Code, mit dem der Dienst-Worker registriert wurde. Es wird bereits über ein<script>-Tag imindex.htmldes Projekts geladen.service-worker.jsist 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 dem Wissen über den 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 als 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
. - 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.
Über die Links in diesem Bereich, z. B. Unregister oder stop, können Sie zu Debugging-Zwecken Änderungen am aktuell registrierten Dienst-Worker 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 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 zu diesem Zeitpunkt 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, mit denen sich Ihre Webanwendung zuverlässig und schnell laden lässt.