ExtendableEvent

作为 service worker 生命周期的一部分，ExtendableEvent 接口延长了在全局范围上 install 和 activate 事件的生命周期。这样可以确保在升级数据库架构并删除过时的 caches 之前，不会调度任何函数事件（如FetchEvent）。如果在ExtendableEvent处理程序之外调用waitUntil()，浏览器应该抛出一个InvalidStateError；还要注意，多个调用将堆积起来，结果 promises 将添加到extend lifetime promises.

备注： 上述段落中描述的行为在 firefox 43 中得到了修复（参见 Firefox bug 1180274）。

此接口继承自Event接口。

must be a string

备注： 只有当全局范围是 ServiceWorkerGlobalScope 时，此接口才可用。当它是一个 Window 或其他类型 worker 的作用域时，它不可用。

构造函数

ExtendableEvent()

创建新的ExtendableEvent对象。

特性

不实现任何特定属性，但从其父级事件继承属，Event。

方法

从他的父辈继承，Event。

ExtendableEvent.waitUntil()

延长事件的生存期。它将在 service worker 的 install 和 activate 事件中被调用。

实例

代码片段来自service worker prefetch sample (查看 prefetch example live.)。代码在ServiceWorkerGlobalScope.oninstall中调用ExtendableEvent.waitUntil()，延迟将ServiceWorkerRegistration.installing Worker 视为已安装，直到传递的 promise resolve(在所有资源都已被提取和缓存的情况，或者发生任何异常时的问题.)

代码段还显示了对 service worker 使用的缓存进行版本控制的最佳实践。虽然在这个例子中只有一个缓存，但是相同的方法可以用于多个缓存。它将缓存的速记标识符映射到特定的、版本化的缓存名称。

备注： 在 chrome 中，日志记录语句通过 chrome://service worker internals 访问的相关服务工作者的“inspect”接口可见。

js
var CACHE_VERSION = 1;
var CURRENT_CACHES = {
  prefetch: "prefetch-cache-v" + CACHE_VERSION,
};

self.addEventListener("install", function (event) {
  var 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(function (cache) {
        cache
          .addAll(
            urlsToPrefetch.map(function (urlToPrefetch) {
              return new Request(urlToPrefetch, { mode: "no-cors" });
            }),
          )
          .then(function () {
            console.log("All resources have been fetched and cached.");
          });
      })
      .catch(function (error) {
        console.error("Pre-fetching failed:", error);
      }),
  );
});

备注： 在获取资源时，如果有可能资源是由不支持 CORS 的服务器提供的，那么使用 {mode: 'no-cors'} 非常重要。在本例中， www.chromium.org 不支持 CORS。

规范

Specification
Service Workers
# extendableevent-interface

浏览器兼容性

BCD tables only load in the browser

参见