ServiceWorker: evento statechange
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde abril de 2018.
Contexto seguro: Esta función está disponible solo en contextos seguros (HTTPS), en algunos o todos los navegadores que lo soportan.
Nota: Esta característica está disponible en Web Workers.
El evento statechange se dispara cada vez que cambia ServiceWorker.state.
Sintaxis
Usa el nombre del evento en métodos como addEventListener(), o establece una propiedad de manejador de eventos.
addEventListener("statechange", (event) => {});
onstatechange = (event) => {};
Tipo de evento
Un Event genérico.
Ejemplos
Este fragmento de código proviene del ejemplo de eventos de registro de service worker (demo en vivo). El código escucha cualquier cambio en ServiceWorker.state y devuelve su valor.
let serviceWorker;
if (registration.installing) {
serviceWorker = registration.installing;
document.querySelector("#kind").textContent = "installing";
} else if (registration.waiting) {
serviceWorker = registration.waiting;
document.querySelector("#kind").textContent = "waiting";
} else if (registration.active) {
serviceWorker = registration.active;
document.querySelector("#kind").textContent = "active";
}
if (serviceWorker) {
logState(serviceWorker.state);
serviceWorker.addEventListener("statechange", (e) => {
logState(e.target.state);
});
}
Ten en cuenta que cuando se dispara statechange, las referencias del service worker pueden haber cambiado. Por ejemplo:
navigator.serviceWorker.register("/sw.js").then((swr) => {
swr.installing.state = "installing";
swr.installing.onstatechange = () => {
swr.installing = null;
// En este punto, swr.waiting O swr.active podrían ser true. Esto se debe a que el evento statechange
// se encola, mientras tanto el worker subyacente puede haber pasado al estado waiting
// y será activado inmediatamente si es posible.
};
});
Especificaciones
| Especificación |
|---|
| Service Workers Nightly # dom-serviceworker-onstatechange |