View in EnglishAlways switch to English

ServiceWorker

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年4月.

* Some parts of this feature may have varying levels of support.

安全上下文: 此特性仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

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

在ServiceWorkerRegistration.active 属性和ServiceWorkerContainer.controller 属性中有一个ServiceWorker 对象——这是一个已激活并在控制页面的 service worker（service worker 成功注册，被控页面已经重新加载）。

ServiceWorker 接口被分配了一系列生命周期事件——install 和activate——以及功能型的事件，包括fetch。一个 ServiceWorker 对象有一个与之关联的ServiceWorker.state，指示着它的生命周期。

实例属性

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

ServiceWorker.scriptURL只读: 返回作为ServiceWorkerRegistration 一部分所定义的 ServiceWorker 序列化脚本 URL。这个 URL 必须和注册该ServiceWorker 的文档处于同一域。
ServiceWorker.state只读: 返回 service worker 的状态。其值可能是如下之一：installing、installed、activating、activated 或redundant。

实例方法

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

事件

ServiceWorker.onstatechange只读: 每当ServiceWorker.state 发生改变时，都会触发。

示例

代码段来自service worker registration-events sample（在线演示）。这段代码监听了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.}