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 relevantesten Dateien im Beispielprojekt sind:
register-sw.jsist anfangs leer, enthält jedoch den verwendeten Code. um den Service Worker zu registrieren. Es wird bereits über ein<script>-Tag in derindex.htmldes Projekts geladen.service-worker.jsist ebenfalls leer. Dies ist die Datei, die Service Worker für dieses Projekt.
Registrierungscode für Service Worker hinzufügen
Einen Service Worker (auch ein leerer, wie die aktuelle service-worker.js-Datei)
verwendet werden, es sei denn,
registriert
. Rufen Sie dazu an:
navigator.serviceWorker.register(
'/service-worker.js'
)
in der Datei register-sw.js.
Bevor Sie diesen Code hinzufügen, müssen Sie jedoch einige Punkte beachten: Konto.
Erstens: Nicht jeder Browser
unterstützt
Service Workers. Dies gilt insbesondere für ältere Browserversionen,
werden nicht automatisch aktualisiert. 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
Registrieren Sie einen Service Worker, bis der Browser das Rendern der
aktuellen Seite angezeigt. Eine einfache Möglichkeit, diesen Wert zu schätzen, besteht darin, zu warten, bis der
window.load-Ereignis wurde ausgelöst.
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');
});
}
Fügen Sie Service Worker-Logging-Code hinzu
In der Datei service-worker.js befindet sich die gesamte Logik für Ihren Service Worker
würde die Implementierung normalerweise enden. Mit einer Mischung aus Service Workern
Lebenszyklusereignisse,
die
Cache Storage API
und Ihr Wissen über den Netzwerkverkehr Ihrer
Webanwendung an, um eine perfekt
Service Worker, 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 verfolgen und sich mit den DevTools von Chrome vertraut zu machen. um den Status des Service Workers zu debuggen.
Fügen Sie zu diesem Zweck den folgenden Code in service-worker.js ein, wodurch
als Reaktion auf verschiedene Ereignisse an die Entwicklertools-Konsole gesendet,
sonst):
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 der Code nun register-sw.js und service-worker.js hinzugefügt wurde
ist es an der Zeit, die Live-Version Ihres Beispielprojekts zu besuchen und zu beobachten,
den Service Worker in Aktion.
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie 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:
Daran erkennen Sie, dass es einen Service Worker mit der Quell-URL
service-worker.js, von der Web-App solar-donkey.glitch.me, ist
aktiviert sind und ausgeführt werden. Außerdem sehen Sie, dass es derzeit einen Client (offene
der 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.
Service Worker-Aktualisierungsvorgang auslösen
Eines der wichtigsten Konzepte bei der Entwicklung mit Service Workern die Idee der einen 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 Geltungsbereich eines Service Workers liegt,
fordert der Browser automatisch die aktuellen service-worker.js und
und prüfen Sie, ob sich etwas geändert hat. Wenn sich etwas im Service Worker-Skript
erhält der neue Service Worker die Möglichkeit,
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 zum Ersetzen
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 Aktualisieren Sie die Seite mit dem noch geöffneten Tab für die Entwicklertools-Anwendung. 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 ist in
Steuerung der aktuellen Seite. Die aktualisierte Version des Dienstarbeiters ist direkt darunter aufgeführt. Es befindet sich in der
waiting,
und warten, bis alle geöffneten Tabs vom
Alte Service Worker sind geschlossen.
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 vertraut sein. und das Verhalten eines Service Workers mithilfe der DevTools von Chrome beobachten.
Jetzt sind Sie in einer guten Position, um mit der Implementierung von Caching-Strategien zu beginnen. Die nützlichen Dinge, die dazu beitragen, dass Ihre Webanwendung zuverlässig und zuverlässig geladen wird schnell.