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