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 上檢視此頁面 • 報告此內容的問題