Odtnhj

I have the following scenario:

• A web application with a service worker (workbox)


• An API which the web application consumes

How am I expected to handle the changes in the API in the web application? It's important to take into account the service-worker life cycle. The service-worker will continue to use the previous version until the web is reloaded, so an user could be consuming outdated API endpoints, or missing new required params.

Currently, what I am doing is reloading the page as soon as a new version is installed, but it seems it's not fully working and also it's not very optimal:

if ('serviceWorker' in navigator) 
 navigator.serviceWorker.register('/sw.js').then(function (registration) 
 console.log('Service worker registered')
 setInterval(() => 
 console.log('Checking for updates');
 registration.update();
 , 1000 * 60 * 60); // Checking for updates every hour

 if (!navigator.serviceWorker.controller) // New user with no service worker
 return;
 

 var preventDevToolsReloadLoop;
 navigator.serviceWorker.addEventListener('controllerchange', function (event) // This event is called when a new sw is installed
 if (preventDevToolsReloadLoop) return; // Ensure refresh is only called once. This works around a bug in "force update on reload" in chrome tools.
 preventDevToolsReloadLoop = true;
 console.log('Controller loaded');
 window.location.reload();
 );
 );
 else 
 console.log('Service worker not activated')

sw.js looks like this:

importScripts('/js/workbox.4c4f5ca6.js')


workbox.precaching.precacheAndRoute([ /*Routes...*/ ]);

workbox.clientsClaim()
workbox.skipWaiting()


workbox.routing.registerRoute(new RegExp('/js/.*'), 
workbox.strategies.cacheFirst(), 'GET')

workbox.routing.registerRoute(new RegExp('/.*'), 
workbox.strategies.networkFirst(), 'GET')