Chrome install Service Worker addAll failed to fetch

Question

I am using a service worker to provide caching for my site's assets (HTML, JS, CSS).

When I use Firefox my sw.js is installed correctly and the required files cached. If I go into offline mode I get the site styled correctly with everything present but the data (which is correct as the data is not being cached).

However when I use Chrome I'm getting a TypeError: Failed to fetch error. I'm really unsure why I'm getting this error since it works in Firefox. In addition I'm getting the same error thrown whenever the fetch event fires and the request if for an asset that is not in the cache (and the fetch function is being called).

If I pass an empty array to the cache.addAll function I don't get any errors until attempting to actually handling the fetch event.

It's maybe worth noting that none of the files I'm caching are all coming from localhost and not any other origin so I can't see this being a cross-domain issue.

---

This is the console output when installing the service worker:

This is the console output when refreshing the page after installing the service worker:

---

This is the code for my service worker:

const CACHE_NAME = 'webapp-v1';
const CACHE_FILES = [
    '/',
    '/public/app.css',
    '/public/img/_sprites.png',
    '/public/js/app.min.js',
    '/public/js/polyfills.min.js'
];

self.addEventListener('install', event => {
    console.log("[sw.js] Install event.");
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(CACHE_FILES))
            .then(self.skipWaiting())
            .catch(err => console.error("[sw.js] Error trying to pre-fetch cache files:", err))
    );
});

self.addEventListener('activate', event => {
    console.log("[sw.js] Activate event.");
    event.waitUntil(
        self.clients.claim()
    );
});

self.addEventListener('fetch', event => {
    if (!event.request.url.startsWith(self.location.origin)) return;
    console.log("[sw.js] Fetch event on", event.request.url);
    event.respondWith(
        caches.match(event.request).then(response => {
            console.info("[sw.js] Responded to ", event.request.url, "with", response ? "cache hit." : "fetch.");
            return response || fetch(event.request);
        }).catch(err => {
            console.error("[sw.js] Error with match or fetch:", err);
        })
    );
});

Any help would be great.

Answer 1

cache.addAll(CACHE_FILES)

will fail when 1 of the file is not accessible (HTTP 400,401 etc, also 5XX and 3XX sometimes) to avoid failing all when 1 fail use individual catch statement in a map loop like here https://github.com/GrosSacASac/server-in-the-browser/blob/master/client/js/service_worker.js#L168

the fact that it does not fail with empty array probably means you have an inaccessible resource in CACHE_FILES.

Maybe firefox is less restrective and caches the body of the 400 response.

Inside your fetch handler you try to use caches.match directly but I think that is not legal. you must open the caches first and then from an opened cache you can do cache.match. See https://github.com/GrosSacASac/server-in-the-browser/blob/master/client/js/service_worker.js#L143