Service Worker-Registrierung

Best Practices für das Timing der Service Worker-Registrierung

Jeff Posnick

Service Mitarbeiter:innen wiederholte Besuche Ihrer Webanwendung deutlich beschleunigen. Sie sollten jedoch damit die Erstinstallation eines Service Workers beim ersten Besuch des Nutzers.

Im Allgemeinen sollten Sie den Service Worker Registrierung nach dem Laden der ersten Seite aktiviert ist, insbesondere auf Mobilgeräten mit langsameren Netzwerkverbindungen.

Standard-Boilerplate für die Registrierung

Wenn Sie jemals von Service Workern gelesen haben, Textbausteine im Wesentlichen ähnlich wie die folgenden:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
}

Dazu werden manchmal console.log()-Anweisungen oder Code die eine Aktualisierung einer früheren Service Worker-Registrierung erkennt, und die Nutzer darüber informieren, dass sie die Seite aktualisieren sollen. Aber das sind nur kleine Abweichungen nur wenige Zeilen Code.

Gibt es einen Unterschied bei navigator.serviceWorker.register? Gibt es Best Practices beachten? Nicht überraschend (da dieser Artikel hier), lautet die Antwort auf beide Fragen „Ja!“

Erster Besuch eines Nutzers

Angenommen, ein Nutzer verwendet zum ersten Mal eine Webanwendung. Es gibt noch keinen Service Worker. und der Browser weiß nicht im Voraus, ob ein Service Worker, der schließlich installiert wird.

Als Entwickler sollten Sie darauf achten, erhält nur die minimalen kritischen Ressourcen, die zum Anzeigen einer interaktiven Sitzung erforderlich sind. Seite. Alles, was das Abrufen dieser Antworten verlangsamt, ist der Feind eines in kürzerer Zeit interaktiver Erfahrung.

Stellen Sie sich nun vor, dass beim Herunterladen des JavaScript-Codes oder der Bilder, die Ihre Seite rendern muss, startet der Browser einen Hintergrundthread (der Einfachheit halber nehmen wir an, dass es sich um einen Thread handelt). Angenommen, nicht mit einem leistungsstarken Desktop-Computer arbeiten, Mobiltelefon, das in den meisten Ländern als ihr Hauptgerät betrachtet wird. Wird hochgefahren führt dieser zusätzliche Thread zu Konflikten in Bezug auf die CPU-Zeit und den Arbeitsspeicher, die Ihr Browser die normalerweise für das Rendern einer interaktiven Webseite aufgewendet werden könnten.

Ein inaktiver Hintergrundthread macht wahrscheinlich keinen großen Unterschied. Aber was ist wenn dieser Thread nicht inaktiv ist, sondern stattdessen entscheidet, dass er Ressourcen aus dem Netzwerk herunterladen? Bedenken hinsichtlich der CPU oder des Arbeitsspeichers um sich Sorgen wegen der begrenzten Bandbreite machen, auf vielen Mobilgeräten verfügbar. Bandbreite ist kostbar, also schränkt sie nicht ein indem Sie sekundäre Ressourcen gleichzeitig herunterladen.

Das alles bedeutet, dass ein neuer Service Worker-Thread zum Herunterladen erstellt wird. und im Hintergrund gespeicherte Ressourcen im Hintergrund zu speichern, die kürzeste Zeit für die Interaktion beim ersten Besuch Ihrer Website Website.

Standardtext verbessern

Die Lösung besteht darin, den Start des Service Workers zu steuern, indem Sie den Zeitpunkt für den Aufruf auswählen. navigator.serviceWorker.register() Eine einfache Faustregel lautet: Registrierung bis nach dem load event wird am window ausgelöst. Beispiel:

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

Der richtige Zeitpunkt für die Service Worker-Registrierung kann was Ihre Webanwendung direkt nach dem Laden tut. Zum Beispiel die Google I/O Web-App von 2016 enthält eine kurze Animation. bevor du zum Hauptbildschirm wechselst. Unser Team gefunden, die die kann es zu Verzögerungen kommen, wenn die Service Worker-Registrierung entfernt wird. auf Low-End-Mobilgeräten. Wir bieten den Nutzern kein schlechtes Erlebnis, verspätet Service Worker-Registrierung erst nach der Animation, wenn der Browser am meisten mit einigen Sekunden Inaktivität.

Das Gleiche gilt, wenn Ihre Webanwendung ein Framework verwendet, das nach dem die Seite geladen wurde, suchen Sie nach einem Framework-spezifischen Ereignis, das signalisiert, dass die Arbeit erledigt ist.

Nachfolgende Besuche

