Question

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

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

我已经成功实现了localStorage和ServiceWorker，但似乎无法正确捕获发布消息。

这是核心功能：

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发生的时间，但是我无法获得实际的消息。

如何解决？

先谢谢您

Grzegorz

Answer 1

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

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

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

Background Sync当前仅在Chrome中可用，因此，如果您对此有所担心，或者如果您不想手动编写所有代码，则可以使用作为其中一部分的background sync library Workbox project。每当真正的Background Sync API不可用时，它将自动退回到显式重试。

请求PWA中的服务工作者延迟

1 个答案: