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.org.cn/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 |
浏览器兼容性
加载中…