Heim > Web-Frontend > js-Tutorial > Hauptteil

Neues JavaScript-Wissen: Servicemitarbeiter

阿神
Freigeben: 2017-01-24 14:30:41
Original
1360 Leute haben es durchsucht

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
Nach dem Login kopieren

Der Inhalt der Datei index.html lautet:

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

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 = &#39;v1::static&#39;;    self.addEventListener(&#39;install&#39;, e => {
      e.waitUntil(
        caches.open(cacheName).then(cache => {          return cache.addAll([            &#39;/&#39;,
          ]).then(() => self.skipWaiting());
        })
      );
    });    self.addEventListener(&#39;fetch&#39;, event => {
      event.respondWith(
        caches.open(cacheName).then(cache => {          return cache.match(event.request).then(res => {            return res || fetch(event.request)
          });
        })
      );
    });
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

npm i http-server 
    http-server
Nach dem Login kopieren

Zugriff:

http://localhost:8080/index.html
Nach dem Login kopieren

und

http://localhost:8080/b.html
Nach dem Login kopieren

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

 http://localhost:8080/b.html
Nach dem Login kopieren

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
Nach dem Login kopieren

Sie können weitere Details wie folgt sehen:

 chrome://serviceworker-internals/
Nach dem Login kopieren

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
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!