hopfma
/
om
Watch 4
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Updated ServiceWorker

pull/1/head
Erik Römmelt 5 years ago
parent
81da3b0057
commit
855dbf8ba7
1 changed files with 131 additions and 147 deletions
Split View Show Diff Stats
  1. 131
    147
      public/serviceWorker.js

+ 131
- 147
public/serviceWorker.js View File

@@ -1,167 +1,151 @@
'use strict';

// NOTE: CacheKey & FilesToCache Lists
const cacheKey = 'omapp-';
const staticCacheKey = cacheKey + 's-v' + '1';
const dataCacheKey = casheKey + 'd-v' + '1';
const staticFilesToCache = [
'/',
'manifest.json',
'index.html',
'message.html',
'bookmark.js',
'createMessage.js',
'files.js',
'home.js',
'main.js',
'profil.js',
'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 dataFilesToCache = [
'',
/* ================================== */
/* 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: Registration done in main.js
// NOTE: Install and activate: Populating cache
/* ================================== */
/* 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.
self.addEventListener('install', function(event) {
console.log('[ServiceWorker] Install');
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(
caches.open(staticCacheKey).then(function(cache) {
console.log('[ServiceWorker] Cache static files.');
return cache.addAll(staticFilesToCache);
}),
caches.open(dataCacheKey).then(function(cache) {
console.log('[ServiceWorker] Cache data files.');
return cache.addAll(dataFilesToCache);
})
);
event.waitUntil(cacheResources())
console.log('[ServiceWorker] Install');
});

// NOTE: Activate structure and delete older cache versions
// Activates new version of service worker.
/* ================================================================ */
/* NOTE: Activate: new service worker and delete old cache versions */
/* ================================================================ */
// No fetch or pull is called before succesfull activate event.
self.addEventListener('activate', function(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();
var cacheWhitelist = [staticCacheKey, dataCacheKey];
event.waitUntil(
caches.keys().then(function(cacheKeyList) {
return Promise.all(
cacheKeyList.map(function(key) {
if (cacheWhitelist.indexOf(key) === -1) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
})
);
}).then(() => {
console.log('[ServiceWorker] Activate');
})
);

// Shorten activation time for initial [ServiceWorker] call.
//return self.clients.claim();
console.log('[ServiceWorker] Activate');
});


// NOTE: Fetch structure // TODO: Setup fetching method
self.addEventListener('fetch', function(event) {
const dataUrl = ' localhost:8013/'; // Provide HTTPS URL for query data.
// const url = new URL(event.request.url);
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(staticCacheKey).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
*/
/*
// serve the cat SVG from the cache if the request is
// same-origin and the path is '/dog.svg'
if (url.origin == location.origin && url.pathname == '/dog.svg') {
event.respondWith(caches.match('/cat.svg'));
}
*/

event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
/* ========================================= */
/* 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);


// 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;
}
return fetch(event.request).then(
function(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;
}

// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have two streams.
// - Reason: response is a stream and object can only consumed once
var responseToCache = response.clone();

caches.open(staticCacheKey)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
// 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();

return response;
}
);
})
);
//}
/*
caches.match(event.request).then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}

return caches.open(shellCacheKey).then(cache => {
return fetch(event.request).then(response => {
// Put a copy of the response in the runtime cache.
return cache.put(event.request, response.clone()).then(() => {
return response;
});
});
});
caches.open(staticCacheKey).then(cache => {
cache.put(event.request, responseToCache);
});

})*/
return response;
});
})
);
});


Write Preview
Loading…
Cancel
Save