后台获取 API

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

后台同步 API 提供了一种方法，使服务工作者可以延迟处理，直到用户连接；但是，它不能用于长时间运行的任务，例如下载大型文件。后台同步需要服务工作者保持活动状态，直到获取完成，为了节省电池电量并防止后台发生不需要的任务，浏览器将在某个时间点终止任务。

后台获取 API 解决了此问题。它为 Web 开发人员提供了一种方法，让他们可以告诉浏览器在后台执行一些获取操作，例如，当用户单击按钮下载视频文件时。然后，浏览器以用户可见的方式执行获取操作，向用户显示进度并为他们提供取消下载的方法。下载完成后，浏览器将打开服务工作者，此时您的应用程序可以根据需要对响应执行某些操作。

如果用户在脱机状态下启动了过程，后台获取 API 将启用获取操作。一旦他们连接，它就会开始。如果用户脱机，则该过程将暂停，直到用户再次上线。

BackgroundFetchManager 实验性

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

BackgroundFetchRegistration 实验性

表示后台获取。

BackgroundFetchRecord 实验性

表示单个获取请求和响应。

BackgroundFetchEvent 实验性

backgroundfetchabort 和 backgroundfetchclick 事件的事件类型

BackgroundFetchUpdateUIEvent 实验性

backgroundfetchsuccess 和 backgroundfetchfail 事件的事件类型

ServiceWorkerRegistration.backgroundFetch 只读 实验性

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

backgroundfetchabort 事件 实验性

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

backgroundfetchclick 事件 实验性

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

backgroundfetchfail 事件 实验性

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

backgroundfetchsuccess 事件 实验性

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

在使用后台获取之前，请检查浏览器支持情况。

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

使用后台获取需要注册的服务工作者。然后调用 backgroundFetch.fetch() 执行获取操作。这将返回一个 Promise，该 Promise 解析为 BackgroundFetchRegistration。

后台获取可能会获取多个文件。在我们的示例中，获取请求了一个 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,
    },
  );
});

您可以在此处找到一个实现了后台获取的演示应用程序 here。

• 介绍后台获取
• 后台获取 - HTTP 203