ServiceWorker.onstatechange
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since avril 2018.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
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.
Syntaxe
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.
}
})
Spécifications
| Specification |
|---|
| Service Workers # dom-serviceworker-onstatechange |
Compatibilité des navigateurs
Loading…