workbox-backround-sync 自动检测设备是否应该重新联机

Question

我一直在试验 workbox service worker 工具包。

副本here表明workbox-backround-sync QueuePlugin 将捕获失败的请求并稍后重播它们。因此，通过一些挖掘，我发现了如何使它在 POST 方法调用上工作。

但是请求的重播似乎有点碰运气。使用 Chrome 开发工具使应用程序脱机，确实会将请求放入 IndexedDB 中的队列中。似乎什么都没有发生，我想调试。我注意到在 demo on github 中它使用 BroadcastChannel 来触发重播。所以我实现了。然后在活动选项卡的控制台中，我在开发工具中取消选中离线并发送了一条 postMessage。现在，请求被愉快地触发，响应被存储在队列中的每个项目中。

然后我离开机器运行，进入待机等几个小时。然后我在日志中注意到它很高兴地发送了重复的请求，即使每个项目都有响应。

此时我尝试复制但不能。我发送了一条 BroadcastChannel 消息，它只触发没有响应的请求。所以我现在回到开始，发出更多离线请求，确认它们在数据库中，在线恢复并等待。没有。

我看到它在 constructor of Queue 中创建了一个新的 RequestManager，并在其构造函数中设置了同步事件侦听器。所以我猜它应该在某个时候做点什么。

如果有人可以提供帮助，我只是想确保我理解预期的行为。

这是我的代码。

let bgQueue = new workbox.backgroundSync.QueuePlugin({
  callbacks: {
    onResponse: async(hash, res) => {
      console.log(hash, res);
    }
  }
});

const requestWrapper = new workbox.runtimeCaching.RequestWrapper({
  plugins: [bgQueue]
});

const route = new workbox.routing.RegExpRoute({
  regExp: new RegExp('^http://localhost:4200/api/create/note'),
  handler: new workbox.runtimeCaching.NetworkOnly({requestWrapper}),
  method: 'POST' // Not obvious you need to do this in the docs without digging.
});

const router = new workbox.routing.Router();
router.registerRoute({route});

// Code to manaully trigger a replay.
const replayBroadcastChannel = new BroadcastChannel('replay_channel');
replayBroadcastChannel.onmessage = function() {
  bgQueue.replayRequests();
};

在 macOS Sierra 上 Chrome 58 中进行测试。

Answer 1

我想通过开发工具翻转离线 -> 在线 -> 离线不会为你触发同步（在这种情况下 "sync" 选项也不会），所以恐怕你必须打开网络 ->关闭您的系统。

执行此操作后，您应该能够看到请求按照您的想法重播。

此外，如果您仍然能够重现重复的请求（已回复 2XX 响应的请求），请随时提出错误。

workbox-backround-sync 自动检测设备是否应该重新联机

Should workbox-backround-sync auto detect device is back online

service-worker

workbox