ServiceWorker: statechange event

The statechange event fires anytime the ServiceWorker.state changes.


Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("statechange", (event) => {});

onstatechange = (event) => {};

Event type

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.

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 ( {
  serviceWorker =;
  document.querySelector("#kind").textContent = "active";

if (serviceWorker) {
  serviceWorker.addEventListener("statechange", (e) => {

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 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.


Service Workers
# dom-serviceworker-onstatechange

Browser compatibility

BCD tables only load in the browser