I would like to create a custom onSync callback passed to the BackgroundSync object. The following code without the callback works fine. When a form is submitted, the requests is queued and the page in cache is visible.
workbox.routing.registerRoute(
new RegExp('REGEX HERE'),
new workbox.strategies.NetworkOnly({plugins: [new workbox.backgroundSync.BackgroundSyncPlugin('queue')] }),
'POST'
);
When I try to customize the onSync callback, the requests is queued but the browsers shows an ERR_FAILED message with the following logs in the console:
- The FetchEvent for "https://localhost:8000/" resulted in a network error response: the promise was resolved with an error response object.
- Unable to register sync event for 'queue'. DOMException: Attempted to register a sync event without a window or registration tag too long.
Even if the code is as simple as this (equivalent to the default behavior):
workbox.routing.registerRoute(
new RegExp('REGEX HERE'),
new workbox.strategies.NetworkOnly({plugins: [new workbox.backgroundSync.BackgroundSyncPlugin(
'queue',
{
onSync: : async ({queue}) => {
await queue.replayRequests();
}
}
)] }),
'POST'
);
What did I miss?