Nouvelles connaissances JavaScript : service Workers

La technologie front-end se rapproche de la technologie de bureau, et l'une des plus importantes est celle des service Workers, qui permettent aux applications HTML de fonctionner hors ligne. Cet article illustrera cette technologie avec un simple code de cas. Outils que j'utilise :

1. La version du navigateur est chrome 55

2 Système serveur : Node 5.0

Nous devons préparer 3 fichiers :

touch  index.html b.html sw.js

Le contenu du fichier index.html est :

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

Il enregistre un service worker, le nom du fichier est sw.js, un fichier de code JavaScript. Le fichier vraiment clé est donc sw.js, son contenu est :

   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)
          });
        })
      );
    });

En tant qu'événement, l'installation sera appelée lorsque ServiceWorker est chargé pour la première fois. Ici, vous pouvez effectuer un travail d'initialisation, A. le travail typique consiste à charger dans le cache les fichiers qui seront nécessaires en mode hors connexion. Ici, nous spécifions "/", donc tout contenu sera mis en cache.

Le deuxième événement est fetch, qui est appelé lors de l'accès à des ressources distantes. Une correspondance peut être faite ici. S'il y a une ressource dans le cache, la ressource dans le cache sera renvoyée, sinon elle sera récupérée à distance.

Le troisième fichier b.html est un fichier pour démontrer l'effet hors ligne. Le contenu est :

<h1>serviceWorker B</h1>

Bien que vous puissiez installer le serveur http et l'exécuter dans le chemin actuel :

npm i http-server 
    http-server

Accès :

http://localhost:8080/index.html

et

http://localhost:8080/b.html

Ensuite, fermez le serveur http et visitez à nouveau

 http://localhost:8080/b.html

et vous pourrez accédez-y ~ , et c'est l'effet de la mise en œuvre hors ligne.

Eh bien, si vous souhaitez vérifier l'état de fonctionnement des techniciens de service, vous pouvez également utiliser l'URL suivante :

 chrome://inspect/#service-workers

Vous pouvez voir plus de détails comme celui-ci :

 chrome://serviceworker-internals/

Ici, vous pouvez démarrer, annuler l'inscription et d'autres opérations.

Vous pouvez vérifier sa mise en œuvre, ce n'est pas si optimiste :

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