2 changed files with 48 additions and 35 deletions
+ 7
- 2
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> | |||
+ 41
- 33
public/serviceWorker.js
View File
| @@ -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; | |||
| } | |||
| }()); | |||
| }); | |||
Loading…