Workbox Background Sync sends 2 requests to the server when online instead of one

Question

I am constructing a very simple PWA project with workbox and Angular. The project is about creating a app that works offline and online, using the workbox library. According to the Workbox documentation here, the following code should have worked:

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

but it did not, instead, if i disconnect the server (running in localhost), as suggested in the official documentation, the request is stored correctly in the indexedDb, then when the server is up, and the queue is sync, it does the request correctly to the server. The problem is when i do a request while online, it sends 2 requests to server.

I also tried this:

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

but for some reason, this way, the request is not even added to the queue.

Despite this, both ways still show an error in the console:

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

If it helps, the project is in github.