后台抓取 API

概念与用法

当 Web 应用程序要求用户下载大文件时，这通常会带来一个问题，即用户需要保持连接到该页面才能完成下载。如果他们失去连接，关闭标签页或导航离开页面，下载就会停止。

该 Background Synchronization API 提供了一种方法，使服务工作线程能够延迟处理，直到用户在线；但是，它不能用于下载大文件等长时间运行的任务。Background Sync 要求服务工作线程保持活动状态直到 fetch 完成，为了节省电池电量并防止在后台执行不必要的任务，浏览器会在某个时候终止该任务。

Background Fetch API 解决了这个问题。它创建了一种让 Web 开发者告诉浏览器在后台执行某些 fetch 的方法，例如，当用户单击按钮下载视频文件时。然后，浏览器会以用户可见的方式执行 fetch，向用户显示进度并提供取消下载的方法。下载完成后，浏览器将打开服务工作线程，此时您的应用程序可以在需要时处理该响应。

如果用户在离线状态下启动了进程，Background Fetch API 将允许 fetch 继续进行。一旦他们联网，它就会开始。如果用户离线，该过程将暂停，直到用户再次上线。

接口

BackgroundFetchManager 实验性

一个映射，其中键是后台 fetch ID，值是 BackgroundFetchRegistration 对象。

BackgroundFetchRegistration 实验性

表示一个后台 fetch。

BackgroundFetchRecord 实验性

表示单个 fetch 请求和响应。

BackgroundFetchEvent 实验性

用于 backgroundfetchabort 和 backgroundfetchclick 事件的事件类型。

BackgroundFetchUpdateUIEvent 实验性

用于 backgroundfetchsuccess 和 backgroundfetchfail 事件的事件类型。

其他接口的扩展

ServiceWorkerRegistration.backgroundFetch 只读 实验性

返回对 BackgroundFetchManager 对象的引用，该对象管理后台 fetch 操作。

backgroundfetchabort 事件 实验性

当后台 fetch 操作被用户或应用程序取消时触发。

backgroundfetchclick 事件 实验性

当用户单击后台 fetch 操作的 UI 时触发。

backgroundfetchfail 事件 实验性

当后台 fetch 操作中的至少一个请求失败时触发。

backgroundfetchsuccess 事件 实验性

当后台 fetch 操作中的所有请求都成功时触发。

示例

在使用 Background Fetch 之前，请检查浏览器支持情况。

if (!("BackgroundFetchManager" in self)) {
  // Provide fallback downloading.
}

使用 Background Fetch 需要注册服务工作线程。然后调用 backgroundFetch.fetch() 来执行 fetch。这将返回一个解析为 BackgroundFetchRegistration 的 Promise。

后台 fetch 可能会 fetch 多个文件。在我们的示例中，fetch 请求了一个 MP3 和一个 JPEG。这使得可以将用户视为一个项目（例如播客和封面图片）的文件包一次性下载。

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 * 1024 * 1024,
    },
  );
});

您可以在 Introducing Background Fetch 中找到更多代码示例和演示。

规范

浏览器兼容性

api.BackgroundFetchManager

api.BackgroundFetchRegistration

api.BackgroundFetchRecord

另见

• Introducing Background Fetch
• Background Fetch - HTTP 203