ServiceWorker doesn't update the cache

Question

I'm trying to install a ServiceWorker that clears the cache every time I change the currently used cache version.

I have index.html cached in the v0.0.1 cache, if the cache version changes to v0.0.2 or anything else, it should redownload index.html.

I load my ServiceWorker with:

if('serviceWorker' in navigator){
    navigator.serviceWorker
        .register('serviceWorker.js')
        .then(() => { 
            console.log('Service Worker Registered');
        });
}

And here's:

serviceWorker.js

const currentVersion = 'v0.0.1';

self.addEventListener('install', e => {
    e.waitUntil(
        caches.open(currentVersion).then(cache => cache.addAll([
            '',
            'index.html',
            'js/load.min.js',
            'lib/db.js/js/db.min.js'
        ]))
    );
});

self.addEventListener('fetch', e => {
    e.respondWith(
        caches.match(e.request).then(resp => {
            return resp || fetch(e.request).then(response => {
                return caches.open(currentVersion).then(cache => {
                    cache.put(e.request, response.clone());
                    return response;
                });  
            });
        })
    );
});

self.addEventListener('activate', e => {
    e.waitUntil(
        caches.keys().then(keyList => 
            Promise.all(keyList.map(key => key != currentVersion ? caches.delete(key) : Promise.resolve()))
        )
    );
});

But I tried editing index.html and updating the serviceWorker version, but the index.html file doesn't change. It always displays the first version.

What am I doing wrong?

Answer 1

There was two problems here.

Firstly, on the fetch event of my ServiceWorker, I checked if the whole cache contained the file I was fetching, not the current cache version.

So I edited my fetch event listener to this :

self.addEventListener('fetch', e => {
    e.respondWith(
        caches.open(currentVersion).then(cache => {
            return cache.match(e.request).then(resp => {
                // Request found in current cache, or fetch the file
                return resp || fetch(e.request).then(response => {
                    // Cache the newly fetched file for next time
                    cache.put(e.request, response.clone());
                    return response;
                // Fetch failed, user is offline
                }).catch(() => {
                    // Look in the whole cache to load a fallback version of the file
                    return caches.match(e.request).then(fallback => {
                        return fallback;
                    });
                });
            });
        })
    );
});

---

The last issue was that simply reloading the page (F5) didn't change the ServiceWorker.
In order for the new ServiceWorker to activate, you need to close the tab and open a new one.