om/public/serviceWorker.js

'use strict';

// NOTE: CacheKey & FilesToCache Lists
const cacheKey = 'omapp-';
const staticCacheKey = cacheKey + 's-v' + '1';
const dataCacheKey = casheKey + 'd-v' + '1';
const staticFilesToCache = [
	'/',
	'/manifest.json',
	'/index.html',
	'/message.html',
	'/bookmark.js',
	'/createMessage.js',
	'/files.js',
	'/home.js',
	'/main.js',
	'/profil.js',
	'/favicon.ico',
	'/img/th_nbg_ohmicon_amp.png',
	'/lib/jquery-3.3.1.min.js',
	'/lib/vue.js',
	'/lib/vue-router.js',
	'/style/style.css',
];
const dataFilesToCache = [
	'',
];

// NOTE: Registration done in main.js

// NOTE: Install and activate: Populating cache
// 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(staticCacheKey).then(function(cache) {
			console.log('[ServiceWorker] Cache static files.');
			return cache.addAll(staticFilesToCache);
		}),
		caches.open(dataCacheKey).then(function(cache) {
			console.log('[ServiceWorker] Cache data files.');
			return cache.addAll(dataFilesToCache);
		})
	);
});

// NOTE: Activate structure and delete older cache versions
// Activates new version of service worker.
// 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) {
			return Promise.all(
				cacheKeyList.map(function(key) {
					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) {
	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) {
		/*
		 * When the request URL contains dataUrl, the app is asking for fresh
		 * data. In this case, the service worker always goes to the network
		 * and then caches the response. This is called
		 * the "Cache then network" strategy:
		 * https://jakearchibald.com/2014/offline-cookbook/#cache-then-network
		 */

		/*event.respondWith(
			caches.open(staticCacheKey).then(function(cache) {
				return fetch(event.request).then(function(response) {
					cache.put(event.request.url, response.clone());
					return response;
				});
			})
		);
	} else {
	*/
		/*
		 * The app is asking for app shell files. In this scenario the app uses the
		 * "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) {
				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;
					}
				);
			})
		);
	//}
	/*
	caches.match(event.request).then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }

        return caches.open(shellCacheKey).then(cache => {
          return fetch(event.request).then(response => {
            // Put a copy of the response in the runtime cache.
            return cache.put(event.request, response.clone()).then(() => {
              return response;
            });
          });
        });

})*/
});