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.