Update ServiceWorker

public/serviceWorker.js

@@ -1,11 +1,10 @@
 'use strict';
 
 // NOTE: CacheKey & FilesToCache Lists
-const cacheKey = 'omapp-v';
+const cacheKey = 'omapp-';
-const shellCacheKey = cacheKey + '1';
+const staticCacheKey = cacheKey + 's-v' + '1';
-const logicCasheKey = shellCacheKey + '.' + '0';
+const dataCacheKey = casheKey + 'd-v' + '1';
-const dataCacheKey = logicCasheKey + '.' + '0';
+const staticFilesToCache = [
-const shellFilesToCache = [
 	'/',
 	'/manifest.json',
 	'/index.html',
@@ -23,9 +22,6 @@ const shellFilesToCache = [
 	'/lib/vue-router.js',
 	'/style/style.css',
 ];
-const logicFilesToCache = [
-	'',
-];
 const dataFilesToCache = [
 	'',
 ];
@@ -33,47 +29,55 @@ const dataFilesToCache = [
 // NOTE: Registration done in main.js
 
 // NOTE: Install and activate: Populating cache
-self.addEventListener('install', function (event) {
+// Install new service worker even when old version still in use.
+// Install happens only once a lifetime of a service worker.
+self.addEventListener('install', function(event) {
 	console.log('[ServiceWorker] Install');
+	// don't wait
+	self.skipWaiting();
+	// cache static files
 	event.waitUntil(
-		caches.open(shellCacheKey).then(function (cache) {
+		caches.open(staticCacheKey).then(function(cache) {
-			console.log('[ServiceWorker] Cache shell files.');
+			console.log('[ServiceWorker] Cache static files.');
-			return cache.addAll(shellFilesToCache);
+			return cache.addAll(staticFilesToCache);
-		}).then(self.skipWaiting()),
+		}),
-		caches.open(logicCasheKey).then(function (cache) {
+		caches.open(dataCacheKey).then(function(cache) {
-			console.log('[ServiceWorker] Cache logic files.');
-			return cache.addAll(logicFilesToCache);
-		}).then(self.skipWaiting()),
-		caches.open(dataCacheKey).then(function (cache) {
 			console.log('[ServiceWorker] Cache data files.');
 			return cache.addAll(dataFilesToCache);
-		}).then(self.skipWaiting())
+		})
 	);
 });
 
 // NOTE: Activate structure and delete older cache versions
-self.addEventListener('activate', function (event) {
+// Activates new version of service worker.
-	console.log('[ServiceWorker] Activate');
+// No fetch or pull is called before succesfull activate event.
+self.addEventListener('activate', function(event) {
+	clients.claim();
+	var cacheWhitelist = [staticCacheKey, dataCacheKey];
 	event.waitUntil(
-		caches.keys().then(function (cacheKeyList) {
+		caches.keys().then(function(cacheKeyList) {
 			return Promise.all(
-				cacheKeyList.map(function (key) {
+				cacheKeyList.map(function(key) {
-					if (key !== shellCacheKey && key !== logicCasheKey && key !== dataCacheKey) {
+					if (cacheWhitelist.indexOf(key) === -1) {
 						console.log('[ServiceWorker] Removing old cache', key);
 						return caches.delete(key);
 					}
 				})
 			);
+		}).then(() => {
+			console.log('[ServiceWorker] Activate');
 		})
 	);
+
 	// Shorten activation time for initial [ServiceWorker] call.
 	//return self.clients.claim();
 });
 
 
 // NOTE: Fetch structure // TODO: Setup fetching method
-self.addEventListener('fetch', function (event) {
+self.addEventListener('fetch', function(event) {
-	var dataUrl = 'localhost:8888'; // Provide HTTPS URL for query data.
+	const dataUrl = '	localhost:8888/'; // Provide HTTPS URL for query data.
+	// const url = new URL(event.request.url);
 	console.log('[ServiceWorker] Fetch', event.request.url);
 
 	//if (event.request.url.indexOf(dataUrl) > -1) {
@@ -86,8 +90,8 @@ self.addEventListener('fetch', function (event) {
 		 */
 
 		/*event.respondWith(
-			caches.open(shellCacheKey).then(function (cache) {
+			caches.open(staticCacheKey).then(function(cache) {
-				return fetch(event.request).then(function (response) {
+				return fetch(event.request).then(function(response) {
 					cache.put(event.request.url, response.clone());
 					return response;
 				});
@@ -100,9 +104,46 @@ self.addEventListener('fetch', function (event) {
 		 * "Cache, falling back to the network" offline strategy:
 		 * https://jakearchibald.com/2014/offline-cookbook/#cache-falling-back-to-network
 		 */
+		/*
+		// serve the cat SVG from the cache if the request is
+		// same-origin and the path is '/dog.svg'
+		if (url.origin == location.origin && url.pathname == '/dog.svg') {
+			event.respondWith(caches.match('/cat.svg'));
+		}
+		*/
+
 		event.respondWith(
-			caches.match(event.request).then(function (response) {
+			caches.match(event.request)
-				return response || fetch(event.request);
+			.then(function(response) {
+				if (response) {
+					return response;
+				}
+				return fetch(event.request).then(
+          			function(response) {
+						// Check if we received a valid response
+						// - Ensure the response is valid.
+						// - Check the status is 200 on the response.
+						// - Make sure the response type is basic, which indicates that it's a request from our origin.
+						//   This means that requests to third party assets aren't cached as well.
+						if(!response || response.status !== 200 || response.type !== 'basic') {
+						  return response;
+						}
+
+						// IMPORTANT: Clone the response. A response is a stream
+						// and because we want the browser to consume the response
+						// as well as the cache consuming the response, we need
+						// to clone it so we have two streams.
+						// - Reason: response is a stream and object can only consumed once
+						var responseToCache = response.clone();
+
+						caches.open(staticCacheKey)
+						  .then(function(cache) {
+							cache.put(event.request, responseToCache);
+						  });
+
+						return response;
+					}
+				);
 			})
 		);
 	//}