Neues JavaScript-Wissen: Servicemitarbeiter

Die Front-End-Technologie nähert sich der Desktop-Technologie, und eine der wichtigsten davon sind Servicemitarbeiter, die es HTML-Apps ermöglichen, offline zu arbeiten. In diesem Artikel wird diese Technologie anhand eines einfachen Fallcodes veranschaulicht. Tools, die ich verwende:

1. Die Browserversion ist Chrome 55

2. Serversystem: Node 5.0

Wir müssen 3 Dateien vorbereiten:

touch  index.html b.html sw.js

Der Inhalt der Datei index.html lautet:

  <script>
    if (&#39;serviceWorker&#39; in navigator) {
      navigator.serviceWorker.register(&#39;/sw.js&#39;);
    }    </script>

Sie registriert einen Servicemitarbeiter, der Dateiname ist sw.js, eine JavaScript-Codedatei. Die eigentliche Schlüsseldatei ist also sw.js, ihr Inhalt ist:

   const cacheName = 'v1::static';    self.addEventListener('install', e => {
      e.waitUntil(
        caches.open(cacheName).then(cache => {          return cache.addAll([            '/',
          ]).then(() => self.skipWaiting());
        })
      );
    });    self.addEventListener('fetch', event => {
      event.respondWith(
        caches.open(cacheName).then(cache => {          return cache.match(event.request).then(res => {            return res || fetch(event.request)
          });
        })
      );
    });

Als Ereignis wird install aufgerufen, wenn der ServiceWorker zum ersten Mal geladen wird. Hier können Sie einige Initialisierungsarbeiten durchführen, A Eine typische Aufgabe besteht darin, Dateien in den Cache zu laden, die offline benötigt werden. Hier geben wir „/“ an, sodass alle Inhalte zwischengespeichert werden.

Das zweite Ereignis ist fetch, das beim Zugriff auf Remote-Ressourcen aufgerufen wird. Hier kann eine Übereinstimmung hergestellt werden, wenn eine Ressource im Cache vorhanden ist, wird die Ressource im Cache zurückgegeben, andernfalls wird sie aus der Ferne abgerufen.

Die dritte Datei b.html ist eine Datei zur Demonstration des Offline-Effekts. Der Inhalt ist:

<h1>serviceWorker B</h1>

Obwohl Sie den http-Server installieren und im aktuellen Pfad ausführen können:

npm i http-server 
    http-server

Zugriff:

http://localhost:8080/index.html

und

http://localhost:8080/b.html

Schließen Sie dann den http-Server und besuchen Sie erneut

 http://localhost:8080/b.html

und Sie können Zugriff darauf~ , und dies ist der Effekt der Offline-Implementierung.

Wenn Sie den Betriebsstatus von Servicemitarbeitern überprüfen möchten, können Sie auch die folgende URL verwenden:

 chrome://inspect/#service-workers

Sie können weitere Details wie folgt sehen:

 chrome://serviceworker-internals/

Hier können Sie die Registrierung und andere Vorgänge starten, abbrechen.

Sie können die Umsetzung überprüfen, sie ist nicht so optimistisch:

http://caniuse.com/#feat=serviceworkers