From 9391cf8aa99d487541698025466239f928242cec Mon Sep 17 00:00:00 2001 From: Erik Roemmelt Date: Wed, 5 Dec 2018 19:45:41 +0100 Subject: [PATCH] Fixed: ServiceWorker, Favicon.ico must be at root --- public/{img => }/favicon.ico | Bin public/serviceWorker.js | 103 ++++++++++++++++++++++++++++++----- 2 files changed, 89 insertions(+), 14 deletions(-) rename public/{img => }/favicon.ico (100%) diff --git a/public/img/favicon.ico b/public/favicon.ico similarity index 100% rename from public/img/favicon.ico rename to public/favicon.ico diff --git a/public/serviceWorker.js b/public/serviceWorker.js index 9f30140..a4b8d69 100644 --- a/public/serviceWorker.js +++ b/public/serviceWorker.js @@ -1,33 +1,62 @@ 'use strict'; -// NOTE: StaticCacheName & FilesToCache list -const staticCacheName = 'omapp-v1.0.0'; -const filesToCache = [ +// NOTE: CacheKey & FilesToCache Lists +const cacheKey = 'omapp-v'; +const shellCacheKey = cacheKey + '1'; +const logicCasheKey = shellCacheKey + '.' + '0'; +const dataCacheKey = logicCasheKey + '.' + '0'; +const shellFilesToCache = [ '/', + '/manifest.json', '/index.html', '/message.html', - '/style.css', + '/bookmark.js', + '/createMessage.js', + '/files', + '/home.js', '/main.js', - '/favicon.ico' + '/profil.js', + '/img/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 logicFilesToCache = [ + '', + '', +]; +const dataFilesToCache = [ + '', + '', ]; // NOTE: Registration done in main.js // NOTE: Install and activate: Populating cache self.addEventListener('install', function (event) { - console.log('Service worker installing...'); + console.log('[ServiceWorker] Install'); event.waitUntil( - (console.log('Trying to install service worker and static cache files.'), - caches.open(staticCacheName).then(function (cache) { - return cache.addAll(filesToCache); - })) + caches.open(shellCacheKey).then(function (cache) { + console.log('[ServiceWorker] Cache shell files.'); + return cache.addAll(shellFilesToCache); + }), + caches.open(logicCasheKey).then(function (cache) { + console.log('[ServiceWorker] Cache logic files.'); + return cache.addAll(logicFilesToCache); + }), + caches.open(dataCacheKey).then(function (cache) { + console.log('[ServiceWorker] Cache data files.'); + return cache.addAll(dataFilesToCache); + }) ); }); // NOTE: Activate structure and delete older cache versions self.addEventListener('activate', function (event) { - console.log('Activating new service worker...'); - const cacheWhitelist = [staticCacheName]; + console.log('[ServiceWorker] Activate'); + /*const cacheWhitelist = [staticCacheName]; event.waitUntil( caches.keys().then(function (cacheNames) { return Promise.all( @@ -38,12 +67,58 @@ self.addEventListener('activate', function (event) { }) ); }) + );*/ + event.waitUntil( + caches.keys().then(function (cacheKeyList) { + return Promise.all( + cacheKeyList.map(function (key) { + if (key !== shellCacheKey && key !== logicCasheKey && key !== dataCacheKey) { + console.log('[ServiceWorker] Removing old cache', key); + return caches.delete(key); + } + }) + ); + }) ); + // Shorten activation time for initial [ServiceWorker] call. + //return self.clients.claim(); }); // NOTE: Fetch structure // TODO: Setup fetching method self.addEventListener('fetch', function (event) { - console.log('Fetch event for ', event.request.url); - // Perform some task + var dataUrl = 'localhost:8888'; // Provide HTTPS URL for query data. + 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(dataCacheKey).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 + */ + event.respondWith( + caches.match(event.request).then(function (response) { + return response || fetch(event.request); + }) + ); + } }); +