Machen Sie Ihre App offline mit Service-Arbeitern

Service-Arbeiter können verwendet werden, um Ladezeiten und Offline-Support für Ihre Websites und Web-Apps zu verbessern. In diesem Tutorial zeigen wir Ihnen, wie Sie eine Web-App mit einem Service-Arbeiter progressiv verbessern können. Erstens decken wir, was ein Service-Arbeiter ist und wie sein Lebenszyklus arbeitet, dann zeigen wir Ihnen, wie Sie verwenden, um Ihre Website (diese Seite) zu beschleunigen und Offline-Inhalte anzubieten (Seite 2).

Dann zeigen wir Ihnen, wie Sie Wie erstellt man eine App? mit Servicekräften. Sie lernen, wie man einen Bare-Bones-Arbeiter eingerichtet, der statische Vermögenswerte eingerichtet und serviert (liefert einen riesigen Leistungssteiger bei nachfolgenden Lasten), und wie Sie dynamische API-Antworten abrufen und unserem Demo-App vollständige Offline-Unterstützung geben. Schauen wir uns zunächst an, was genau Serviceangestellte sind, und wie sie funktionieren.

Eine Website erstellen? Rationalisieren Sie Ihren Prozess mit einem tollen Webseitenersteller und pflegen Sie es mit einem anständigen Web-Hosting Bedienung. Und lassen Sie sich mit diesen sortieren Cloud-Speicherung. Optionen.

Was ist ein Service-Arbeiter?

Was ist also ein Service-Arbeiter? Es ist ein Skript, das in JavaScript geschrieben wurde, dass Ihr Browser im Hintergrund ausgeführt wird. Es beeinflusst den Hauptthread nicht (wenn JavaScript normalerweise auf einer Webseite ausgeführt wird), und zwar nicht mit Ihrem App-Code, oder beeinflusst die Laufzeitleistung.

Ein Service-Arbeiter hat keinen direkten Zugriff auf die DOM- oder Ereignisse und die Benutzerinteraktion, die in der Webseite selbst geschieht. Denken Sie daran als eine Ebene, die zwischen der Webseite und dem Netzwerk sitzt, wodurch es Netzwerkanforderungen abfangen und bearbeiten kann, um Netzwerkanfragen (z. B. Ajax-Anforderungen) von Ihrer Seite abzufangen und zu manipulieren. Dies macht es ideal für die Verwaltung von Caches und der Unterstützung der Offline-Nutzung.

Der Lebensarbeiter-Lebenszyklus

Das Leben eines Serviceleisters folgt einem einfachen Fluss, aber es kann ein bisschen verwirrend sein, wenn Sie an JS-Skripts verwendet werden, die gerade sofort arbeiten:

Installation & GT; Warten (installiert) & GT; Aktivieren & GT; Aktiviert & gt; Redundant

Wenn Ihre Seite zuerst geladen wird, wird der Registrierungscode, den wir hinzugefügt haben index.html. Startet die Installation des Dienstangestellters. Wenn kein bestehender Arbeiter vorhanden ist, wird der neue Service-Arbeiter unmittelbar nach der Installation aktiviert. Eine Webseite kann nur einen Service-Arbeiter auf einmal aktivieren.

Wenn bereits ein Arbeitnehmer installiert ist, wird der neue Service-Arbeiter installiert und dann am Warteschritt sitzen, bis die Seite vollständig geschlossen und anschließend neu geladen ist. Einfach erfrischend ist nicht genug, da Sie möglicherweise andere Registerkarten öffnen können. Sie müssen sicherstellen, dass alle Instanzen der Seite geschlossen sind. Andernfalls aktiviert der neue Arbeiter nicht aktiviert. Sie müssen die Registerkarten nicht schließen, Sie können einfach auf eine andere Site navigieren und zurückkehren.

