om/public/serviceWorker.js

'use strict';
/* ================================== */
/* NOTE: Registration done in main.js */
/* ================================== */

/* =================================== */
/* NOTE: CacheKey & FilesToCache Lists */
/* =================================== */
const version = '1';
const appPrefix = 'ohmnews-';
const staticCacheKey = appPrefix + 'static-v' + version;
const dataCacheKey = appPrefix + 'content-data';
var allCacheKey = [
        staticCacheKey,
        dataCacheKey
];

/* ================================== */
/* NOTE: Install: Save files to cache */
/* ================================== */
// Install new service worker even when old version still in use.
// Install happens only once a lifetime of a service worker.
const cacheResources = async () => {
        const staticFilesToCache = [
                './',
                'favicon.ico',
                'index.html',
                'main.js',
                'manifest.json',
                'font/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2',
                'font/KFOlCnqEu92Fr1MmEU9fBBc4.woff2',
                'font/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2',
                'font/KFOlCnqEu92Fr1MmSU5fBBc4.woff2',
                'font/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2',
                'font/KFOlCnqEu92Fr1MmWUlfBBc4.woff2',
                'font/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2',
                'font/KFOmCnqEu92Fr1Mu4mxK.woff2',
                'font/KFOmCnqEu92Fr1Mu7GxKOzY.woff2',
                'img/launcher/launcher_app_icon_152.png',
                'img/launcher/launcher_app_icon_167.png',
                'img/launcher/launcher_app_icon_180.png',
                'img/launcher/launcher_app_icon_192.png',
                'img/launcher/launcher_app_icon_512.png',
                'img/app_icon.png',
                'img/launcher_app_icon.png',
                'img/profil_icon.png',
                'lib/bootstrap-font-and-icons.css',
                'lib/bootstrap-material-design.js',
                'lib/bootstrap-material-design.min.css',
                'lib/jquery-3.3.1.min.js',
                'lib/popper-1.12.6.js',
                'lib/vue-router.js',
                'lib/vue.js',
                'routes/bookmark.js',
                'routes/createMessage.js',
                'routes/files.js',
                'routes/home.js',
                'routes/messageData.js',
                'routes/msgCard.js',
                'routes/profil.js',
                'routes/profilCard.js',
                'routes/profilData.js',
                'style/style.css',
        ];
        const dataFilesToCache = [];

        const cacheStatic = await caches.open(staticCacheKey);
        cacheStatic.addAll(staticFilesToCache);
        console.log('[ServiceWorker] Cache static files.');

        const cacheData = await caches.open(dataCacheKey);
        cacheData.addAll(dataFilesToCache);
        console.log('[ServiceWorker] Cache data files.');
        return;
}
self.addEventListener('install', event => {
        // don't wait
        self.skipWaiting();
        // cache static files
        event.waitUntil(cacheResources())
        console.log('[ServiceWorker] Install');
});

/* ================================================================ */
/* NOTE: Activate: new service worker and delete old cache versions */
/* ================================================================ */
// No fetch or pull is called before succesfull activate event.
const cacheCleanUp = async () => {
        const cacheKeyList = await caches.keys();
    const deletions = cacheKeyList
		.filter(key => key.startsWith(appPrefix) && !allCacheKey.includes(key))
        .map(key => {
                        caches.delete(key)
                        console.log('[ServiceWorker] Removing old cache', key);
                });
    for (const success of deletions) {
        await success;
    }
        return;
}
self.addEventListener('activate', event => {
        event.waitUntil(cacheCleanUp());
        clients.claim();
        console.log('[ServiceWorker] Activate');
});

/* ========================================= */
/* NOTE: Fetch: Update logic for cache files */
/* ========================================= */
self.addEventListener('fetch', event => {
	// Provide HTTPS URL for query data.
	//const postMsgURL = 'https://me.efi.th-nuernberg.de/om/api/createMsg';
	//const postMsgURL = 'http://localhost:8013/api/createMsg';

	/* We should only cache GET requests, and deal with the rest of method in the
	   client-side, by handling failed POST,PUT,PATCH,etc. requests. */
	if (event.request.method !== 'GET') { // && event.request.url !== postMsgURL
		/* If we don't block the event as shown below, then the request will go to
		   the network as usual. */
		console.log('[ServiceWorker] Fetch event ignored.', event.request.method, event.request.url);
		return;
	}

	event.respondWith(async function update() {
		try {
			var requestURL = new URL(event.request.url);

			/*if (requestURL.href === postMsgURL) {
				console.log('New Msg created. ReqURL: ', event.request.method, event.request.url);
			}*/

			// Start the network request as soon as possible.
			const networkPromise = fetch(requestURL);

			const cachedResponse = await caches.match(event.request);

			const networkResponse = await networkPromise;
			// Check if response is valid, status is 200, response type is basic
			// (indicates request is from origin, means that requests to third party
			// assets aren't cached as well.
			if (!networkResponse || networkResponse.status !== 200
				|| networkResponse.type !== 'basic') return networkResponse;

			const cache = await caches.open(staticCacheKey);
			// We have to clone the response here because request bodies can only
			// be read once. Placing a response in the cache counts as a read.
			cache.put(event.request, networkResponse.clone());

			if (cachedResponse) return cachedResponse;
			console.log('[ServiceWorker] Fetch', event.request);
			return networkResponse;
		} catch (err) {
			// Report a lack of connectivity to the user.
			console.log('No Network connection: ',err);
		}
	}());
});