🐛BackgroundSyncPlugin doesn't sync when connection is back

[AntoLC]

Library Affected:
workbox-background-sync

Browser & Platform:
Chrome Version 125.0.6422.142 (Official Build) (64-bit)

Issue or Feature Request Description:
It just doesn't sync when the connection is back. When I reload my page, the event sync doesn't seem listened anymore. After a while the sync is triggered but quite some time after we have the connection back (3 or 4mn maybe).

The implementation is quite basic:

registerRoute(
    ({ url }) => isApiUrl(url.href) && url.href.match(/.*\/documents\/.*\//),
    new NetworkOnly({
      plugins: [
        new ApiPlugin({ type: 'update' }), // to update the cache with new data
        new BackgroundSyncPlugin('queue-doc-api'), // save when connection is back
      ],
    }),
    'PATCH',
  );

Demo

scrnli_6_17_2024_12-47-05.PM.webm

[Anubarak]

Anyone found a solution for this?

A working - but not good way - is to manually trigger replayRequests. But since i access the private _queue property it does not feeld good

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

registerRoute(
    ({ request }) => request.method === 'POST' && request.url.includes('/api/'),
    new NetworkOnly({
        plugins: [bgSyncPlugin],
    }),
    'POST'
);

async function processQueue() {
    console.log('📡 Checking for pending requests...');
    try {
        await bgSyncPlugin._queue.replayRequests();
        console.log('✅ Successfully replayed queued requests');
    } catch (error) {
        console.error('❌ Error replaying queued requests:', error);
    }
}

// 🔹 Fallback: Run Every 30 Seconds
setInterval(() => {
    processQueue();
}, 30000);

Otherwise my requests are indeed queued but will never run