Background Sync replay request

Hi,

I am trying to make a background-sync request with WorkBox, in a very simple example application with Vue. I revised my codes for a long time but I did not find the solution.

The service worker is well registered and when I make the ajax request, background-sync works properly.

This is my code in the sw.js:

const queue = new workbox.backgroundSync.Queue('asierrrna');
workbox.routing.registerRoute(
  RegExp('^MY_URL'),
  workbox.strategies.networkOnly({
    plugins: [{
      fetchDidFail: async ({request}) => {
        await queue.addRequest(request);
      },
    }],
  }),
  'GET'
);

Background-sync is registered in indexedDB tab:

.

Finally the network tab. There we see that the API call is well, because when the network returns it makes the call, but nothing else happens in the app, and the old data is not replaced by the new one 😕

Thanks 😃

[asiermusa]

Hi @philipwalton,

The sync event works properly. As you can see in the picture above, when ajax petition fail and internet connection is restored, the sync event is well triggered and in the network tab I can see the API response.

My problem is related with how I can replace the old query with the new one in my app. I was looking to do with callbacks in the Queue like that (it doesn’t work for me with the new onSync callback):

queueDidReplay: async (storableRequestArray) => {
     let message = {
          'data' : storableRequestArray
     };
     let clients = await self.clients.matchAll();
     for (const client of clients) {
         client.postMessage(message)
     }
}

Then in my SPA app I listen for a “message”, and I use my app logic to restore the failed request.

navigator.serviceWorker.addEventListener('message', (e) => {
  const message = e.data
  doSomething() //my app logic here
});

Is this the right way?

Thanks

[subashdbc]

@asiermusa I was not sure about how Background Sync work on workbox. After doing some research and experiments I was able to catch how things were working. Sorry for that comment