Workbox-background-sync

当您向网络服务器发送数据时，请求有时会失败。这可能是因为用户连接中断，或者服务器已关闭；无论是哪种情况，您通常需要稍后再次尝试发送请求。

新的 BackgroundSync API 是解决此问题的理想解决方案。当 Service Worker 检测到网络请求失败时，可以注册接收 sync 事件，当浏览器认为连接已返回时，就会传递该事件。请注意，即使用户已经离开应用，系统仍可传递同步事件，这比重试失败请求的传统方法有效得多。

Workbox 后台同步旨在让您更轻松地使用 BackgroundSync API，并将其用法与其他 Workbox 模块集成。它还针对尚未实现 BackgroundSync 的浏览器实现了回退策略。

支持 BackgroundSync API 的浏览器会根据由浏览器管理的时间间隔代表您自动重放失败的请求，并且可能会在两次重放尝试之间使用指数退避算法。在原生支持 BackgroundSync API 的浏览器中，每当 Service Worker 启动时，Workbox 后台同步都会自动尝试重新执行。

基本用法

使用后台同步的最简单方法是使用 Plugin，它会自动将失败的请求加入队列，并在将来的 sync 事件触发时重试。

import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60, // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly({
    plugins: [bgSyncPlugin],
  }),
  'POST'
);

BackgroundSyncPlugin 连接到 fetchDidFail 插件回调，并且仅在出现异常（很可能是网络故障）时调用 fetchDidFail。这意味着，如果收到具有 4xx 或 5xx 错误状态的响应，则不会重试请求。如果您想重试导致出现 5xx 状态等问题的所有请求，可以通过向策略添加 fetchDidSucceed 插件来实现：

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

高级用法

Workbox 后台同步还提供了一个 Queue 类，可将其实例化并添加失败的请求。失败的请求存储在 IndexedDB 中，并在浏览器认为连接已恢复（即收到同步事件时）时重试。

创建队列

如需创建 Workbox 后台同步队列，您需要使用一个队列名称（该名称在您的 origin 中必须是唯一的）来构建它：

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

队列名称用作由全局 SyncManager 进行 register() 处理的标记名称的一部分。此名称还可用作 IndexedDB 数据库的对象存储名称。

向队列添加请求

创建队列实例后，可以向其添加失败的请求。您可以通过调用 .pushRequest() 方法来添加失败的请求。例如，以下代码会捕获任何失败的请求，并将其添加到队列中：

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

self.addEventListener('fetch', event => {
  // Add in your own criteria here to return early if this
  // isn't a request that should use background sync.
  if (event.request.method !== 'POST') {
    return;
  }

  const bgSyncLogic = async () => {
    try {
      const response = await fetch(event.request.clone());
      return response;
    } catch (error) {
      await queue.pushRequest({request: event.request});
      return error;
    }
  };

  event.respondWith(bgSyncLogic());
});

请求被添加到队列后，当 Service Worker 收到 sync 事件（浏览器认为连接恢复时就会发生这种情况）会自动重试。不支持 BackgroundSync API 的浏览器会在每次 Service Worker 启动时重试队列。这要求控制 Service Worker 的页面正在运行，因此效果不太理想。

测试 Workbox 后台同步

遗憾的是，由于多种原因，测试 BackgroundSync 有点不直观且困难。

测试您的实现的最佳方法是执行以下操作：

1. 加载页面并注册 Service Worker。
2. 关闭计算机的网络或关闭网络服务器。
   • 请勿离线使用 Chrome 开发者工具。开发者工具中的离线复选框只会影响来自该页面的请求。Service Worker 请求将继续处理。
3. 发出应该使用 Workbox 后台同步排入队列的网络请求。
   • 您可以在 Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests 中查看请求，以查看请求是否已排入队列。
4. 现在，打开网络或网络服务器。

5. 强制提前 sync 事件，具体方法是：前往 Chrome DevTools > Application > Service Workers，输入 workbox-background-sync:<your queue name> 的标记名称，其中 <your queue name> 应为您设置的队列名称，然后点击“同步”按钮。

   

6. 您应该会看到失败的请求的网络请求以及 IndexedDB 数据现在应该为空，因为请求已成功重放。