我正在为我的 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 并在点击时“手动”发送所有请求。另一种方法是检查设备是否在线。以下是请求的存储方式:
最佳答案
如果您需要强制执行此操作,最简洁的方法是使用 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 (如您的屏幕截图所示)或其他浏览器。
关于service-worker - 手动重放由 workbox-background-sync 排队的请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51959897/