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

Question

我正在为我的 PWA 应用提供离线支持。我为此使用workbox。这是我当前的代码：

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）。

为您设置fetchDidFail callback 的Plugin 类takes care，因此如果您使用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（如屏幕截图所示） ) 或其他浏览器。