Updated manifest.json

package.json

@@ -1,7 +1,7 @@
 {
-	"name": "omapp",
+	"name": "ohmnews",
 	"version": "1.0.0",
-	"description": "ohm-management app for a alternative communication and organization",
+	"description": "ohm-information app for smarter and more intuitive information and organization",
 	"main": "server.js",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
@@ -13,7 +13,7 @@
 	},
 	"keywords": [
 		"ohm",
-		"management",
+		"news",
 		"app"
 	],
 	"author": "Barbalan, Gruenzinger, Mandutz, Pham, Roemmelt",

public/index.html

@@ -10,48 +10,62 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<!-- <meta http-equiv="refresh" content="30"> -->
 
+	<!-- NOTE: Define Theme Color -->
+	<!-- Chrome, Firefox OS and Opera -->
+	<meta name="theme-color" content="#0046a0">
+
+	<!-- NOTE: Icon for tab recognition -->
+	<!-- highest resolution for Chrome & Opera -->
+	<link rel="icon" sizes="192x192" href="/public/img/app_icon.png">
+	<!-- icons for Safari -> iOS Icons -->
+	<!-- icons for IE & Windows phone -->
+	<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
+	<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
+	<meta name="msapplication-square310x310logo" content="icon_largetile.png">
+	<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
+
 	<!-- NOTE: iOS - Add to Homescreen -->
 	<!-- Icon: No transparency allowed -->
-	<link rel="apple-touch-icon" href="img/ios-icon/th_ohmicon_192x192.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/ios-icon/th_ohmicon_152x152.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/ios-icon/th_ohmicon_180x180.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/ios-icon/th_ohmicon_167x167.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 -->
 	<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 -->
-	<link rel="apple-touch-startup-image" sizes="1125x2436" href="/ios-splash/apple_splash_1125.png" /><!-- Tablet ? Phone -->
+	<link rel="apple-touch-startup-image" sizes="1125x2436" href="ios-splash/apple_splash_1125.png" /><!-- Tablet ? Phone -->
-	<link rel="apple-touch-startup-image" sizes="1242x2208" href="/ios-splash/apple_splash_1242.png" /><!-- Tablet ? Phone -->
+	<link rel="apple-touch-startup-image" sizes="1242x2208" href="ios-splash/apple_splash_1242.png" /><!-- Tablet ? Phone -->
-	<link rel="apple-touch-startup-image" sizes="750x1334" href="/ios-splash/apple_splash_750.png" /><!-- Phone -->
+	<link rel="apple-touch-startup-image" sizes="750x1334" href="ios-splash/apple_splash_750.png" /><!-- Phone -->
-	<link rel="apple-touch-startup-image" sizes="640x1136" href="/ios-splash/apple_splash_640.png" /><!-- Phone -->
+	<link rel="apple-touch-startup-image" sizes="640x1136" href="ios-splash/apple_splash_640.png" /><!-- Phone -->
 
 	<!-- NOTE: CSS -->
 	<!-- CSS_Material Design for Bootstrap fonts and icons -->
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
+	<link rel="stylesheet" href="lib/bootstrap-font-and-icons.css">
 	<!-- CSS_Material Design for Bootstrap minified CSS -->
-	<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
+	<link rel="stylesheet" href="lib/bootstrap-material-design.min.css">
     <!-- CSS_Custom Design -->
 	<link rel="stylesheet" type="text/css" href="style/style.css">
 
     <!-- NOTE: Call manifest.json -->
 	<link rel="manifest" href="manifest.json">
 
-    <!-- NOTE: VUE.js und VueRouter -->
+    <!-- NOTE: Load JQuery, Vue.js, VueRouter -->
     <script src=lib/jquery-3.3.1.min.js></script>
     <script src=lib/vue.js></script>
     <script src=lib/vue-router.js></script>
 
 	<!-- NOTE: JavaScript Libs & Files -->
-    <script src="home.js"></script>
+    <script src="routes/home.js"></script>
-    <script src="files.js"></script>
+    <script src="routes/files.js"></script>
-    <script src="createMessage.js"></script>
+    <script src="routes/createMessage.js"></script>
-    <script src="bookmark.js"></script>
+    <script src="routes/bookmark.js"></script>
-    <script src="profil.js"></script>
+    <script src="routes/profil.js"></script>
-    <script src="msgCard.js"></script>
+    <script src="routes/msgCard.js"></script>
-    <script src="messageData.js"></script>
+    <script src="routes/messageData.js"></script>
-	<script src="profilCard.js"></script>
+	<script src="routes/profilCard.js"></script>
-	<script src="profilData.js"></script>
+	<script src="routes/profilData.js"></script>
 
 	<title>OMApp</title>
 </head>
@@ -108,10 +122,10 @@
 	<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> -->
 	<!-- CDN_jQuery minified lib -->
 	<!--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>-->
-	<!-- CDN_Popper.js lib -->
+	<!-- Load Popper.js -->
-	<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
+	<script src="lib/popper-1.12.6.js"></script>
-	<!-- CDN_Bootstrap JS lib -->
+	<!-- Load Bootstrap.js -->
-	<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
+	<script src="lib/bootstrap-material-design.js"></script>
 	<!-- NOTE: Call main.js -->
 	<script src="main.js"></script>
 

