PWA support.HEADmaster

3 files changed, 94 insertions, 2 deletions

diff --git a/index.php b/index.php
index 9276831..c42bbf1 100644
--- a/index.php
+++ b/index.php
@@ -5,6 +5,7 @@
 	<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="/img/paw-144.png">
+	<link rel="manifest" href="/manifest.json">
 	<title>Beats per Minute</title>
 	<style>
 		html {
@@ -20,13 +21,13 @@
 		<div class="jumbotron">
 			<h1>Hier klicken um die BPMs zu zählen:</h1>
 			<h2><span id="showBpm">0</span> BPM</h2>
+			<button class="btn btn-primary">Click</button>
 			<div class="mt-5 mb-5 container" id="showDances">
 				<div class="row mb-2" id="showDances-standard">
 				</div>
 				<div class="row mb-2" id="showDances-latein"></div>
 			</div>
 		</div>
-		<button class="btn btn-primary">Click</button>
 	</span>
 	<button id="reset" class="btn btn-secondary">Reset</button>
 
@@ -110,7 +111,7 @@
 				} else {
 					var _bpm = 60 / seconds
 					bpm.push( _bpm );
-					if ( bpm.length > 15 ) {
+					if ( bpm.length > 25 ) {
 						// keep only last 10 clicks
 						bpm.shift();
 					}
@@ -151,5 +152,14 @@
 			reset();
 		});
 	});
+	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);
+		});
+	} else {
+		console.log('no service worker found. offline access is not granted.');
+	}
 </script>
 </body>
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..466f0ea
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,20 @@
+{
+	"name": "BPM / Tanz",
+	"short_name": "BPM / Tanz",
+	"description": "Tippen um die BPMs zu zählen",
+	"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..22bd24f
--- /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 = 'bpm-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);
+	}));
+});