Browse Source

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

pull/1/head
Erik Römmelt 5 years ago
parent
commit
2a5f627c38
2 changed files with 48 additions and 35 deletions
  1. 7
    2
      public/index.html
  2. 41
    33
      public/serviceWorker.js

+ 7
- 2
public/index.html View File

<meta name="msapplication-wide310x150logo" content="icon_widetile.png"> <meta name="msapplication-wide310x150logo" content="icon_widetile.png">


<!-- NOTE: iOS - Add to Homescreen --> <!-- 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 --> <!-- Icon: No transparency allowed -->
<link rel="apple-touch-icon" href="img/launcher/launcher_app_icon_192.png"> <!-- iphone --> <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="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="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 --> <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 --> <!-- 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="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="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 --> <link rel="apple-touch-startup-image" sizes="1536x2048" href="ios-splash/apple_splash_1536.png" /><!-- Tablet -->
<script src="routes/profilCard.js"></script> <script src="routes/profilCard.js"></script>
<script src="routes/profilData.js"></script> <script src="routes/profilData.js"></script>


<title>OMApp</title>
<title>OHM News</title>
</head> </head>


<body> <body>

+ 41
- 33
public/serviceWorker.js View File

/* 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.
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 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;
}


// Start the network request as soon as possible.
//const networkPromise = fetch('/data.json');
event.respondWith(async function update() {
try {
var requestURL = new URL(event.request.url);


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;
}
/*if (requestURL.href === postMsgURL) {
console.log('New Msg created. ReqURL: ', event.request.method, event.request.url);
}*/


// 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();
// Start the network request as soon as possible.
const networkPromise = fetch(requestURL);


caches.open(staticCacheKey).then(cache => {
cache.put(event.request, responseToCache);
});
const cachedResponse = await caches.match(event.request);
if (cachedResponse) return cachedResponse;


return response;
});
})
);
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;
}
}());
}); });

Loading…
Cancel
Save