2

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!

enter image description here

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

VikR
  • 4,818
  • 8
  • 51
  • 96

1 Answers1

2

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

Jeff Posnick
  • 53,580
  • 14
  • 141
  • 167
  • Thanks! You seem to know this stuff really well. Could you please take a look at my related SO post at https://stackoverflow.com/questions/66755465/pwa-setup-with-cloudfront-cdn? My service worker says it is being registered, but Lighthouse is saying "No matching service worker detected." – VikR Mar 23 '21 at 21:24
  • Update -- I think I solved it. I'm adding info about it to that post I linked in the last comment. – VikR Mar 23 '21 at 22:01
  • Is it correct that Lighthouse will always fail your PWA score if you have "Clear Storage" checked? – VikR Mar 23 '21 at 22:09
  • Hey Jeff Posnik, Thanks a lot for these Informations. I asked a question about a pretty similar problem in this Post [https://stackoverflow.com/questions/..](https://stackoverflow.com/questions/66818391/service-worker-the-service-worker-navigation-preload-request-failed-with-networ) but actually I am not sure it is exactly the same problem. I am not getting a failed fetch in Network Tab but an Error Message in the console. Maybe you can take a look at my post and give me a feedback if it's the same issue. And it would be interesting to know if its possible to prevent the error from happening. – veduardo Mar 26 '21 at 19:09