1

我一直在尝试使用Workbox Service Worker 工具包。

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

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

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

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

我看到在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 中进行测试。

4

1 回答 1

1

我猜想通过开发工具翻转离线->在线->离线不会为您触发同步（在这种情况下也不会“同步”选项），所以恐怕您将不得不从系统中切换网络打开->关闭。

这样做后，您应该能够看到请求如您所想的那样被重放。

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

于 2017-06-08T15:31:05.207 回答