Beide Installieren und aktivieren Sie Ereignisse treten nur einmal pro Arbeiter auf. Sobald aktiviert, hat der Service-Arbeiter die Kontrolle über die Seite und kann mit dem Umgang mit Ereignissen wie Abruf aufnehmen, um Anforderungen zu manipulieren.

Schließlich wird ein Service-Arbeiter redundant, wenn der Browser erkennt, dass die Arbeiterdatei selbst aktualisiert wurde oder wenn die Installation oder Aktivierung fehlschlägt. Der Browser sucht nach einem Byte-Unterschied, um festzustellen, ob ein Arbeiterskript aktualisiert wurde.

Es ist wichtig zu beachten, dass Sie den Namen Ihrer Service-Arbeiter niemals ändern (oder rev). Sie sollten die Arbeiterdatei auch nicht auf dem Server speichern, da Sie ihn nicht einfach aktualisieren können, obwohl die Browser nun klug genug sind, um die Caching-Header zu ignorieren.

01. Klon die Demo-App

Okay, lass uns anfangen zu lernen, wie man eine Web-App mit Hilfe von Service-Arbeitern erstellt. Für dieses Tutorial benötigen Sie aktuelle Versionen von Node.js und NPM auf Ihrem Computer installiert.

Wir haben eine Demo-App aufgeschlagen, die wir als Grundlage für dieses Tutorial verwenden ( Klon die Demo-App hier ). Die App ist ein lustiges kleines Projekt, das die fünftägige Wettervorhersage basierend auf dem Standort des Benutzers abholt. Es wird dann prüfen, ob Regen vor dem Ende des Tages vorausgeht und die Benutzeroberfläche entsprechend aktualisiert wird.

Es wurde mit großen, unnötigen Bibliotheken wie Jquery und Bootstrap ineffizient (absichtlich) gebaut, mit großen ungewöhnlichen Bildern, um den Leistungsunterschied bei der Verwendung eines Serviceangestellters zu demonstrieren. Es wiegt derzeit bei einem lächerlichen 4.1 MB.

02. Holen Sie sich Ihren API-Schlüssel

Um die Wetterdaten von der API abzurufen, müssen Sie sich einen kostenlosen API-Schlüssel abrufen OpenWeathermap. :

Sobald Sie Ihren Schlüssel haben, öffnen Sie index.html. und suche nach dem window.api_key. variabel in der & lt; head & gt; . Fügen Sie Ihren Schlüssel in den Wert ein:

    window.API_KEY = 'paste-your-key-here';

03. Starten Sie den Entwicklungsserver

Jetzt sind wir bereit, an dem Projekt zu arbeiten. Lassen Sie uns zunächst die Abhängigkeiten installieren, indem Sie ausgeführt werden:

    npm install

Es gibt zwei Aufgaben für das Build-Tool. Lauf NPM-Start. So starten Sie den Entwicklungsserver am Port 3000. Lauf npm run brue. um die Version "Produktion" vorzubereiten. Denken Sie daran, dass dies nur eine Demo ist, also ist keine Produktionsversion - es gibt keine Minikation oder irgendetwas - die Dateien werden einfach "umrß".

Ein Algorithmus wird verwendet, um einen Hash zu erstellen, beispielsweise 9c616053E5, aus dem Inhalt der Datei. Der Algorithmus gibt immer denselben Hash für denselben Inhalt aus, was bedeutet, dass sich der Hash nicht ändert, solange Sie die Datei nicht ändern. Der Hash wird dann an den Dateinamen angehängt, so dass beispielsweise Styles.css Styles-9c616053E5.css werden. Der Hash repräsentiert die Revision der Datei - daher "recred".

Sie können jede Überarbeitung der Datei auf Ihrem Server sicher zwischenspeichern, ohne dass Sie Ihren Cache ungültig machen müssen, der teuer ist, oder sich um einen anderen Cache von Drittanbietern, der die falsche Version serviert.

