diff --git a/public/index.html b/public/index.html index 634648e..78d4554 100644 --- a/public/index.html +++ b/public/index.html @@ -16,7 +16,7 @@ - + diff --git a/public/main.js b/public/main.js index e75f569..1378f6f 100644 --- a/public/main.js +++ b/public/main.js @@ -2,11 +2,10 @@ * Main JavaScript file - Entry point of all JS files * ******************************************************/ -// NOTE: ServiceWorker Registration -if ('serviceWorker' in navigator) { - window.addEventListener('load', function () { - // Register a service worker hosted at the root of the - // site using the default scope ('/'). +// Wait until page loaded +window.addEventListener('load', () => { + if ('serviceWorker' in navigator) { + // NOTE: ServiceWorker Registration return navigator.serviceWorker.register('serviceWorker.js', { scope: '/' }).then(function (registration) { @@ -14,10 +13,11 @@ if ('serviceWorker' in navigator) { }).catch(function (error) { return console.log('[Service worker] Registration failed: ', error); }); - }); -} else { - console.log('[ServiceWorker] are not supported.'); -} + } else { + console.log('[ServiceWorker] are not supported.'); + return; + } +}); // NOTE: Set Bootstrap materialdesign document.addEventListener("DOMContentLoaded", function () { diff --git a/public/serviceWorker.js b/public/serviceWorker.js index a4c2a8f..513f564 100644 --- a/public/serviceWorker.js +++ b/public/serviceWorker.js @@ -11,8 +11,8 @@ const appPrefix = 'ohmnews-'; const staticCacheKey = appPrefix + 'static-v' + version; const dataCacheKey = appPrefix + 'content-data'; var allCacheKey = [ - staticCacheKey, - dataCacheKey + staticCacheKey, + dataCacheKey ]; /* ================================== */ @@ -21,64 +21,64 @@ var allCacheKey = [ // 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 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 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; + 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'); + // don't wait + self.skipWaiting(); + // cache static files + event.waitUntil(cacheResources()) + console.log('[ServiceWorker] Install'); }); /* ================================================================ */ @@ -86,66 +86,65 @@ self.addEventListener('install', event => { /* ================================================================ */ // No fetch or pull is called before succesfull activate event. const cacheCleanUp = async () => { - const cacheKeyList = await caches.keys(); + 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); - }); + .map(key => { + caches.delete(key) + console.log('[ServiceWorker] Removing old cache', key); + }); for (const success of deletions) { - await success; + await success; } - return; + return; } self.addEventListener('activate', event => { - event.waitUntil(cacheCleanUp()); - clients.claim(); - console.log('[ServiceWorker] Activate'); + 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 dataUrl = 'https://me.efi.th-nuernberg.de/om/'; - // Parse the URL: - const requestURL = new URL(event.request.url); + // Provide HTTPS URL for query data. + const dataUrl = 'https://me.efi.th-nuernberg.de/om/'; + // Parse the URL: + const requestURL = new URL(event.request.url); - // Start the network request as soon as possible. - //const networkPromise = fetch('/data.json'); + // Start the network request as soon as possible. + //const networkPromise = fetch('/data.json'); - event.respondWith( - caches.match(event.request) - .then(cachedResponse => { - if (cachedResponse) { - return cachedResponse; - } - console.log('[ServiceWorker] Fetch', requestURL.href); - return fetch(event.request).then(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; - } + event.respondWith( + caches.match(event.request) + .then(cachedResponse => { + if (cachedResponse) { + return cachedResponse; + } + console.log('[ServiceWorker] Fetch', requestURL.href); + return fetch(event.request).then(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; + } - // 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 and so does the `res.json` call below. - var responseToCache = response.clone(); + // 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 and so does the `res.json` call below. + var responseToCache = response.clone(); - caches.open(staticCacheKey).then(cache => { - cache.put(event.request, responseToCache); - }); + caches.open(staticCacheKey).then(cache => { + cache.put(event.request, responseToCache); + }); - return response; - }); - }) - ); + return response; + }); + }) + ); });