ServiceWorker

Baseline 广泛可用 *

此功能已成熟，可跨多种设备和浏览器版本工作。它自 ⁨2018 年 4 月⁩ 起已在所有浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

安全上下文： 此功能仅在安全上下文（HTTPS）中可用，且支持此功能的浏览器数量有限。

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

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

可以通过以下几个属性来访问 ServiceWorker 对象：

ServiceWorkerRegistration.active
ServiceWorkerGlobalScope.serviceWorker
ServiceWorkerContainer.controller — 当 service worker 处于 activating 或 activated 状态时
ServiceWorkerRegistration.installing — 当 service worker 处于 installing 状态时
ServiceWorkerRegistration.waiting — 当 service worker 处于 installed 状态时

可以通过 ServiceWorker 对象的 state 属性和 statechange 事件来检查和观察其生命周期状态的变化。相关的生命周期事件，例如 install 和 activate 会在 service worker 本身触发。

如果浏览器支持，service worker 可以使用 import 语句静态导入 ECMAScript 模块。根据规范，不允许动态导入 — 调用 import() 将会抛出错误。

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

实例属性

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

ServiceWorker.scriptURL 只读: 返回在 ServiceWorkerRegistration 中定义的 service worker 的序列化脚本 URL。该 URL 必须与注册 service worker 的文档同源。
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 的任何变化并返回其值。

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年6月23日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题