安装事件

传入 install 事件处理程序函数的参数，InstallEvent 接口表示在 ServiceWorkerGlobalScope 的 ServiceWorker 上分派的安装操作。作为 ExtendableEvent 的子类，它确保在安装期间不会分派诸如 FetchEvent 之类的功能事件。

此接口继承自 ExtendableEvent 接口。

Event ExtendableEvent InstallEvent

构造函数

InstallEvent()

创建一个新的 InstallEvent 对象。

实例属性

继承自其父类 ExtendableEvent 的属性.

实例方法

继承自其父类 ExtendableEvent 的方法.

addRoutes()

指定一个或多个静态路由，这些路由定义了获取指定资源的规则，这些资源甚至在服务工作者启动之前就会使用。

示例

此代码片段来自 服务工作者预取示例（查看 实时运行的预取）。代码在 ServiceWorkerGlobalScope.oninstall 中调用 ExtendableEvent.waitUntil()，并在传递的 promise 成功解析之前延迟将 ServiceWorkerRegistration.installing 工作者视为已安装。当所有资源都已获取并缓存，或当发生任何异常时，promise 会解析。

代码片段还展示了服务工作者使用缓存的版本控制的最佳实践。虽然此示例只有一个缓存，但您可以将此方法用于多个缓存。代码将缓存的简写标识符映射到特定版本化的缓存名称。

注意：日志语句可以通过 chrome://serviceworker-internals 访问的相关服务工作者的“检查”界面在 Google Chrome 中查看。

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

规范

规范
Service Workers
# installevent

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