Try closing the tab and reopening it, or just navigating to a different site and then hitting the back button. This should allow the old service worker to become redundant, your new one to activate, and the background to finally change to red.
By adding a version number to our cache, and incrementing it every time one of our files change we achieve two goals:
-
Any change to the service worker file, even one as minuscule as changing a single digit in the cache version number, lets the browser know it is time to install a new service worker to replace the active one. This triggers a new install event, causing the new files to be downloaded and stored in the cache.
-
It creates a separate cache for each version of our service worker. This is important because even though we already updated the cache, until the user has closed all open pages, the old service worker is still the active one. That service worker may expect certain files to be in the cache, files that may have been changed by the newer service worker. By letting each service worker have its own cache, we can make sure there are no unexpected surprises.
List the cache :
caches.keys().then(function(cacheNames) {
cacheNames.forEach(function(cacheName) {
//caches.delete(cacheName);
console.log('cache => ', cacheName);
});
});
Cache list can also be accesible in Chrome dev tool : Application -> Cache