public/lib/bootstrap-font-and-icons.css

@@ -0,0 +1,87 @@
+/* fallback */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../font/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(../font/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(../font/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../font/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../font/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../font/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../font/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../font/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../font/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}

public/main.js

@@ -23,8 +23,3 @@ if ('serviceWorker' in navigator) {
 document.addEventListener("DOMContentLoaded", function () {
 	$('body').bootstrapMaterialDesign();
 }, false);
-/*
-$(document).ready(function() {
-	$('body').bootstrapMaterialDesign();
-});
-*/

public/manifest.json

@@ -1,15 +1,22 @@
 {
-  "short_name": "OMapp",
+  	"short_name": "OHM News",
-  "name": "OMapp",
+  	"name": "OHM News",
-  "icons": [
+  	"icons": [
-    {
+    	{
-      "src":"img/th_nbg_ohmicon_amp.png",
+      		"src":"img/launcher/launcher_app_icon_192.png",
-      "sizes": "200x200",
+      		"type": "image/png",
-      "type": "image/png"
+      		"sizes": "192x192"
-    }
+    	},
-  ],
+		{
-  "start_url": "/om/?utm_source=homescreen",
+      		"src":"img/launcher/launcher_app_icon_512.png",
-  "background_color": "#FFF",
+      		"type": "image/png",
-  "theme_color": "#0046a0",
+      		"sizes": "512x512"
-  "display": "standalone"
+    	}
+  	],
+	"start_url": "/om/?utm_source=homescreen",
+  	"background_color": "#FFF",
+  	"display": "standalone",
+	"orientation": "portrait",
+  	"scope": "/om/",
+  	"theme_color": "#0046a0"
 }

public/routes/profilCard.js

@@ -1,6 +1,6 @@
 Vue.component('ProfilCard', {
     template: `<div>
-                <img class="profil-img rounded-circle" src="img/profil_icon2.png" width=120px height=120px>
+                <img class="profil-img rounded-circle" src="img/profil_icon.png" width=120px height=120px>
                 <div class="profil-card card">
                     <div class="edit-item"><i class="material-icons">edit</i></div>
                     <div class="profil-text">

public/serviceWorker.js

@@ -1,167 +1,151 @@
 'use strict';
+/* ================================== */
+/* NOTE: Registration done in main.js */
+/* ================================== */
 
-// NOTE: CacheKey & FilesToCache Lists
+/* =================================== */
-const cacheKey = 'omapp-';
+/* NOTE: CacheKey & FilesToCache Lists */
-const staticCacheKey = cacheKey + 's-v' + '1';
+/* =================================== */
-const dataCacheKey = casheKey + 'd-v' + '1';
+const version = '1';
-const staticFilesToCache = [
+const appPrefix = 'ohmnews-';
-	'/',
+const staticCacheKey = appPrefix + 'static-v' + version;
-	'manifest.json',
+const dataCacheKey = appPrefix + 'content-data';
-	'index.html',
+var allCacheKey = [
-	'message.html',
+	staticCacheKey,
-	'bookmark.js',
+	dataCacheKey
-	'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: Install: Save files to cache */
-// NOTE: Install and activate: Populating 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) {
+const cacheResources = async () => {
-	console.log('[ServiceWorker] Install');
+	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(
+  	event.waitUntil(cacheResources())
-		caches.open(staticCacheKey).then(function(cache) {
+	console.log('[ServiceWorker] Install');
-			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);
-		})
-	);
 });
 
-// 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];
+	console.log('[ServiceWorker] Activate');
-	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();
 });
 
+/* ========================================= */
+/* NOTE: Fetch: Update logic for cache files */
+/* ========================================= */
 
-// NOTE: Fetch structure // TODO: Setup fetching method
+self.addEventListener('fetch', event => {
-self.addEventListener('fetch', function(event) {
+	// Provide HTTPS URL for query data.
-	const dataUrl = '	localhost:8013/'; // Provide HTTPS URL for query data.
+	const dataUrl = 'https://me.efi.th-nuernberg.de/om/';
-	// const url = new URL(event.request.url);
+	// Parse the URL:
-	console.log('[ServiceWorker] Fetch', event.request.url);
+	const requestURL = new URL(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(
+	// Start the network request as soon as possible.
-			caches.open(staticCacheKey).then(function(cache) {
+	//const networkPromise = fetch('/data.json');
-				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(
+	event.respondWith(
-			caches.match(event.request)
+		caches.match(event.request)
-			.then(function(response) {
+		.then(cachedResponse => {
-				if (response) {
+			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
+				// We have to clone the response here because request bodies
-						// and because we want the browser to consume the response
+				// can only be read once. Placing a response in the cache
-						// as well as the cache consuming the response, we need
+				// counts as a read and so does the `res.json` call below.
-						// to clone it so we have two streams.
+				var responseToCache = response.clone();
-						// - Reason: response is a stream and object can only consumed once
-						var responseToCache = response.clone();
 
-						caches.open(staticCacheKey)
+				caches.open(staticCacheKey).then(cache => {
-						  .then(function(cache) {
+					cache.put(event.request, responseToCache);
-							cache.put(event.request, responseToCache);
+				});
-						  });
 
-						return response;
+				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;
-            });
-          });
-        });
-
-})*/
 });
-