In diesem Codelab erfahren Sie, wie Sie einen Service Worker in Ihrer Webanwendung registrieren und das Verhalten mit den Chrome-Entwicklertools beobachten. Außerdem werden einige Debugging-Techniken beschrieben, die für den Umgang mit Service-Workern nützlich sein können.
Mit dem Beispielprojekt vertraut machen
Die für dieses Codelab relevantesten Dateien im Beispielprojekt sind:
register-sw.jsist anfangs leer, enthält jedoch den Code, der zum Registrieren des Service Workers verwendet wurde. Sie wird bereits über ein<script>-Tag imindex.htmldes Projekts geladen.service-worker.jsist ebenfalls leer. Dies ist die Datei, die den Service Worker für dieses Projekt enthält.
Service Worker-Registrierungscode hinzufügen
Ein Service Worker (auch ein leerer Dienst wie die aktuelle service-worker.js-Datei) wird nur verwendet, wenn er zuerst registriert wurde. Rufen Sie dazu an:
navigator.serviceWorker.register(
'/service-worker.js'
)
in der Datei register-sw.js.
Bevor Sie diesen Code hinzufügen, sind jedoch einige Punkte zu beachten.
Erstens unterstützt nicht jeder Browser Service Worker. Dies gilt insbesondere für ältere Versionen von Browsern, 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.
Wenn Sie zusätzlichen Code ausführen und Assets herunterladen, können wertvolle Ressourcen verwendet werden, die Ihr Browser andernfalls zum Anzeigen der aktuellen Webseite verwenden könnte. Um diese Beeinträchtigung 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, diesen Wert annähern zu können, besteht darin, zu warten, bis das window.load-Ereignis ausgelöst wurde.
Fügen Sie der Datei register-sw.js diesen allgemeinen Service Worker-Registrierungscode hinzu, um diese beiden Punkte zu kombinieren:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
Fügen Sie Service Worker-Logging-Code hinzu
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, um später zu lernen. In dieser Phase liegt der Fokus darauf, verschiedene Service Worker-Ereignisse zu beobachten und sich damit vertraut zu machen, wie Sie mit den Entwicklertools von Chrome den Status Ihres Service Workers debuggen.
Fügen Sie zu diesem Zweck den folgenden Code in service-worker.js ein. Dadurch werden Nachrichten als Reaktion auf verschiedene Ereignisse in der Entwicklertools-Konsole protokolliert.
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 Bereich „Service Workers“ in den Entwicklertools vertraut machen
Nachdem Sie den Code den Dateien register-sw.js und service-worker.js hinzugefügt haben, können Sie die Live-Version Ihres Beispielprojekts aufrufen und den Service Worker in Aktion beobachten.
- 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 + Wahltaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Console.
Sie sollten in etwa die folgenden Lognachrichten sehen, die angeben, dass der Service Worker installiert und aktiviert wurde:
Öffnen Sie dann den Tab Anwendungen und wählen Sie den Bereich Service Worker aus. Die Ausgabe sollte etwa so aussehen:
Dadurch wissen Sie, dass ein Service Worker mit der Quell-URL service-worker.js für die Webanwendung solar-donkey.glitch.me vorhanden ist, der derzeit aktiviert ist 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 zu Fehlerbehebungszwecken vorzunehmen.
Service Worker-Aktualisierungsvorgang auslösen
Eines der wichtigsten Konzepte bei der Entwicklung mit Service Workern ist die Idee eines Aktualisierungsablaufs.
Wenn Nutzer eine Webanwendung besuchen, die einen Service Worker registriert, 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 im Bereich eines Service Workers liegt, fordert der Browser automatisch die neueste service-worker.js an und prüft, ob Änderungen vorliegen. Wenn sich irgendetwas im Service Worker-Skript ändert, erhält 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 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);
});
Nachdem Sie diese Änderung vorgenommen haben, kehren Sie zur Live-Version Ihrer Beispiel-App zurück und laden Sie die Seite neu, wobei der Tab „Anwendung“ der Entwicklertools noch geöffnet ist. Sie sollten in etwa Folgendes sehen:
Dies zeigt, dass zu diesem Zeitpunkt zwei Versionen Ihres Service Workers installiert sind. Die vorherige Version, die bereits aktiviert wurde, wird ausgeführt und steuert die aktuelle Seite. Die aktualisierte Version des Service Workers ist direkt unten 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 ein neuer Service Worker erst dann wirksam wird, wenn ein Nutzer alle vorherigen Instanzen der Webanwendung beendet hat, wenn sich das Verhalten des neuen Service Workers grundlegend von dem des alten 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 nun in einer guten Position, um mit der Implementierung von Caching-Strategien und allen nützlichen Dingen zu beginnen, die dazu beitragen, dass Ihre Webanwendung sowohl zuverlässig als auch zuverlässig schnell geladen wird.