pwa

6 files changed, 92 insertions, 1 deletions

diff --git a/img/paw-144.png b/img/paw-144.png
new file mode 100644
index 0000000..1a56dda
--- /dev/null
+++ b/img/paw-144.png
diff --git a/img/paw-512.png b/img/paw-512.png
new file mode 100644
index 0000000..d67292f
--- /dev/null
+++ b/img/paw-512.png
diff --git a/img/paw-small.png b/img/paw-small.png
new file mode 100644
index 0000000..847da33
--- /dev/null
+++ b/img/paw-small.png
diff --git a/index.html b/index.html
index 3f67070..1303744 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,10 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	<meta name="description" content="Berechnet die Preise für Pizza im Verhältnis zum Flächeninhalt. Lieber zwei kleine oder eine große Pizza kaufen?">
 	<link rel='stylesheet' type='text/css' href="/css/bootstrap.min.css">
-	<link rel='icon' href="https://iamfabulous.de/favicon.ico">
+	<link rel='icon' href="/img/paw-144.png">
+	<link rel="manifest" href="/manifest.json">
 	<title>Wie teuer ist eine Pizza im Verhältnis zum Flächeninhalt?</title>
+	<meta name="theme-color" content="#fd8a02">
 	<style>
 		html {
 			width: 100%;
@@ -350,6 +352,13 @@
 			clicked(true);
 		});
 	});
+	if ('serviceWorker' in navigator){
+		navigator.serviceWorker.register('serviceworker.js').then(function(registration){
+			console.log('ServiceWorker registration successful with scope: ', registration.scope);
+		}).catch(function(err){
+			console.log('ServiceWorker registration failed: ', err);
+		});
+	}
 	</script>
 </body>
 </html>
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..0d91e5d
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,20 @@
+{
+	"name": "Pizza Rechner",
+	"short_name": "Pizza Rechner",
+	"description": "Wie teuer ist eine Pizza im Verhältnis zum Flächeninhalt?",
+	"icons": [{
+		"src": "https://iamfabulous.de/favicon.ico"
+	}, {
+		"src": "/img/paw-144.png",
+		"type": "image/png",
+		"sizes": "144x144"
+	}, {
+		"src": "/img/paw-512.png",
+		"type": "image/png",
+		"sizes": "512x512"
+	}],
+	"start_url": ".",
+	"display": "standalone",
+	"background_color": "#171717",
+	"theme_color": "#fd8a02"
+}
diff --git a/serviceworker.js b/serviceworker.js
new file mode 100644
index 0000000..3fc0daf
--- /dev/null
+++ b/serviceworker.js
@@ -0,0 +1,62 @@
+self.addEventListener('install', function(event){
+	console.log('Install');
+});
+
+self.addEventListener('activate', function(event){
+	console.log('Activate');
+});
+
+var cacheName = 'pizza-v1';
+var successResponses = /^0|([123]\d\d)|(40[14567])|410$/;
+
+function fetchAndCache(request){
+	console.log('fetchAndCache', request.url);
+	return fetch(request.clone()).then(function(response){
+		console.log(request.method, request.url, response.status, response.type);
+		if (request.method == 'GET' && response && successResponses.test(response.status) && response.type == 'basic'){
+			console.log('Cache', request.url);
+			caches.open(cacheName).then(function(cache){
+				cache.put(request, response);
+			});
+		}
+		return response.clone();
+	});
+};
+
+function cacheOnly(request){
+	console.log('cacheOnly', request.url);
+	return caches.open(cacheName).then(function(cache){
+		return cache.match(request);
+	});
+};
+
+// Fastest strategy from https://github.com/GoogleChrome/sw-toolbox
+self.addEventListener('fetch', function(event){
+	var request = event.request;
+	var url = request.url;
+	console.log('Fetch', url);
+	event.respondWith(new Promise(function(resolve, reject){
+		var rejected = false;
+		var reasons = [];
+
+		var maybeReject = function(reason){
+			reasons.push(reason.toString());
+			if (rejected){
+				reject(new Error('Both cache and network failed: "' + reasons.join('", "') + '"'));
+			} else {
+				rejected = true;
+			}
+		};
+
+		var maybeResolve = function(result){
+			if (result instanceof Response){
+				resolve(result);
+			} else {
+				maybeReject('No result returned');
+			}
+		};
+
+		fetchAndCache(request.clone()).then(maybeResolve, maybeReject);
+		cacheOnly(request).then(maybeResolve, maybeReject);
+	}));
+});