ServiceWorkerContainer
Baseline 廣泛可用 *
注意：此功能在 Web Workers 中可用。
ServiceWorkerContainer 介面是 Service Worker API 的一部分，它提供了一個物件，代表著網路生態系統中作為整體的服務工作執行緒。它包含了註冊、登出、更新服務工作執行緒以及訪問服務工作執行緒及其註冊狀態的功能。
最重要的是，它暴露了用於註冊服務工作執行緒的 ServiceWorkerContainer.register() 方法，以及用於確定當前頁面是否被主動控制的 ServiceWorkerContainer.controller 屬性。
ServiceWorkerContainer 物件透過 Navigator.serviceWorker 在 Window 作用域中暴露，並在 Worker 中透過 WorkerNavigator.serviceWorker 暴露（如果支援——請檢查 瀏覽器相容性）。
例項屬性
ServiceWorkerContainer.controller只讀-
一個
ServiceWorker物件，代表控制當前頁面的活動服務工作執行緒，如果頁面沒有活動或正在啟用的服務工作執行緒，則為null。 ServiceWorkerContainer.ready只讀-
返回一個
Promise，該 Promise 在有活動服務工作執行緒時，會解析為與當前頁面關聯的ServiceWorkerRegistration。這提供了一種機制，可以在服務工作執行緒啟用之前推遲程式碼執行。
例項方法
ServiceWorkerContainer.getRegistration()-
獲取作用域與提供的文件 URL 匹配的
ServiceWorkerRegistration物件。該方法返回一個Promise，該 Promise 會解析為ServiceWorkerRegistration或undefined。 ServiceWorkerContainer.getRegistrations()-
返回與
ServiceWorkerContainer關聯的所有ServiceWorkerRegistration物件組成的陣列。該方法返回一個Promise，該 Promise 會解析為一個ServiceWorkerRegistration物件陣列。 ServiceWorkerContainer.register()-
為給定的
scriptURL建立或更新一個ServiceWorkerRegistration。 ServiceWorkerContainer.startMessages()-
顯式地啟動從服務工作執行緒分發到其控制的頁面的訊息流（例如，透過
Client.postMessage()傳送）。這可用於更早地響應傳送的訊息，甚至在頁面內容載入完成之前。
事件
controllerchange-
當文件關聯的
ServiceWorkerRegistration獲得新的active工作執行緒時觸發。 message-
當
ServiceWorkerContainer物件收到傳入訊息時觸發（例如，透過MessagePort.postMessage()呼叫）。 messageerror-
當
ServiceWorkerContainer物件無法反序列化傳入訊息時觸發（例如，透過MessagePort.postMessage()呼叫）。
示例
下面的示例首先檢查瀏覽器是否支援服務工作執行緒。如果支援，程式碼將註冊服務工作執行緒，並確定頁面是否已被服務工作執行緒主動控制。如果不是，它會提示使用者重新載入頁面以便服務工作執行緒接管。程式碼還會報告任何註冊失敗的情況。
if ("serviceWorker" in navigator) {
// Register a service worker hosted at the root of the
// site using the default scope.
navigator.serviceWorker
.register("/sw.js")
.then((registration) => {
console.log("Service worker registration succeeded:", registration);
// At this point, you can optionally do something
// with registration. See https://mdn.club.tw/en-US/docs/Web/API/ServiceWorkerRegistration
})
.catch((error) => {
console.error(`Service worker registration failed: ${error}`);
});
// Independent of the registration, let's also display
// information about whether the current page is controlled
// by an existing service worker, and when that
// controller changes.
// First, do a one-off check if there's currently a
// service worker in control.
if (navigator.serviceWorker.controller) {
console.log(
"This page is currently controlled by:",
navigator.serviceWorker.controller,
);
}
// Then, register a handler to detect when a new or
// updated service worker takes control.
navigator.serviceWorker.oncontrollerchange = () => {
console.log(
"This page is now controlled by",
navigator.serviceWorker.controller,
);
};
} else {
console.log("Service workers are not supported.");
}
規範
| 規範 |
|---|
| Service Workers # serviceworkercontainer-interface |
瀏覽器相容性
載入中…