手动重放由 workbox-background-sync 排队的请求

Question

我正在 PWA 应用程序中进行离线支持。我正在为此使用工作箱。这是我当前的代码：

const addToFormPlugin = new workbox.backgroundSync.Plugin('addToForm');

workbox.routing.registerRoute(
RegExp('MY_PATH'),
  workbox.strategies.networkOnly({
    plugins: [addToFormPlugin]
  }),
  'POST'
);

该代码在我的计算机上似乎运行良好。但是，一旦我在手机上运行该应用程序，上传存储在 IndexedDB 中的请求需要很长时间。我知道它发生在 SYNC 上，但似乎至少需要 5 分钟。这不完全是我需要的。我想知道是否有一个选项可以访问 IndexDB 并在单击时“手动”发送所有请求。另一种方法是检查设备是否在线。以下是请求的存储方式：

Answer 1

如果您需要强制执行此操作，最简洁的方法是直接使用workbox.backgroundSync.Queue类（而不是workbox.backgroundSync.Plugin）。

该Plugin班负责建立的fetchDidFail回调给你，所以如果你使用的Queue类，你需要做的是自己：

const queue = new workbox.backgroundSync.Queue('addToForm');

workbox.routing.registerRoute(
  RegExp('MY_PATH'),
  workbox.strategies.networkOnly({
    plugins: [{
      fetchDidFail: async ({request}) => {
        await queue.addRequest(request);
      },
    }],
  }),
  'POST'
);

然后您可以调用queue.replayRequests()触发重放，例如，作为message事件的结果：

self.addEventListener('message', (event) => {
  if (event.data === 'replayRequests') {
    queue.replayRequests();
  }
});

但是……说了这么多，我认为最好的办法就是让浏览器“做自己的事”，并找出重播排队请求的合适时间。对于移动设备而言，这最终将更加节省电池电量。

如果您对浏览器在触发sync事件之前等待的时间间隔不满意，那么最好的做法可能是针对浏览器打开一个错误——无论是Chrome（如您的屏幕截图所示）还是其他浏览器。