web-dev-qa-db-fra.com

Pourquoi mon technicien est toujours en attente d'activation?

J'ai cette question très basique

Je m'efforce de comprendre le cycle de vie du Service Worker, ou mieux encore, ce qui, concrètement, initialise et modifie les états.

J'ai maintenant 2 questions:

1 - dans chrome://inspect/#service-workers il y a toujours 2 ou 3 lignes, montrant les employés de service fonctionnant tous avec le même PID. Pourquoi? Pourquoi pas un seul?

2- Lorsque j'inspecte mon employé de service lors de l'actualisation, j'ai obtenu ceci:

  • # 566 activé et en cours d'exécution [arrêt]
  • # 570 en attente d'activation [skipWaiting]

Qu'est-ce que ça veut dire? Qu'est-ce que le 566 et le 570? Je suppose que ce sont des exemples du sw, mais pourquoi il y en a deux? Et pourquoi 570 attend toujours? Que dois-je faire pour m'assurer qu'il sera enregistré-installé-activé?

3- Questions générales

  • Qu'est-ce qui termine l'événement install dans un cycle de vie normal?
  • Qu'est-ce qui déclenche l'événement activer dans un cycle de vie normal?

index.html

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('./sw.js')
      .then(function(registration) {
        // successful
        console.log('Success: ', registration);
      }).catch(function(err) {
        // registration failed
        console.log('Error: ', err);
      });
    });
  }
  </script>

sw.js

var cache_name = 'v1';

var cache_files = [
  './',
  './index.html',
  './style.css'
]

self.addEventListener('install', function(e){
  console.log('SW install:', e);
  e.waitUntil(
    caches.open(cache_name)
    .then(function(cache){
      console.log('cache', cache);
      return cache.addAll(cache_files);
    })
    .then(function(cache){
      console.log('Cache completed');
    })
  )
});

self.addEventListener('activate', function(event) {
  console.log('SW activate:', event);
});

self.addEventListener('fetch', function(e){
  console.log('SW fetch:', e.request.url)

  e.respondWith(
    caches.match(e.request)
    .then(function(cache_response){
      if(cache_response) return cache_response;

      return fetch(e.request);
    })
    .catch(function(err){
      console.log('Cache error', err)
    })
  );
});

Merci!

javascriptservice-workerservice-worker-events
11
Victor Ferreira

Les identifiants indiqués par Chrome Devtools sont internes. Juste pour le signaler. Donc, ils nomment tous les Service Workers par un identifiant. C'est tout.

La raison d'avoir deux SW en "même temps" est que vous en aviez un, puis vous avez rechargé la page, navigué et revenu, ou quelque chose dans ce sens, et vous en avez obtenu un autre. Mais à ce stade, lorsque vous "venez d'en recevoir un autre", il n'a pas encore été activé et le SW précédent contrôle toujours la page. Le nouveau logiciel prendra le contrôle du logiciel précédent lorsque vous reviendrez sur le site depuis un autre endroit, actualiser la page ne suffit pas. Fondamentalement, cela signifie fermer tous les onglets et toutes les fenêtres de la page, puis la charger à nouveau, puis le nouveau logiciel prend le relais.

Le moment où le nouveau logiciel logiciel n'a pas pris le relais est appelé état d'attente qui se produit entre l'installation et l'activation. Cela peut être ignoré en appelant self.skipWaiting () depuis l'intérieur du gestionnaire d'installation du SW.

L'idée de base derrière ce flux est que la page ne doit pas être contrôlée par un SW qui ne contrôlait pas la page lors du chargement de la page - pour cette raison, la première visite sur un site qui enregistre un SW ne sera pas contrôlée par ce SW , seule la deuxième fois que le SW sera activé, etc.

Vous devriez [~ # ~] vraiment [~ # ~] lire ce brillant article: Le Cycle de vie des travailleurs de service

18
pate