Kick starting with Progressive Web Apps Part 2
In the previous blog you learnt how to register service worker and cache the resources in our app on the initial load.Now when you open up a page that has a service worker already registered. Then if you open up another page that falls within the scope of that service worker the browser doesn’t spin up the another service worker it uses the same one. That means if you have multiple tabs open or windows open there exists only one service worker.
But what happens when you update the service worker, the new service worker sits idle waiting until all the windows using previous service worker gets closed.
In order to avoid this we can use skipWaiting() in install event and clients claim() in activate event so that without any waiting the new service worker takes over the control of the pages.
//service-worker.js
var cacheName = 'cache_version2';
self.addEventListener('install',function(e){
console.log("[Service Worker] Installed");
e.waitUntil(
caches.open(cacheName).then(function(cache){
console.log("[ServiceWorker] Caching cacheFiles");
cache.addAll(cacheFiles);
}).then(function() {
return self.skipWaiting();
})
)
})self.addEventListener('activate', function(e){
console.log("[Service Worker] Activated");
e.waitUntil(self.clients.claim());
})
But wait what happens to the files previously stored in the cache after installing a new one?
The browser doesn’t know whether you are going to need the old ones or not. So it’s up to you to clean the unused files from the cache.The activate event is the perfect place to do this.
//service-worker.js
var cacheName = 'cache_version2';
self.addEventListener('activate', function(e){
console.log("[Service Worker] Activated");
e.waitUntil(
caches.keys().then(function(cacheNames){
return Promise.all(cacheNames.map(function(thisCacheName){
if(thisCacheName != cacheName)
{
console.log("[Service Worker] Removing Cached Files from", thisCacheName);
return caches.delete(thisCacheName);
}
}))
}).then(function(){
return self.clients.claim();
})
)
})When the activate event is fired the code gets a list of current cache keys and iterates through them using map function.It then compares the key to the current key and if they’re not equal purges them.
Note : If your service worker file doesn’t get updated and still points out the old service worker file be sure to check that your browser cache max age is set zero.(cache max age : 0)
To kick start with Progressive Web App you can go through my blogs :
1) Register service worker and cache the resources in our app on the initial load.
2) Update the old service worker and cache the new response in Cache Storage.
3) Get out the resources from the cache and intercept the network requests.
4) Make our web app installable via the Web App Manifest File.
SoluteLabs is a high-performance team of 25 focused on mobile and web design and development; we have produced top #10 chart topping applications on Android and iOS app stores, graphics that have gone viral and applications with Millions of downloads.
