ServiceWorker: statechange イベント

statechange イベントは、ServiceWorker.state が変化するたびに発行されます。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

onstatechange = (event) => {};

イベント型

一般的な Event です。

例

このコードスニペットは、サービスワーカーの登録イベントサンプル（ライブデモ）に掲載されています。このコードは、ServiceWorker.state の変化を待ち受け、その値を返しています。

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);
  });
}

statechange が発行されたとき、サービスワーカーの参照先が変わっていることがあることに注意してください。例えば次のようになります。

js
navigator.serviceWorker.register("/sw.js").then((swr) => {
  swr.installing.state = "installing";
  swr.installing.onstatechange = () => {
    swr.installing = null;
    // この時点で、swr.waiting または swr.active が true になっているかもしれません。
    // これは、statechange イベントがキューに入れられ、その間に基盤のワーカーが
    // 待機状態になり、使用可能であればすぐに起動されるからです。
  };
});

仕様書

Specification
Service Workers
# dom-serviceworker-onstatechange

ブラウザーの互換性

BCD tables only load in the browser