联机状态下，Workbox后台同步发送2个请求到服务器，而不是一个

编程问答 2022-06-13

问题描述

我正在使用Workbox和Angular构建一个非常简单的PWA项目。该项目是关于使用工作箱库创建可离线和在线运行的应用程序。 根据Workbox文档here，以下代码应该已经起作用：

const queue = new Queue('myQueue');

self.addEventListener('fetch',(event) => {
  // Clone the request to ensure it's safe to read when
  // adding to the Queue.

  const promiseChain = fetch(event.request.clone())
    .catch((err) => {
      return queue.pushRequest({request: event.request});
    });

  event.waitUntil(promiseChain);
  return promiseChain;
});

，但是，如果我按照官方文档中的建议断开服务器的连接（在本地主机中运行），请求将被正确存储在indexedDb中，那么当服务器启动时，队列将同步，它正确地向服务器发送了请求。问题是当我在线时发出请求时，它将2个请求发送到服务器。

我也尝试过：

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName',{
  maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(
  /\/api\/reports/,new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),'POST'
);

但是由于某种原因，这种方式甚至没有将请求添加到队列中。

尽管如此，两种方式仍会在控制台中显示错误：

POST http://localhost:3000/api/reports net::ERR_CONNECTION_REFUSED

如果有帮助，则该项目位于github中。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularprogressive-web-appstypescripttypescriptworkbox