Browse Source

Update Tab Icon; Organize ServiceWorker

pull/1/head
Erik Römmelt 5 years ago
parent
commit
07a2480e19
3 changed files with 109 additions and 110 deletions
  1. 1
    1
      public/index.html
  2. 9
    9
      public/main.js
  3. 99
    100
      public/serviceWorker.js

+ 1
- 1
public/index.html View File

@@ -16,7 +16,7 @@

<!-- NOTE: Icon for tab recognition -->
<!-- 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 IE & Windows phone -->
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">

+ 9
- 9
public/main.js View File

@@ -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 () {

+ 99
- 100
public/serviceWorker.js View File

@@ -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;
});
})
);
});

Loading…
Cancel
Save