hopfma/om
4
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update Tab Icon; Organize ServiceWorker

Browse Source
This commit is contained in:
Erik Römmelt 2019-02-10 17:34:20 +01:00
parent 63e1363dd2
commit 07a2480e19
3 changed files with 109 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -16,7 +16,7 @@
<!-- NOTE: Icon for tab recognition --> <!-- NOTE: Icon for tab recognition -->
<!-- highest resolution for Chrome & Opera --> <!-- highest resolution for Chrome & Opera -->
<link rel="icon" sizes="192x192" href="/public/img/app_icon.png"> <link rel="icon" sizes="192x192" href="favicon.ico">
<!-- icons for Safari -> iOS Icons --> <!-- icons for Safari -> iOS Icons -->
<!-- icons for IE & Windows phone --> <!-- icons for IE & Windows phone -->
<meta name="msapplication-square70x70logo" content="icon_smalltile.png"> <meta name="msapplication-square70x70logo" content="icon_smalltile.png">

18
public/main.js
View File

@ -2,11 +2,10 @@
* Main JavaScript file - Entry point of all JS files * * Main JavaScript file - Entry point of all JS files *
******************************************************/ ******************************************************/
// NOTE: ServiceWorker Registration // Wait until page loaded
if ('serviceWorker' in navigator) { window.addEventListener('load', () => {
window.addEventListener('load', function () { if ('serviceWorker' in navigator) {
// Register a service worker hosted at the root of the // NOTE: ServiceWorker Registration
// site using the default scope ('/').
return navigator.serviceWorker.register('serviceWorker.js', { return navigator.serviceWorker.register('serviceWorker.js', {
scope: '/' scope: '/'
}).then(function (registration) { }).then(function (registration) {
@ -14,10 +13,11 @@ if ('serviceWorker' in navigator) {
}).catch(function (error) { }).catch(function (error) {
return console.log('[Service worker] Registration failed: ', error); return console.log('[Service worker] Registration failed: ', error);
}); });
}); } else {
} else { console.log('[ServiceWorker] are not supported.');
console.log('[ServiceWorker] are not supported.'); return;
} }
});
// NOTE: Set Bootstrap materialdesign // NOTE: Set Bootstrap materialdesign
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {

199
public/serviceWorker.js
View File

@ -11,8 +11,8 @@ const appPrefix = 'ohmnews-';
const staticCacheKey = appPrefix + 'static-v' + version; const staticCacheKey = appPrefix + 'static-v' + version;
const dataCacheKey = appPrefix + 'content-data'; const dataCacheKey = appPrefix + 'content-data';
var allCacheKey = [ var allCacheKey = [
staticCacheKey, staticCacheKey,
dataCacheKey dataCacheKey
]; ];
/* ================================== */ /* ================================== */
@ -21,64 +21,64 @@ var allCacheKey = [
// Install new service worker even when old version still in use. // Install new service worker even when old version still in use.
// Install happens only once a lifetime of a service worker. // Install happens only once a lifetime of a service worker.
const cacheResources = async () => { const cacheResources = async () => {
const staticFilesToCache = [ const staticFilesToCache = [
'./', './',
'favicon.ico', 'favicon.ico',
'index.html', 'index.html',
'main.js', 'main.js',
'manifest.json', 'manifest.json',
'font/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2', 'font/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2',
'font/KFOlCnqEu92Fr1MmEU9fBBc4.woff2', 'font/KFOlCnqEu92Fr1MmEU9fBBc4.woff2',
'font/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2', 'font/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2',
'font/KFOlCnqEu92Fr1MmSU5fBBc4.woff2', 'font/KFOlCnqEu92Fr1MmSU5fBBc4.woff2',
'font/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2', 'font/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2',
'font/KFOlCnqEu92Fr1MmWUlfBBc4.woff2', 'font/KFOlCnqEu92Fr1MmWUlfBBc4.woff2',
'font/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2', 'font/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2',
'font/KFOmCnqEu92Fr1Mu4mxK.woff2', 'font/KFOmCnqEu92Fr1Mu4mxK.woff2',
'font/KFOmCnqEu92Fr1Mu7GxKOzY.woff2', 'font/KFOmCnqEu92Fr1Mu7GxKOzY.woff2',
'img/launcher/launcher_app_icon_152.png', 'img/launcher/launcher_app_icon_152.png',
'img/launcher/launcher_app_icon_167.png', 'img/launcher/launcher_app_icon_167.png',
'img/launcher/launcher_app_icon_180.png', 'img/launcher/launcher_app_icon_180.png',
'img/launcher/launcher_app_icon_192.png', 'img/launcher/launcher_app_icon_192.png',
'img/launcher/launcher_app_icon_512.png', 'img/launcher/launcher_app_icon_512.png',
'img/app_icon.png', 'img/app_icon.png',
'img/launcher_app_icon.png', 'img/launcher_app_icon.png',
'img/profil_icon.png', 'img/profil_icon.png',
'lib/bootstrap-font-and-icons.css', 'lib/bootstrap-font-and-icons.css',
'lib/bootstrap-material-design.js', 'lib/bootstrap-material-design.js',
'lib/bootstrap-material-design.min.css', 'lib/bootstrap-material-design.min.css',
'lib/jquery-3.3.1.min.js', 'lib/jquery-3.3.1.min.js',
'lib/popper-1.12.6.js', 'lib/popper-1.12.6.js',
'lib/vue-router.js', 'lib/vue-router.js',
'lib/vue.js', 'lib/vue.js',
'routes/bookmark.js', 'routes/bookmark.js',
'routes/createMessage.js', 'routes/createMessage.js',
'routes/files.js', 'routes/files.js',
'routes/home.js', 'routes/home.js',
'routes/messageData.js', 'routes/messageData.js',
'routes/msgCard.js', 'routes/msgCard.js',
'routes/profil.js', 'routes/profil.js',
'routes/profilCard.js', 'routes/profilCard.js',
'routes/profilData.js', 'routes/profilData.js',
'style/style.css', 'style/style.css',
]; ];
const dataFilesToCache = []; const dataFilesToCache = [];
const cacheStatic = await caches.open(staticCacheKey); const cacheStatic = await caches.open(staticCacheKey);
cacheStatic.addAll(staticFilesToCache); cacheStatic.addAll(staticFilesToCache);
console.log('[ServiceWorker] Cache static files.'); console.log('[ServiceWorker] Cache static files.');
const cacheData = await caches.open(dataCacheKey); const cacheData = await caches.open(dataCacheKey);
cacheData.addAll(dataFilesToCache); cacheData.addAll(dataFilesToCache);
console.log('[ServiceWorker] Cache data files.'); console.log('[ServiceWorker] Cache data files.');
return; return;
} }
self.addEventListener('install', event => { self.addEventListener('install', event => {
// don't wait // don't wait
self.skipWaiting(); self.skipWaiting();
// cache static files // cache static files
event.waitUntil(cacheResources()) event.waitUntil(cacheResources())
console.log('[ServiceWorker] Install'); console.log('[ServiceWorker] Install');
}); });
/* ================================================================ */ /* ================================================================ */
@ -86,66 +86,65 @@ self.addEventListener('install', event => {
/* ================================================================ */ /* ================================================================ */
// No fetch or pull is called before succesfull activate event. // No fetch or pull is called before succesfull activate event.
const cacheCleanUp = async () => { const cacheCleanUp = async () => {
const cacheKeyList = await caches.keys(); const cacheKeyList = await caches.keys();
const deletions = cacheKeyList const deletions = cacheKeyList
.filter(key => key.startsWith(appPrefix) && !allCacheKey.includes(key)) .filter(key => key.startsWith(appPrefix) && !allCacheKey.includes(key))
.map(key => { .map(key => {
caches.delete(key) caches.delete(key)
console.log('[ServiceWorker] Removing old cache', key); console.log('[ServiceWorker] Removing old cache', key);
}); });
for (const success of deletions) { for (const success of deletions) {
await success; await success;
} }
return; return;
} }
self.addEventListener('activate', event => { self.addEventListener('activate', event => {
event.waitUntil(cacheCleanUp()); event.waitUntil(cacheCleanUp());
clients.claim(); clients.claim();
console.log('[ServiceWorker] Activate'); console.log('[ServiceWorker] Activate');
}); });
/* ========================================= */ /* ========================================= */
/* NOTE: Fetch: Update logic for cache files */ /* NOTE: Fetch: Update logic for cache files */
/* ========================================= */ /* ========================================= */
self.addEventListener('fetch', event => { self.addEventListener('fetch', event => {
// Provide HTTPS URL for query data. // Provide HTTPS URL for query data.
const dataUrl = 'https://me.efi.th-nuernberg.de/om/'; const dataUrl = 'https://me.efi.th-nuernberg.de/om/';
// Parse the URL: // Parse the URL:
const requestURL = new URL(event.request.url); const requestURL = new URL(event.request.url);
// Start the network request as soon as possible. // Start the network request as soon as possible.
//const networkPromise = fetch('/data.json'); //const networkPromise = fetch('/data.json');
event.respondWith( event.respondWith(
caches.match(event.request) caches.match(event.request)
.then(cachedResponse => { .then(cachedResponse => {
if (cachedResponse) { if (cachedResponse) {
return cachedResponse; return cachedResponse;
} }
console.log('[ServiceWorker] Fetch', requestURL.href); console.log('[ServiceWorker] Fetch', requestURL.href);
return fetch(event.request).then(response => { return fetch(event.request).then(response => {
// Check if we received a valid response // Check if we received a valid response
// - Ensure the response is valid. // - Ensure the response is valid.
// - Check the status is 200 on the response. // - 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. // - 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. // This means that requests to third party assets aren't cached as well.
if (!response || response.status !== 200 || response.type !== 'basic') { if (!response || response.status !== 200 || response.type !== 'basic') {
return response; return response;
} }
// We have to clone the response here because request bodies // We have to clone the response here because request bodies
// can only be read once. Placing a response in the cache // can only be read once. Placing a response in the cache
// counts as a read and so does the `res.json` call below. // counts as a read and so does the `res.json` call below.
var responseToCache = response.clone(); var responseToCache = response.clone();
caches.open(staticCacheKey).then(cache => { caches.open(staticCacheKey).then(cache => {
cache.put(event.request, responseToCache); cache.put(event.request, responseToCache);
}); });
return response; return response;
}); });
}) })
); );
}); });