From 2a5f627c38417966ebbe805735e12602e289f4b1 Mon Sep 17 00:00:00 2001 From: Erik Roemmelt Date: Mon, 11 Feb 2019 00:28:54 +0100 Subject: [PATCH] ServiceWorker rewritten in Async/Await; SW caches only GET now --- public/index.html | 9 +++-- public/serviceWorker.js | 74 +++++++++++++++++++++++------------------ 2 files changed, 48 insertions(+), 35 deletions(-) diff --git a/public/index.html b/public/index.html index 78d4554..71ba337 100644 --- a/public/index.html +++ b/public/index.html @@ -25,13 +25,18 @@ + + + + + + - @@ -67,7 +72,7 @@ - OMApp + OHM News diff --git a/public/serviceWorker.js b/public/serviceWorker.js index 513f564..1a70fcb 100644 --- a/public/serviceWorker.js +++ b/public/serviceWorker.js @@ -108,43 +108,51 @@ self.addEventListener('activate', event => { /* 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 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; + } + }()); });