ServiceWorker: statechange event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The statechange event fires anytime the ServiceWorker.state changes.
Syntax
Use the event name in addEventListener():
addEventListener("statechange", (event) => { })
Alternatively, assign to the event handler property of the interface:
onstatechange = (event) => { }
Event type
A generic Event.
Examples
This code snippet is from the service worker registration-events sample (live demo). The code listens for any change in the ServiceWorker.state
and returns its value.
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);
});
}
Note that when statechange fires, the service worker's references may have
changed. For example:
navigator.serviceWorker.register("/sw.js").then((swr) => {
swr.installing.state = "installing";
swr.installing.onstatechange = () => {
swr.installing = null;
// At this point, swr.waiting OR swr.active might be true. This is because the statechange
// event gets queued, meanwhile the underlying worker may have gone into the waiting
// state and will be immediately activated if possible.
};
});
Specifications
| Specification |
|---|
| Service Workers Nightly # dom-serviceworker-onstatechange |