ExtendableEvent - 扩展了 install 和 activate 事件的生命周期

ExtendableEvent 接口扩展了 install 和 activate 事件的生命周期，它们作为服务 worker 生命周期一部分，在全局作用域上调度。这可确保在升级数据库并删除过时的缓存条目之前，不会调度任何功能事件（如FetchEvent）。

如果在 ExtendableEvent 处理程序之外调用 waitUntil()，则浏览器将抛出 InvalidStateError；另请注意，多个调用将叠加，并且生成的 promise 将添加到 extend lifetime promises 列表中。

注意：上一段中描述的行为在 Firefox 43 中得到修复（参见 Mozilla bug 1180274。）

该接口继承了 Event 接口。

注意：该接口仅在全局范围为 ServiceWorkerGlobalScope 时可用。当它是 Window 或其他类型的工作者的范围时，它不可用。

构造函数

ExtendableEvent()

创建一个新的 ExtendableEvent 对象。

属性

不实现任何自有属性，但从其父接口 Event 继承了属性。

方法

从其接口 Event 继承了方法。

ExtendableEvent.waitUntil()

扩展了事件的生命周期。它旨在 install EventHandler 中调用来 安装 worker，在 active EventHandler 中来 激活 worker。

实例

该代码段来自 service worker prefetch sample（请参阅 prefetch 实时实例。）代码在 ServiceWorkerGlobalScope.oninstall 中调用 ExtendableEvent.waitUntil()，延迟处理安装的 ServiceWorkerRegistration.installing worker，直到传递的 promise 成功解析。在获取和缓存所有资源时，或者在发生任何异常时，promise 将被解析。

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

注意：在 Chrome 中，通过右键菜单的 “检查” 操作可以看到通过 chrome://serviceworker-internals 访问的相关服务 worker 的日志记录语句。

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('处理安装事件。要预取的资源：', 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('已获取并缓存所有资源。');
      });
    }).catch(function(error) {
      console.error('预取失败：', error);
    })
  );
});

重要：获取资源时，如果资源是由不支持 CORS 的服务器提供服务的话，使用 {mode: 'no-cors'} 非常重要。在该实例中，www.chromium.org 不支持 CORS。

规范

规范	状态	备注
Service Workers ExtendableEvent 的定义	编者的草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. Firefox 45 和 52 扩展支持版本（ESR）中已禁用服务 worker（和推送）。

相关链接

• 使用服务 Workers
• 服务 workers 基本代码示例
• ServiceWorker 准备好了吗？
• Promise
• 使用 web workers