diff options
| -rw-r--r-- | index.php | 14 | ||||
| -rw-r--r-- | manifest.json | 20 | ||||
| -rw-r--r-- | serviceworker.js | 62 |
3 files changed, 94 insertions, 2 deletions
@@ -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); + })); +}); |