后台运行 Fetch API 实战Service Worker API 正在不断扩展，用以容纳越来越多的后台运行程序，我

Service Worker API 正在不断扩展，用以容纳越来越多的后台运行程序，我曾经写过关于推送通知（Push Notifications）与后台同步（Background Sync），最近我探索出了如何在后台运行 Fetch API，下面就给大家介绍下具体情况。

原文地址：philna.sh/blog/2017/0…

发表于 2017年7月4日由菲尔·纳什

下载和上传

后台运行 fetch API 可以解决以下两个问题：

当 Service Worker 正在下载大型文件，用户离开浏览器，即使使用event.waitUntil， Service Worker 的进程依然会被杀死
当上传文件的时候，用户离开浏览器，上传也会被中断，导致上传失败。

后台运行 fetch API 允许开发人员离开当前的页面，进行加载和操作大文件或文件列表。这样可以加大上传和下载的成功率，并允许sevice worker 缓存结果。

在写这篇文章的时候，这个功能已经支持测试了。可以打开在chrome 中打开 chrome://flags 进行设置。

举一个例子

我决定构建一个简单的概念来证明 API 的工作原理。案例的在线运行地址，或者你可以查看并运行GitHub的源代码。我不想随便加载一个大文件，所以这个例子试图加载一个10秒延迟的图像（在Glitch上4.5秒）。

如果图片有缓存，service worker 为直接从缓存提供图像，否则发起网络请求。

// sw.js
self.addEventListener('fetch', function(event) {
  if (event.request.url.match(/images/)) {
    event.respondWith(
      caches.open('downloads').then(cache => {
        return cache.match(event.request).then(response => {
          return response || fetch(event.request);
        });
      })
    );
  } else {
    event.respondWith(caches.match(event.request));
  }
});

标准的 Service Worker 只是到这来为止，接下来我们介绍点儿新的东西。

点击“开始下载”按钮将启动后台读取。读取被标记为“大文件”的东西（我是这样想像的）。当后台下载正在进行时，您可以离开页面，下载将在后台继续工作。

// index.html
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(reg) {
    const button = document.getElementById('download');
    if ('backgroundFetch' in reg) {
      button.addEventListener('click', function(event) {
        reg.backgroundFetch.fetch('large-file', [new Request('/images/twilio.png')], {
          title: 'Downloading large image'
        }).then(function(backgroundFetch) { console.log(backgroundFetch) });
      })
    }
  });
}

当下载完成时，Service Worker 会触发 backgroundfetched 事件。该事件有一个 fetches 属性的数组对象，指向包含每个请求和响应。循环 fetches（即使只有一个，代码也要循环一下），将响应放入缓存。

self.addEventListener('backgroundfetched', function(event) {
  event.waitUntil(
    caches.open('downloads').then(function(cache) {
      event.updateUI('Large file downloaded');
      registration.showNotification('File downloaded!');
      const promises = event.fetches.map(({ request, response }) => {
        if (response && response.ok) {
          return cache.put(request, response.clone());
        }
      });
      return Promise.all(promises);
    })
  );
});

现在，当请求图像时，它将直接从 Service Worker 缓存中获取，不再需要下载，加载变得很快。

如果您对后台运行API感兴趣，则有关GitHub提案的更多示例和讨论。如果您对浏览器的未来可支持的功能感兴趣，请在Twitter上给我留言。

如果你喜欢这篇文章，请分享

后台运行 Fetch API 实战

下载和上传

举一个例子

后台运行 API 的想法

音频难题

弹出下载

UI 如何？

对未来的展望