Failed Service Worker replay

Viewed 102

I have a problem with service worker (SW) while trying to build form for a user. Form need to work fine on offline, caching requests till network connection is restored.

Here is a try of API call for user creation (browser console)

workbox Router is responding to: https://awesomeapi/dev/users

workbox Network request for 'https://awesomeapi/dev/users' threw an error. TypeError: Failed to fetch

workbox Request for 'https://awesomeapi/dev/users' has been added to background sync queue 'usersQueuePost'.

workbox Using NetworkOnly to respond to 'https://awesomeapi/dev/users'

The FetchEvent for "https://awecomeapi/dev/users" resulted in a network error response: the promise was rejected.

Uncaught (in promise) no-response: The strategy could not generate a response for 'https://awecomeapi/dev/users'. The underlying error is TypeError: Failed to fetch.
    at NetworkOnly._handle (http://localhost:9000/sw.js:6604:19)
    at async NetworkOnly._getResponse (http://localhost:9000/sw.js:6913:24)

Uncaught (in promise) TypeError: Failed to fetch

POST https://awesomeapi/dev/users net::ERR_FAILED

So SW router caught a request, and strategy was chosen to act on this request. Here is a code for this type of query

registerRoute(
  // Check to see if the request is a navigation to a new page
  ({ request }) => request.url.includes("/users"),
  // Use a Network Only caching strategy
  new NetworkOnly({
    // We want to send API requests after network connection is restored
    plugins: [new BackgroundSyncPlugin("usersQueuePost")],
  }),
  // This route is only for user's creation
  "POST"
);

But after network connectivity is restored, replay is failing for unknown reason:

workbox Background sync for tag 'workbox-background-sync:usersQueuePost' has been received

workbox Request for 'https://awesomeapi/dev/users' has been added to background sync queue 'usersQueuePost'.

workbox Request for 'https://awesomeapi/dev/users' failed to replay, putting it back in queue 'usersQueuePost'

WorkboxError.js:30 Uncaught (in promise) queue-replay-failed: Replaying the background sync queue 'usersQueuePost' failed.
    at Queue.replayRequests (http://localhost:9000/sw.js:444:23)
    at async syncComplete (http://localhost:9000/sw.js:488:29)

Events are put into proper queue, and after few minutes they are successfully pushed back to the API. What can be a reason for initial replay failure? Sometimes it happens, but sometimes - not...

0 Answers
Related