什么是 Web API 中的 background fetch API

在为 Web 编写代码时，有大量可用的 Web API。这个网站列出了您在开发 Web 应用程序或站点时可以使用的所有 API 和接口（对象类型）。

Web API 通常与 JavaScript 一起使用，尽管情况并非总是如此。

这是按照字母排序的。

Background Fetch API

这个 API 提供了可能需要花费很长时间下载的资源下载方法，比如 movies, audio 文件和软件。

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

以前曾经有一个后台同步下载 API，能够延迟 service worker 的处理，直到用户重新处于连接状态。但是它不能用于长时间运行的任务，例如下载大文件。后台同步要求 Service Worker 保持活动状态直到获取完成，并且为了节省电池寿命并防止在后台发生不需要的任务，浏览器将在某个时候终止任务。

而本文描述的 background fetch API 则不存在这个问题。它为 Web 开发人员创建了一种方法来告诉浏览器在后台执行一些 fetch 操作以进行文件下载，例如当用户单击按钮下载视频文件时。然后浏览器以用户可见的方式执行提取，向用户显示进度并为他们提供取消下载的方法。下载完成后，浏览器会打开 Service Worker，此时您的应用程序可以根据需要对响应执行某些操作。

如果用户在离线状态下启动进程，后台提取 API 将启用提取。一旦它们连接起来，它就会开始。如果用户离线，该过程将暂停，直到用户再次上线。

看个具体的例子。

首先检查浏览器是否支持 background fetch API:

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

下面的例子使用 fetch API 一次性下载多个文件：

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,
  });
});