Bis jetzt haben wir uns auf den ersten Besuch konzentriert. Aber welche Auswirkungen hat Gibt es bei verspäteten Service Worker-Registrierungen Ihre Website bei wiederholten Besuchen? Das mag vielleicht einige Menschen überraschen, aber es sollte überhaupt keine Auswirkungen haben.

Wenn ein Service Worker registriert ist, durchläuft er install und activate Lebenszyklus Ereignisse. Sobald ein Service Worker aktiviert ist, kann er fetch-Ereignisse für beliebige nachfolgende Besuche Ihrer Webanwendung. Der Service Worker startet vor der Anfrage für alle unter diesem Geltungsbereich fallenden Seiten gestellt wird. Dies ist sinnvoll, wenn Sie mehr darüber erfahren. Wenn der vorhandene Service Worker noch nicht vor besucht, konnten die fetch-Ereignisse für Navigationsanfragen.

Sobald also ein aktiver Service Worker vorhanden ist, navigator.serviceWorker.register() oder ob du es überhaupt nennst. Wenn Sie die URL des Service Worker-Skripts nicht ändern, navigator.serviceWorker.register() ist effektiv ein no-op bei nachfolgenden Besuchen. Wenn es aufgerufen wird, ist irrelevant.

Gründe für eine frühzeitige Anmeldung

Gibt es Szenarien, in denen die Registrierung Ihres Service Workers sinnvoll ist? Wenn Ihr Service Worker clients.claim() um beim ersten Besuch die Kontrolle über die Seite zu übernehmen, und der Service Worker führt die Laufzeit Caching innerhalb des fetch-Handlers. In dieser Situation gibt es den Service Worker so schnell wie möglich zu aktivieren, seine Laufzeit-Caches mit Ressourcen füllen, die sich später als nützlich erweisen könnten. Wenn dass Ihre Webanwendung in diese Kategorie fällt, sollten Sie einen Schritt zurückgehen, darf der install-Handler Ihres Service Workers Ressourcen, die mit den Anfragen der Hauptseite um Bandbreite konkurrieren.

Dinge ausprobieren

Eine gute Möglichkeit, einen ersten Besuch zu simulieren, besteht darin, Ihre Webanwendung in einem Chrome-Browser Inkognito Fenster und den Netzwerkverkehr im Chrome-System Entwicklertools. Als Web- laden Sie eine lokale Instanz Ihrer Webanwendung wahrscheinlich Dutzende Male am Tag. Wenn Sie jedoch Ihre Website erneut aufrufen, Service Worker und vollständig gefüllte Caches verwenden, ist die Nutzung neue Nutzende erhalten und potenzielle Probleme können leicht ignoriert werden.

Das folgende Beispiel verdeutlicht den Unterschied, machen. Beide Screenshots werden während des Besuchs eines Beispiels App in Inkognitomodus mit Netzwerkdrosselung, um eine langsame Verbindung zu simulieren.

Der obige Screenshot zeigt den Netzwerktraffic bei der Änderung des Beispiels. Service Worker-Registrierung so schnell wie möglich durchführen. Sie können sehen, Precaching-Anfragen (die Einträge mit dem Zahnradsymbol Symbol daneben, vom install-Handler des Service Workers, dazwischen Anfragen für die anderen Ressourcen, die zum Anzeigen der Seite erforderlich sind.

Im Screenshot oben wurde die Service Worker-Registrierung erst nach dem Seite geladen wurde. Wie Sie sehen, werden die Precaching-Anfragen erst gestartet, die Ressourcen aus dem Netzwerk abgerufen wurden, wodurch Konflikte Bandbreite. Da sich einige der Elemente, für die wir vorbereiten, bereits in Aus dem HTTP-Cache des Browsers: die Elemente mit (from disk cache) in der Größe können wir den Cache des Service Workers füllen, ohne noch einmal versuchen.

Bonuspunkte gibt es, wenn Sie diese Art von Test von einem tatsächlichen Low-End-Gerät aus auf einem wie das echte Mobilfunknetz ist. Nutzen Sie die Vorteile der Remote-Debugging-Funktion von Chrome, Funktionen um ein Android-Telefon über USB an Ihren Desktop-Computer anzuschließen, und stellen Sie sicher, dass die durchgeführten Tests die realen Erfahrungen vieler Ihrer Nutzenden.

Fazit

Zusammenfassend lässt sich sagen, dass Nutzer den ersten Besuch so einfach wie möglich gestalten können. sollte oberste Priorität haben. Die Service Worker-Registrierung wird erst nach dem die beim ersten Besuch geladen wurde, können Sie dies sicherstellen. Sie erhalten trotzdem die Vorteile eines Service Workers für wiederholte Besuche zu nutzen.

Eine einfache Methode, um die anfängliche Ausführung des Service Workers zu verzögern nach dem Laden der ersten Seite ist, verwenden Sie Folgendes:

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