ServiceWorker.onstatechange

Une propriété EventListener appelée quand un évenement de type statechange est déclenché; c'est le cas dès que le ServiceWorker.state change.

Syntax

ServiceWorker.onstatechange = function(statechangeevent) { ... }
ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )

Examples

Ce fragment de code présente un exemple d'enregistrement d'évenements pour le service worker (démo live). Le code écoute pour tout changement du ServiceWorker.state et retourne sa valeur.

var serviceWorker;
if (registration.installing) {
  serviceWorker = registration.installing;
  document.querySelector('#kind').textContent = 'installé';
} else if (registration.waiting) {
  serviceWorker = registration.waiting;
  document.querySelector('#kind').textContent = 'en attente';
} else if (registration.active) {
  serviceWorker = registration.active;
  document.querySelector('#kind').textContent = 'actif';
}

if (serviceWorker) {
  logState(serviceWorker.state);
  serviceWorker.addEventListener('statechange', function(e) {
  logState(e.target.state);
  });
}

Notez que quand l'évenement statechange est déclenché, la référence du service worker peut avoir changée. Par exemple :

navigator.serviceWorker.register(..).then(function(swr) {
  swr.installing.state == "installé"
  swr.installing.onstatechange = function() {
    swr.installing == null;
    // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement 
    // statechange est mis en queue, pendant que le worker sous jacent est peut être en 
    // état d'attente et sera immédiatement activé si possible.
  }
})

Specifications

Browser compatibility