Service Worker Fetch Error When Trying to Load — My Website?

Question

I've recently added Cloudfront to my web app. I'm using a WorkBox service worker and getting the error:

VM7 workbox-strategies.prod.js:1 Uncaught (in promise) TypeError: Failed to fetch

I found out from this SO post to watch the Network tab to find out what resource was causing the problem.

I checked and found out -- it's trying to load my own domain!

The domain loads in the browser just fine. Why would the service worker be throwing this fetch error?

Answer 1

What you're seeing is due to the new offline support detection in Chrome 89+.

If your site has a web app manifest and a service worker, Chrome will automatically simulate an offline connection and then make a request for the start_url listed in your web app manifest.

If your service worker uses a network-first strategy for responding to navigation requests, then there may be a failed network request logged in the Network panel, even if the check ultimately succeeds because of a response from the cache.

(The Chrome DevTools team is aware that this can be a bit confusing, and is working on improving how this is reported to developers.)