workbox-background-sync: duplicate POST requests

[conrado-l]

Issue description:
I'm using workbox-background-sync 2.1.3, and sometimes i'm getting duplicated requests, they are not duplicated on IndexedDB, they are just being replayed twice. There is no exact way to replicate this behavior. Workbox pushes the request to the queue, i get back online and the one and only request gets replayed twice sometimes.

Browser & Platform:
Chrome version: tested on both 65 and 66
OS: both Linux 16.04 and Windows 10 Pro

[jeffposnick]

Can you try updating to Workbox v3.2.0? There were fairly significant rewrites to the background sync codebase and made with the v3 release.

[philipwalton]

Closing due to inactivity and that this issue references an older version of workbox-background-sync. Please let us know if you're still seeing the issue in v3+.

[WadeFanyao]

Closing due to inactivity and that this issue references an older version of workbox-background-sync. Please let us know if you're still seeing the issue in v3+.

Hi, I just found this issue because I was trying to solve the duplicate post request issue when I am using workbox-background-sync. There is a function of my web app to upload the photos. But every time I did uploaded twice to the database. Here is the code I have:

const bgSyncQueue = new workbox.backgroundSync.Queue(
        'photoSubmissions',
        {
            maxRetentionTime: 48 * 60,//48 hours
            callbacks: {
                queueDidReplay: function (requests) {
                    if (requests.length === 0) {
                        removeAllPhotoSubmissions();
                    }
                    else {
                        for(let request of requests) {
                            if (request.error === undefined && (request.response && request.response.status === 200)) {
                                removePhotoSubmission();
                            }
                        }
                    }
                }
            }
        });
    workbox.routing.registerRoute(
		new RegExp('.*\/Home\/Submit'),
		args => {
		    const promiseChain = fetch(args.event.request.clone())
            .catch(err => {
                bgSyncQueue.addRequest(args.event.request);
                addPhotoSubmission();
                changePhoto();
            });
            event.waitUntil(promiseChain);
		},
        'POST'
    );

I am using workbox 3.6.1 . If I remove workbox.routing.registerRoute code block, there is no duplicate any more. If it is online, I have two photos in the database. If it is offline, I have two replayed photos in my database.

[philipwalton]

@WadeFanyao, can you take a look at the background sync API changes proposed in #1710 and see if they'd work better for your use case?

[jitenderchand]

I am facing the same issue. Any solution to this. I am using v4.3.1

const addToFormPlugin = new workbox.backgroundSync.Plugin('addToForm');

    workbox.routing.registerRoute(
      new RegExp(/.*DataManagement\/SyncUserData/),
      workbox.strategies.networkOnly({
        plugins: [addToFormPlugin]
      }),
      'POST'
    );

workbox Using NetworkOnly to respond to 'http://xxx.xx.xxx.xxx/api/DataManagement/SyncUserData'

[WadeFanyao]

@jitenderchand I am kind forgot how I did it but here is the link of my question on Stack overflow: https://stackoverflow.com/questions/52953404/duplicate-post-request-sent-by-service-worker. It may not suit for your case but it can be a reference.

[jitenderchand]

@WadeFanyao Thanks for the quick reply. I have seen this already, unfortunately, it didn't fix the issue.
My code is working fine when an app is offline but not in online mode.
I think the first post request is sent by the fetch which is inside componentDidMount and then the second call sent by the service worker itself since I have rule written there.

I need to kind of overrides the first fetch event.

I have even tried with the following code but still, there are two post request

const queue = new workbox.backgroundSync.Queue('myQueueName');

self.addEventListener('fetch', (event) => {
  // Clone the request to ensure it's save to read when
  // adding to the Queue.
  const promiseChain = fetch(event.request.clone())
  .catch((err) => {
      return queue.pushRequest({request: event.request});
  });

  event.waitUntil(promiseChain);
});

[chrisherb]

I can confirm this behavior. POST requests get added twice to the queue. I am using Workbox v4.3.1

[DragosRomaniuc]

@WadeFanyao Thanks for the quick reply. I have seen this already, unfortunately, it didn't fix the issue.
My code is working fine when an app is offline but not in online mode.
I think the first post request is sent by the fetch which is inside componentDidMount and then the second call sent by the service worker itself since I have rule written there.

I need to kind of overrides the first fetch event.

I have even tried with the following code but still, there are two post request

const queue = new workbox.backgroundSync.Queue('myQueueName');

self.addEventListener('fetch', (event) => {
  // Clone the request to ensure it's save to read when
  // adding to the Queue.
  const promiseChain = fetch(event.request.clone())
  .catch((err) => {
      return queue.pushRequest({request: event.request});
  });

  event.waitUntil(promiseChain);
});

Double request are made because your fetch event catch EVERY fetch request, counting the ONLINE ones also.
Just add an if condition to the queue pushing to check either the connection is online/offline.

if(!self.navigator.onLine) {
        const promiseChain = fetch(event.request.clone())
            .catch((err) => {
                return queue.pushRequest({request: event.request});
            });
        event.waitUntil(promiseChain);
    }

[dannyconnell]

Thank you thank you @DragosRomaniuc. This has had me stumped for a long time! 👍