[PWA] Deal with caches in PWA

The takeway is to know when we should cache the content? When we should clean the caches?

1. When should cache the content?

const CACHE_NAME = 'v1';
self.addEventListener('install', function (event) {
    // waitUntil take a promise
    event.waitUntil(
        caches.open(CACHE_NAME).then(function (cache) {
            return cache.addAll([
                '/',
                'js/main.js',
                'css/main.css',
                'imgs/icon.png',
                'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
                'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff'
            ]);
        })
    );
});

This should be done in the 'install' event.

 

2. When should clean old cache?

self.addEventListener('activate', function (event) {
    // waitUntil take a promise
    event.waitUntil(
        // caches.keys, return all the cache names
        caches.keys().then(function (cacheNames) {
            return Promise.all(
                // only get cache for this application
                cacheNames.filter(function(name) {
                    return name !== CACHE_NAME && name.startsWith('witter-');
                }).map(function(cacheName) {
                    // delete each cache by name
                    return caches.delete(cacheName);
                })
            );
        })
    );
});

This should be done in 'activate' event, the new cache should be already cached if the SW version doesn't change. If it does change, then the new version will be stored and we need to clean the old one,  the best place to do it is in the 'activate' event.