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

ServiceWorker rewritten in Async/Await; SW caches only GET now

Browse Source
This commit is contained in:
Erik Römmelt 2019-02-11 00:28:54 +01:00
parent 07a2480e19
commit 2a5f627c38
2 changed files with 48 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/index.html
View File

@ -25,13 +25,18 @@
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
<!-- NOTE: iOS - Add to Homescreen -->
<!-- Hide Safari UI Components -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- iOS Status bar: black or black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- iOS App Name next to Icon -->
<meta name="apple-mobile-web-app-title" content="OHM News">
<!-- Icon: No transparency allowed -->
<link rel="apple-touch-icon" href="img/launcher/launcher_app_icon_192.png"> <!-- iphone -->
<link rel="apple-touch-icon" sizes="152x152" href="img/launcher/launcher_app_icon_152.png"><!-- ipad -->
<link rel="apple-touch-icon" sizes="180x180" href="img/launcher/launcher_app_icon_180.png"><!-- iphone-retina -->
<link rel="apple-touch-icon" sizes="167x167" href="img/launcher/launcher_app_icon_167.png"><!-- ipad-retina -->
<!-- Splash screen: If not set, will be white screen -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-startup-image" sizes="2048x2732" href="ios-splash/apple_splash_2048.png" /><!-- Tablet -->
<link rel="apple-touch-startup-image" sizes="1668x2224"href="ios-splash/apple_splash_1668.png" /><!-- Tablet -->
<link rel="apple-touch-startup-image" sizes="1536x2048" href="ios-splash/apple_splash_1536.png" /><!-- Tablet -->
@ -67,7 +72,7 @@
<script src="routes/profilCard.js"></script>
<script src="routes/profilData.js"></script>
<title>OMApp</title>
<title>OHM News</title>
</head>
<body>

72
public/serviceWorker.js
View File

@ -109,42 +109,50 @@ self.addEventListener('activate', event => {
/* ========================================= */
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);
//const postMsgURL = 'https://me.efi.th-nuernberg.de/om/api/createMsg';
const postMsgURL = 'http://localhost:8013/api/createMsg';
/* We should only cache GET requests, and deal with the rest of method in the
client-side, by handling failed POST,PUT,PATCH,etc. requests. */
if (event.request.method !== 'GET') { // && event.request.url !== postMsgURL
/* If we don't block the event as shown below, then the request will go to
the network as usual. */
console.log('[ServiceWorker] Fetch event ignored.', event.request.method, event.request.url);
return;
}
event.respondWith(async function update() {
try {
var requestURL = new URL(event.request.url);
/*if (requestURL.href === postMsgURL) {
console.log('New Msg created. ReqURL: ', event.request.method, event.request.url);
}*/
// Start the network request as soon as possible.
//const networkPromise = fetch('/data.json');
const networkPromise = fetch(requestURL);
event.respondWith(
caches.match(event.request)
.then(cachedResponse => {
if (cachedResponse) {
const cachedResponse = await caches.match(event.request);
if (cachedResponse) return cachedResponse;
const networkResponse = await networkPromise;
// Check if response is valid, status is 200, response type is basic
// (indicates request is from origin, means that requests to third party
// assets aren't cached as well.
if (!networkResponse || networkResponse.status !== 200
|| networkResponse.type !== 'basic') return networkResponse;
const cache = await caches.open(staticCacheKey);
// 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.
cache.put(event.request, networkResponse.clone());
console.log('[ServiceWorker] Fetch', event.request);
return networkResponse;
} catch (err) {
// Report a lack of connectivity to the user.
console.log('No Network connection: ',err);
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();
caches.open(staticCacheKey).then(cache => {
cache.put(event.request, responseToCache);
});
return response;
});
})
);
}());
});