04. Führen Sie Ihren Service-Arbeiter vor

Lassen Sie uns jetzt mit unserem Service-Arbeiter beginnen. Erstellen Sie eine Datei namens SW.Js in der Wurzel des src. Verzeichnis. Fügen Sie dann diese beiden Ereignishörer hinzu, um das anzumelden Installieren und aktivieren Sie Veranstaltungen:

 Self.AdDeventListener ('installieren', (Ereignis) = & GT; {
      console.log (Ereignis);
    });

    self.addeventListener ('aktivieren', (Ereignis) = & gt; {
      console.log (Ereignis);
    }); 

Das selbst Variable hier stellt den globalen schreibgeschützten Geltungsbereich des Servicer-Workers dar. Es ist ein bisschen wie das Fenster Objekt auf einer Webseite.

Als nächstes müssen wir unsere Datei index.html aktualisieren und die Befehle hinzufügen, um den Service-Arbeiter zu installieren. Fügen Sie dieses Skript kurz vor dem Abschluss hinzu & lt; / body & gt; Etikett. Es wird unseren Arbeitnehmer registrieren und den aktuellen Status loggen.

 & lt; script & gt;
     if ('ServiceWäger' im Navigator) {
       navigator.servicworker.register ('/ sw.js')
         .das (Funktion (reg) {
           if (reg.installing) {
             console.log ('s s s s s s s s s s s s s sw installieren);
           }, wenn (reg.waiting) {
             console.log ('swartet');
           } else if (reg.active) {
             console.log ('s sw aktiviert');
           }
         }). Fang (Funktion (Fehler) {
           // Registrierung fehlgeschlagen
           console.log ("Registrierung mit" + Fehler fehlgeschlagen);
         });
     }
   & lt; / script & gt; 

Starten Sie Ihren Entwicklungsserver mit dem Laufen NPM-Start. und öffnen Sie die Seite in einem modernen Browser. Wir würden empfehlen, Google Chrome zu verwenden, da es in seinen Devtools eine gute Service-Arbeiteter-Unterstützung hat, auf die wir uns in diesem Tutorial beziehen. Sie sollten drei Dinge sehen, die an Ihrer Konsole angemeldet sind; zwei vom Dienstarbeiter für die Installieren und aktivieren Sie Ereignisse und der andere ist die Nachricht von der Registrierung.

05. Aktivieren Sie den Arbeiter

Wir werden unserem Arbeiter sagen, um den Warteschritt zu überspringen und jetzt zu aktivieren. Öffnen Sie die SW.JS-Datei und fügen Sie diese Zeile überall in der Installieren Ereignislistener:

 Self.Skipwaiting (); 

Wenn wir jetzt das Worker-Skript aktualisieren, wird es unmittelbar nach der Installation die Kontrolle über die Seite übernommen. Es lohnt sich, dass dies bedeuten kann, dass der neue Arbeiter eine Kontrolle über eine Seite übernimmt, die möglicherweise von einer vorherigen Version Ihres Arbeitnehmers geladen wurde - wenn dies Probleme verursacht, verwenden Sie diese Option nicht in Ihrer App.

Sie können dies bestätigen, indem Sie von der Seite weg navigieren und dann zurückkehren. Sie sollten das sehen Installieren und aktivieren Sie Ereignisse feuern erneut, wenn der neue Arbeiter installiert wurde.

Chrome Devtools hat eine hilfreiche Option, die bedeutet, dass Sie Ihren Arbeiter nur durch Nachladen aktualisieren können. Öffnen Sie Devtools und gehen Sie zur Registerkarte Anwendungs-Registerkarte und wählen Sie dann Service Worker aus der linken Spalte aus. An der Spitze des Panels befindet sich ein Tick-Box, das mit dem Update im Reload-Update bezeichnet wird, ankreuzen. Ihr aktualisierter Arbeiter wird nun installiert und auf der Aktualisierung aktiviert.

06. Änderungen bestätigen

Beginnen wir das mit dem Hinzufügen console.log ('foo') Rufen Sie einen der Ereignishörer an und erfrischen Sie die Seite. Das erwischte uns, weil wir das Protokoll der Konsole erwarten, wenn wir erfrischt haben, aber alle, die wir gesehen haben, war die SW-Nachricht. Es stellt sich heraus, dass Chrome die Seite zweimal aktualisiert, wenn das Update auf Reload-Option aktiviert ist.

Sie können dies bestätigen, indem Sie das Kontrollkästchen des Konsolen-Protokolls in der Konsoleneinstellungen ankreuzen und erneut erfrischen. Sie sollten die Installation und Aktivieren von Ereignissen angemeldet sein, zusammen mit 'foo', gefolgt von "Navigiert auf http: // localhost: 3000 / ', um anzuzeigen, dass die Seite neu geladen wurde, und dann dann die endgültige SW-aktivierte Meldung.

07. Verfolgen Sie das Abrufereignis

Zeit, einen anderen Zuhörer hinzuzufügen. Diesmal verfolgen wir das holen Ereignis, das jedes Mal abgefeuert wird, wenn die Seite eine Ressource lädt, z. B. eine CSS-Datei, ein Bild oder eine sogar API-Antwort. Wir öffnen einen Cache, geben die Anforderungsantwort auf die Seite zurück, und dann - im Hintergrund - cache die Antwort. Zunächst werden wir den Hörer hinzufügen und aktualisieren, damit Sie sehen können, was passiert. In der Konsole sollten Sie viele sehen Fachevent. Protokolle.

 self.addeventListener ('fetch', (Ereignis) = & gt; {
 console.log (Ereignis);
}); 

Unser Servo-Modus verwendet BrowserSync, das das eigene Skript auf der Seite fügt und Websocket-Anforderungen herstellt. Sie sehen auch die Analyse für diese, aber wir möchten diese ignorieren. Wir möchten auch nur Cache-Anfragen aus unserer eigenen Domäne abrufen. Fügen Sie also ein paar Dinge hinzu, um unerwünschte Anfragen zu ignorieren, einschließlich der explizit ignorierenden / Indexpfad:

 self.addeventListener ('fetch', (Ereignis) = & gt; {
 // Crossdomain-Anfragen ignorieren
 if (! event.request.url.startwith (self.location.origin)) {
   Rückkehr;
 }
 // Nicht-Get-Anfragen ignorieren
 if (Event.Request.method! == 'Get') {
   Rückkehr;
 }
 // Browser-Synchronisation ignorieren
 if (event.request.url.indexof ('browser-sync') & gt; -1) {
   Rückkehr;
 }
 // Verhindern, dass die Indexroute zwischengespeichert wird
 if (Event.Request.url === (self.location.origin + '/')) {
   Rückkehr;
 }
 // verhindern, dass index.html zwischengespeichert wird
 if (Event.Request.url.endswith ('index.html')) {
   Rückkehr;
 }
 console.log (Ereignis);
}); 

Nun sollten die Protokolle viel sauberer sein und es ist sicher, mit dem Caching sicher zu sein.

08. Cache das Vermögenswerte

Jetzt können wir mit diesen Antworten beginnen. Zuerst müssen wir unseren Cache einen Namen geben. Nennen wir unsere v1-Assets . Fügen Sie diese Zeile an den oberen Rand der SW.JS-Datei hinzu:

 Const AssetsCachenName = 'V1-Assets'; 

Dann müssen wir die Faktevents entführen, damit wir das, was auf die Seite zurückgegeben wird, entführen. Wir können das mithilfe der Ereignisse tun Antworten mit Methode. Diese Methode akzeptiert ein Versprechen, damit wir diesen Code hinzufügen können, und ersetzen console.log. :

 // Erzählen Sie dem Abruf, mit dieser Versprechenkette zu antworten
 Event.respondit (
   // den Cache öffnen
   Cache.Open (AssetsCacheName)
     .das ((cache) = & gt; {
       // Machen Sie die Anfrage an das Netzwerk
       Return Fetch (Event.Request)
         .das ((Antwort) = & gt; {
           // Cache die Antwort
           cache.put (Event.Request, Antwort.Clone ());
           // Geben Sie die ursprüngliche Antwort auf die Seite zurück
           Rückgabe der Rücksendung;
         });
     })
 ); 

Dadurch wird die Anforderung an das Netzwerk weitergeleitet, und speichern Sie die Antwort im Cache, bevor Sie die ursprüngliche Antwort an die Seite senden.

Es ist erwähnenswert, dass dieser Ansatz die Antworten nicht eigentlich sperren wird, bis der Benutzer die Seite lädt. Das erste Mal wird den Arbeiter installiert und aktiviert, aber zu der Zeit holen Der Zuhörer ist fertig, alles wird bereits angefordert.

Aktualisieren Sie ein paar Mal und überprüfen Sie den Cache in der Devtools & GT; Anwendungsregisterkarte. Erweitern Sie den Cache-Speicherbaum in der linken Spalte und Sie sollten Ihren Cache mit allen gespeicherten Antworten sehen.

09. aus dem Cache dienen

Alles ist zwischengespeichert, aber eigentlich verwenden wir den Cache nicht, um noch keine Dateien zu dienen. Lass uns das jetzt anschließen. Zuerst suchen wir nach einem Match für die Anforderung im Cache, und wenn es existiert, dienen wir das. Wenn es nicht gibt, verwenden wir das Netzwerk und speichert dann die Antwort.

// Sagen Sie dem Abruf, mit dieser Kette zu antworten
 Event.respondit (
   // den Cache öffnen
   Cache.Open (AssetsCacheName)
     .das ((cache) = & gt; {
       // Suchen Sie nach passender Anforderung im Cache
       cache.match zurückgeben (Event.Request)
         .das (((abgestimmt) = & gt; {
           // Wenn eine Übereinstimmung gefunden wird, gibt die zwischengespeicherte Version zuerst zurück
           Wenn (abgestimmt) {
             Rückkehr abgestimmt;
           }
           // Ansonsten weiter zum Netzwerk
           Return Fetch (Event.Request)
             .das ((Antwort) = & gt; {
               // Cache die Antwort
               cache.put (Event.Request, Antwort.Clone ());
               // Geben Sie die ursprüngliche Antwort auf die Seite zurück
               Rückgabe der Rücksendung;
             });
         });
     })
); 

Speichern Sie die Datei und aktualisieren Sie. Überprüfen Sie Devtools & GT; Netzwerkregisterkarte und Sie sollten (von Servicworker) sehen (von SERVICEcer), die in der Spalte Größen für jedes statische Assets aufgeführt sind.

Puh, wir sind fertig. Für einen solchen kleinen Code ist es viel zu verstehen. Sie sollten sehen, dass er aktualisiert wird

Ohne den Service-Arbeiter dauert das Laden über ein simuliertes schnelles 3G-Netzwerk fast 30 Sekunden, bis alles laden. Mit dem Service-Arbeiter mit derselben gedrosselten Verbindung, aber das Laden aus dem Cache dauert knapp eine Sekunde.

Überprüfen Sie das Offline-Feld und aktualisieren Sie, und Sie werden auch angezeigt, dass die Seite ohne Verbindung lädt, obwohl wir die Prognosedaten nicht von der API erhalten können. Auf Seite 2 kehren wir dazu zurück und lernen, die API-Antwort zu cache-API.

Nächste Seite: Verwenden Sie den Service-Arbeiter, um den Online-Zugriff anbieten zu können

• 1.
• 2.

Aktuelle Seite: Seite 1: schnelleres Laden