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...