Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed on progressive web app

Question

I am following a simple PWA tutorial, but when I complete it I get the following console error,

Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed

Here is my serviceworker file

const staticDevCoffee = "dev-coffee-site-v1"
const assets = [
  "/",
  "/test.html",
  "/csstest/style.css",
  "/jstest/app.js",
  "/coffee.png",
]

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(staticDevCoffee).then(cache => {
      cache.addAll(assets)
    })
  )
})

When I run lighthouse tests, I get this,

start_url does not respond with a 200 when offlineThe start_url did respond, but not via a service worker.

This is my first look at PWAs so I am a little stuck. I have tried several solutions I have found on SO, but none work.

Answer 1

• For the first exception:-

  Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed

You get this exception when any files which you have mentioned in your cache list return a 404 response. So make sure the all the resources are giving 200.

• For the 2nd error:-

  start_url does not respond with a 200 when offlineThe start_url did respond.

In your case as files are not getting cached(due to first exception) you are getting this error and also make sure to cache root index file in your cache list.

Answer 2

I had also issues with this: In my app I have tens of files in the assets[] array to load into cache, manually picked (i.e. it doesn't make sense to cache loading.gif since it is not needed after the loading). Then any forgotten change makes the cache empty and the cause of the error is hidden, as the accepted answer explains. After I repeatedly spent time searching what was missing, I lost my patience with "convenient" cache.addAll and switched back to cache.add, so instead of the useless TypeError I get reported the file which caused the failure:

...
const filesUpdate = cache => {
    const stack = [];
    assets.forEach(file => stack.push(
        cache.add(file).catch(_=>console.error(`can't load ${file} to cache`))
    ));
    return Promise.all(stack);
};

installEvent.waitUntil(caches.open(staticDevCoffee).then(filesUpdate));
...

I hope this saves somebody nerves with cache.addAll(), too.