ServiceWorkerContainer

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中可用。

注意：此功能在Web Workers中可用。

ServiceWorkerContainer 是Service Worker API 的一个接口，它提供一个对象来表示网络生态系统中 service worker 的整体单元，包括用于注册、注销和更新 service worker 的功能，以及访问 service worker 及其注册的状态。

最重要的是，它公开用于注册 service worker 的 ServiceWorkerContainer.register() 方法，以及用于确定当前页面是否被 service worker 主动控制的 ServiceWorkerContainer.controller 属性。

目前，service worker 只能在某些或所有浏览器中的 Window 范围内注册，因为 ServiceWorkerContainer 对象未公开给 DedicatedWorkerGlobalScope 和 SharedWorkerGlobalScope。有关信息，请查看浏览器兼容性。

实例属性

ServiceWorkerContainer.controller 只读: 如果其状态为 activating 或 activated，则返回一个 ServiceWorker 对象（与 ServiceWorkerRegistration.active 返回的相同对象）。如果强制刷新请求（Shift + 刷新）或没有活动的 worker，则此属性返回 null。
ServiceWorkerContainer.ready 只读: 提供一种方法，可以延迟代码执行，直到 service worker 处于活动状态。它返回一个 Promise，该 promise 永远不会拒绝，并且会无限期地等待，直到与当前页面关联的 ServiceWorkerRegistration 拥有一个 ServiceWorkerRegistration.active worker。一旦满足该条件，它将解析为 ServiceWorkerRegistration。

实例方法

ServiceWorkerContainer.getRegistration(): 获取一个 ServiceWorkerRegistration 对象，其范围与提供的文档 URL 匹配。该方法返回一个 Promise，该 promise 解析为 ServiceWorkerRegistration 或 undefined。
ServiceWorkerContainer.getRegistrations(): 以数组形式返回与 ServiceWorkerContainer 关联的所有 ServiceWorkerRegistration 对象。该方法返回一个 Promise，该 promise 解析为一个包含 ServiceWorkerRegistration 的数组。
ServiceWorkerContainer.register(): 为给定的 scriptURL 创建或更新 ServiceWorkerRegistration。
ServiceWorkerContainer.startMessages(): 显式地启动从 service worker 分派到其控制下的页面的消息流（例如，通过 Client.postMessage() 发送）。这可以用于更早地响应已发送的消息，甚至在该页面的内容完成加载之前。

事件

controllerchange: 当文档的关联 ServiceWorkerRegistration 获取新的 active worker 时发生。
error 已弃用非标准: 每当关联的 service worker 中发生错误时触发。
message: 当 ServiceWorkerContainer 对象收到传入消息时发生（例如，通过 MessagePort.postMessage() 调用）。
messageerror: 当 ServiceWorkerContainer 对象无法反序列化传入消息时发生（例如，通过 MessagePort.postMessage() 调用）。

示例

下面的示例首先检查浏览器是否支持 service worker。如果支持，代码将注册 service worker 并确定页面是否由 service worker 主动控制。如果不是，它将提示用户重新加载页面，以便 service worker 可以接管。代码还会报告任何注册失败。

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

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

实例属性

实例方法

事件

示例

规范

浏览器兼容性

另请参阅