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 relevantesten Dateien im Beispielprojekt sind:

  • register-sw.js ist anfangs leer, enthält jedoch den verwendeten Code. um den Service Worker zu registrieren. Es wird bereits über ein <script>-Tag in der index.html des Projekts geladen.
  • service-worker.js ist 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 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-Bereich an.

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:

Zeigt zwei installierte Service Worker-Versionen an.

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.