ExtendableEvent

Baseline 已廣泛支援

此功能已成熟，可跨多種裝置和瀏覽器版本工作。它自 ⁨2018 年 4 月⁩ 起已在所有瀏覽器中可用。

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

ExtendableEvent 介面擴充套件了在服務工作執行緒生命週期中分派到全域性作用域的 install 和 activate 事件的生命週期。這確保了任何功能性事件（如 FetchEvent）在升級資料庫模式和刪除過時快取條目之前不會被分派。

如果在 ExtendableEvent 處理程式之外呼叫 waitUntil()，瀏覽器應丟擲 InvalidStateError；另請注意，多次呼叫將堆疊起來，並且生成的 Promise 將被新增到 extend lifetime promises 列表中。

此介面繼承自 Event 介面。

注意：此介面僅在全域性作用域為 ServiceWorkerGlobalScope 時可用。當它是 Window 或其他型別的 worker 的作用域時，它不可用。

建構函式

ExtendableEvent(): 建立一個新的 ExtendableEvent 物件。

例項方法

繼承自其父級 Event 的方法.

ExtendableEvent.waitUntil(): 擴充套件事件的生命週期。它旨在被呼叫在 installing worker 的 install 事件處理程式中，以及在 active worker 的 activate 事件處理程式上。

此程式碼片段來自 service worker prefetch sample（請參閱 prefetch 示例線上）。該程式碼在 oninstall 中呼叫 ExtendableEvent.waitUntil()，推遲將 ServiceWorkerRegistration.installing worker 視為已安裝，直到傳入的 Promise 成功解析。當所有資源都已獲取並快取，或者發生任何異常時，Promise 就會解析。

該程式碼片段還展示了服務工作執行緒使用的快取版本控制的最佳實踐。儘管此示例中只有一個快取，但相同的方法可用於多個快取。它將快取的簡寫識別符號對映到特定的、已版本的快取名稱。

注意：在 Chrome 中，可以透過 "Inspect" 介面檢視與相關服務工作執行緒相關的日誌記錄語句，該介面可透過 chrome://serviceworker-internals 訪問。

const CACHE_VERSION = 1;
const CURRENT_CACHES = {
  prefetch: `prefetch-cache-v${CACHE_VERSION}`,
};

self.addEventListener("install", (event) => {
  const urlsToPrefetch = [
    "./static/pre_fetched.txt",
    "./static/pre_fetched.html",
    "https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
  ];

  console.log(
    "Handling install event. Resources to pre-fetch:",
    urlsToPrefetch,
  );

  event.waitUntil(
    caches
      .open(CURRENT_CACHES["prefetch"])
      .then((cache) =>
        cache.addAll(
          urlsToPrefetch.map(
            (urlToPrefetch) => new Request(urlToPrefetch, { mode: "no-cors" }),
          ),
        ),
      )
      .then(() => {
        console.log("All resources have been fetched and cached.");
      })
      .catch((error) => {
        console.error("Pre-fetching failed:", error);
      }),
  );
});

注意：在獲取資源時，如果資源可能由不支援 CORS 的伺服器提供，則使用 {mode: 'no-cors'} 非常重要。在此示例中，www.chromium.org 不支援 CORS。