Uncaught (in promise) TypeError: Request failed

I had the same error. The error log is very succint but as previously mentionned, it is very likely to originate from failed request from the service worker to request page from the server.

The trick is to understand the service worker scope. By default, its scope is the directory it's in. If you access your service worker script from https://your.domain.com/static/service-worker.js, its default scope will be /static. So, if you type cache.add('index.html'), it will actually request https://your.domain.com/static/index.html, which will result in an error if you were trying to get https://your.domain.com/index.html. Two solutions:

  • Access files using relative paths: cache.add('../index.html')
  • Change the scope when registering:
    • Use navigator.serviceWorker.register('static/service-worker.js', {scope: '/'})
    • Add the HTTP header Service-Worker-Allowed: / when serving your website

I had a typo in one of the filenames that I had added to cached_urls. It did not match the name of the real file so I kept getting the error

I found it by quickly setting cached_urls to an empty list and found that the error went away.