在 PWA 中使用 Service Worker 请求延迟器

Question

我正在制作一个 PWA，用户可以在其中回答表单。我希望它也离线，所以当用户填写表格并且没有互联网连接时，回复将在他重新在线时上传。为此，我想捕获请求并在联机时发送它们。我想基于以下教程：

https://serviceworke.rs/request-deferrer_service-worker_doc.html

我已经成功实现了 localStorage 和 ServiceWorker，但是似乎没有正确捕获到 post 消息。

这里是核心功能：

function tryOrFallback(fakeResponse) {
  // Return a handler that...
  return function(req, res) {
    // If offline, enqueue and answer with the fake response.

    if (!navigator.onLine) {
      console.log('No network availability, enqueuing');
      return;
      // return enqueue(req).then(function() {
      //   // As the fake response will be reused but Response objects
      //   // are one use only, we need to clone it each time we use it.
      //   return fakeResponse.clone();
      // });
    }
    console.log("LET'S FLUSH");
    // If online, flush the queue and answer from network.
    console.log('Network available! Flushing queue.');
    return flushQueue().then(function() {
      return fetch(req);
    });
  };
}

我使用它：

worker.post("mypath/add", tryOrFallback(new Response(null, {
  status: 212,
  body: JSON.stringify({
    message: "HELLO"
  }),
})));

路径正确。它检测实际发布事件何时发生。但是，我无法访问实际请求（try 或 fallback "req" 中显示的请求基本上是空的），并且响应在显示时具有自定义状态，但不包含消息（正文为空）。所以不知何故，我可以检测到 POST 何时发生，但我无法获得实际消息。

如何解决？

提前谢谢你，

格热戈茨

Answer 1

关于您的示例代码，您构建新Response 的方式不正确；您正在为响应正文提供 null。如果您将其更改为以下内容，则更有可能看到您所期望的：

new Response(JSON.stringify({message: "HELLO"}), {
  status: 212,
});

但是，对于您描述的用例，我认为最好的解决方案是在您的服务人员内部使用Background Sync API。它会自动定期重试失败的POST。

后台同步目前仅在 Chrome 中可用，因此如果您对此感到担忧，或者您不想手动为其编写所有代码，您可以使用 background sync library 作为 @ 的一部分提供的987654323@。只要真正的后台同步 API 不可用，它就会自动回退到显式重试。