ServiceWorker: evento statechange
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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
| Specification |
|---|
| Service Workers Nightly # dom-serviceworker-onstatechange |