The statechange
event fires anytime the ServiceWorker.state
changes.
The statechange
event fires anytime the ServiceWorker.state
changes.
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("statechange", (event) => {}); onstatechange = (event) => {};
A generic Event
.
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.
js
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:
js
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. }; });
Specification |
---|
Service Workers # dom-serviceworker-onstatechange |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
statechange_event |
40 | 17 | 44 | No | 27 | 11.1 | 40 | 40 | 44 | 27 | 11.3 | 4.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/statechange_event