BackgroundSync fails when onSync is set

23 Views Asked by At

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?

0

There are 0 best solutions below