手动重播由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）。

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