service-worker - 手动重放由 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设置 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 (如您的屏幕截图所示)或其他浏览器。