Workbox-background-sync

当您向网络服务器发送数据时，有时请求会失败。它 这可能是因为用户连接已断开， 服务器关闭无论是哪种情况 。

新的 BackgroundSync API 是解决此问题的理想解决方案。当 Service Worker 检测到 网络请求失败，可以注册以接收 sync 事件， 当浏览器认为已经恢复连接时传递。 请注意，即使用户离开了网站，同步事件也会被传递 应用进行微调，这比传统的 重试失败的请求。

Workbox 后台同步功能旨在让您更轻松地使用 BackgroundSync API 的用法，并将其用法与其他 Workbox 模块集成。它 还为尚未实现 BackgroundSync。

支持 BackgroundSync API 的浏览器会自动重放失败 代表您向 由浏览器管理的时间间隔 可能在两次重放尝试之间使用指数退避算法。在 未对 BackgroundSync API 提供原生支持，Workbox Background Sync 将 会在 Service Worker 启动时自动尝试重新播放。

基本用法

使用后台同步的最简单方法是使用 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');

队列名称用作获取 register()-ed 由全球 SyncManager。时间是 也用作 对象存储名称 IndexedDB 数据库。

向队列添加请求

创建 Queue 实例后，您可以向其添加失败的请求。 您通过调用 .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)