Pesquisa de site

angular - Workbox Background Sync envia 2 solicitações para o servidor quando online em vez de uma


Estou construindo um projeto PWA muito simples com Workbox e Angular. O projeto é sobre criar um aplicativo que funcione offline e online, usando a biblioteca Workbox. De acordo com a documentação do Workbox aqui, o código a seguir deveria ter funcionado:

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;
});

mas não aconteceu, em vez disso, se eu desconectar o servidor (rodando no localhost), como sugerido na documentação oficial, a requisição é armazenada corretamente no IndexedDb, então quando o servidor está ativo e a fila é sincronizada, ela faz a requisição corretamente para o servidor. O problema é quando faço uma requisição enquanto estou online, ela envia 2 requisições para o servidor.

Eu também tentei isto:

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'
);

mas por algum motivo, dessa forma, a solicitação nem chega a ser adicionada à fila.

Apesar disso, ambos os modos ainda mostram um erro no console:

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

Se ajudar, o projeto está no GitHub.