Employees not updating

Question

I have a service worker installed on my website, everything works fine, except when I click update for cached files; they stay forever, and I can't seem to invalidate the cache unless I unsubscribe from the worker from "chrome: // serviceworker-internals /

const STATIC_CACHE_NAME = 'static-cache-v1'; const APP_CACHE_NAME = 'app-cache-#VERSION'; const CACHE_APP = [ '/', '/app/app.js' ] const CACHE_STATIC = [ 'https://fonts.googleapis.com/css?family=Roboto:400,300,500,700', 'https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css' ] self.addEventListener('install',function(e){ e.waitUntil( Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME)]).then(function(storage){ var static_cache = storage[0]; var app_cache = storage[1]; return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]); }) ); }); self.addEventListener('activate', function(e) { e.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) { console.log('deleting',cacheName); return caches.delete(cacheName); } }) ); }) ); }); self.addEventListener('fetch',function(e){ const url = new URL(e.request.url); if (url.hostname === 'static.mysite.co' || url.hostname === 'cdnjs.cloudflare.com' || url.hostname === 'fonts.googleapis.com'){ e.respondWith( caches.match(e.request).then(function(response){ if (response) { return response; } var fetchRequest = e.request.clone(); return fetch(fetchRequest).then(function(response) { if (!response || response.status !== 200 || response.type !== 'basic') { return response; } var responseToCache = response.clone(); caches.open(STATIC_CACHE_NAME).then(function(cache) { cache.put(e.request, responseToCache); }); return response; }); }) ); } else if (CACHE_APP.indexOf(url.pathname) !== -1){ e.respondWith(caches.match(e.request)); } }); 

where #VERSION is the version that is added to the cache name at compile time; note that STATIC_CACHE_NAME never changes since files are considered static forever.

Also, the behavior is erroneous, I checked the delete function (the part where it is registered), and it continues to keep a log of deleting caches that have already been deleted (presumably). when I run caches.keys().then(function(k){console.log(k)}) , I get a whole bunch of old caches that should have been deleted.

Answer 1

After searching the Internet and watching some videos on udacity, I found that the employee’s intended behavior should remain until the page he controls is closed and reopened when a new service employee can take control.

The solution was to get him to take control based on https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting the following solution to the problem, even if 2 reboots are required for the new employee to reflect the changes ( this makes sense, as the application loads before the new worker replaces the previous one).

 self.addEventListener('install',function(e){ e.waitUntil( Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME),self.skipWaiting()]).then(function(storage){ var static_cache = storage[0]; var app_cache = storage[1]; return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]); }) ); }); self.addEventListener('activate', function(e) { e.waitUntil( Promise.all([ self.clients.claim(), caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) { console.log('deleting',cacheName); return caches.delete(cacheName); } }) ); }) ]) ); });