ServiceWorker: statechange 事件
注意：此功能在 Web Workers 中可用。
當 ServiceWorker.state 發生變化時，就會觸發 statechange 事件。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("statechange", (event) => { })
onstatechange = (event) => { }
事件型別
一個通用的 Event。
示例
此程式碼片段來自 service worker registration-events 示例（即時演示）。程式碼會監聽 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 觸發時，service worker 的引用可能已經改變。例如
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.
};
});
規範
| 規範 |
|---|
| Service Workers # dom-serviceworker-onstatechange |
瀏覽器相容性
載入中…