JavaScript Un simple travailleur de service


Exemple

main.js

Un travailleur de service est un travailleur piloté par des événements enregistré sur une origine et un chemin. Il se présente sous la forme d'un fichier JavaScript capable de contrôler la page Web / le site auquel il est associé, d'intercepter et de modifier les demandes de navigation et de ressources et de mettre en cache les ressources de manière très précise. (le plus évident étant lorsque le réseau n'est pas disponible.)

Source: MDN

Quelques choses:

  1. C'est un JavaScript Worker, donc il ne peut pas accéder directement au DOM
  2. C'est un proxy réseau programmable
  3. Il sera terminé lorsqu'il ne sera pas utilisé et redémarré dès qu'il sera nécessaire
  4. Un agent de maintenance a un cycle de vie complètement distinct de votre page Web.
  5. HTTPS est nécessaire

Ce code qui sera exécuté dans le contexte Document (ou) ce JavaScript sera inclus dans votre page via une <script> .

// we check if the browser supports ServiceWorkers
if ('serviceWorker' in navigator) {
  navigator
    .serviceWorker
    .register(
      // path to the service worker file
      'sw.js'
    )
    // the registration is async and it returns a promise
    .then(function (reg) {
      console.log('Registration Successful');
    });
}

sw.js

Ceci est le code du travailleur du service et est exécuté dans la portée globale de ServiceWorker .

self.addEventListener('fetch', function (event) {
  // do nothing here, just log all the network requests
  console.log(event.request.url);
});