Service Worker

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

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

ServiceWorker 接口是 Service Worker API 的一部分，它提供了一个对 service worker 的引用。多个浏览上下文（例如页面、工作线程等）可以通过唯一的 ServiceWorker 对象关联到同一个 service worker。

可以通过一些属性访问 ServiceWorker 对象

ServiceWorker 接口会分派一组生命周期事件 — install 和 activate — 以及包括 fetch 在内的功能事件。ServiceWorker 对象具有一个关联的ServiceWorker.state，与它的生命周期相关。

如果支持，service worker 允许使用import静态导入ECMAScript 模块。规范不允许动态导入 — 调用import() 会抛出异常。

在某些或所有浏览器中，service worker 只能在 Window 作用域中注册，因为 ServiceWorker 对象不会暴露给DedicatedWorkerGlobalScope 和SharedWorkerGlobalScope。请查看浏览器兼容性以获取信息。

EventTarget ServiceWorker

实例属性

ServiceWorker 接口继承了其父级EventTarget的属性。

ServiceWorker.scriptURL 只读

返回作为 ServiceWorkerRegistration一部分定义的 ServiceWorker 序列化脚本 URL。此 URL 必须与注册 ServiceWorker 的文档位于同一来源。

ServiceWorker.state 只读

返回 service worker 的状态。它返回以下值之一：parsed、installing、installed、activating、activated 或 redundant。

实例方法

ServiceWorker 接口继承了其父级EventTarget的方法。

ServiceWorker.postMessage()

向 service worker 发送消息 — 由任何结构化可克隆 JavaScript 对象组成。该消息使用其全局作用域上的message 事件传输到 service worker。

事件

statechange

当ServiceWorker.state 发生更改时触发。

error

当 ServiceWorker 对象内部发生错误时触发。

示例

此代码片段来自service worker registration-events 示例（实时演示）。该代码侦听ServiceWorker.state的任何更改并返回其值。

js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("service-worker.js", {
      scope: "./",
    })
    .then((registration) => {
      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);
        });
      }
    })
    .catch((error) => {
      // Something went wrong during registration. The service-worker.js file
      // might be unavailable or contain a syntax error.
    });
} else {
  // The current browser doesn't support service workers.
  // Perhaps it is too old or we are not in a Secure Context.
}

规范

规范
Service Workers
# serviceworker-interface

浏览器兼容性

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

另请参阅