From 1cd93d078f7053ee2ace993721d166d49093fcf7 Mon Sep 17 00:00:00 2001 From: Adnan Usman Date: Mon, 2 Apr 2018 17:49:04 -0700 Subject: [PATCH 1/6] Service Worker installed --- js/main.js | 16 ++++++++++++++ sw.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 sw.js diff --git a/js/main.js b/js/main.js index 90101759b..197f6fe53 100644 --- a/js/main.js +++ b/js/main.js @@ -374,3 +374,19 @@ function showHelp() { $("#openSideBar").fadeIn(150,"linear"); $('#helpScreen').fadeToggle(150, "linear"); } + +if ('serviceWorker' in navigator) { + window.addEventListener('load', function() { + navigator.serviceWorker.register('./sw.js').then(function(reg) { + console.log('SW registered successfully'); + + if(!navigator.serviceWorker.controller) { + return; + } + + }, function(err) { + console.log('SW registration failed'); + }); + + }); +} diff --git a/sw.js b/sw.js new file mode 100644 index 000000000..a23f9b40a --- /dev/null +++ b/sw.js @@ -0,0 +1,65 @@ +var CACHE_NAME = 'hextris-v1'; +var urlsToCache = [ + 'index.html', + 'vendor/hammer.min.js', + 'vendor/js.cookie.js', + 'vendor/jsonfn.min.js', + 'vendor/keypress.min.js', + 'vendor/jquery.js', + 'js/save-state.js', + 'js/view.js', + 'js/wavegen.js', + 'js/math.js', + 'js/Block.js', + 'js/Hex.js', + 'js/Text.js', + 'js/comboTimer.js', + 'js/checking.js', + 'js/update.js', + 'js/render.js', + 'js/input.js', + 'js/main.js', + 'js/initialization.js', + 'http://fonts.googleapis.com/css?family=Exo+2', + 'style/fa/css/font-awesome.min.css', + 'style/style.css', + 'style/rrssb.css', + 'vendor/rrssb.min.js', + 'vendor/sweet-alert.min.js' +]; + +// install service worker on first install and load cache assets. +self.addEventListener('install', function(event) { + event.waitUntil( + caches.open(CACHE_NAME).then(function(cache) { + return cache.addAll(urlsToCache); + }) + ); +}); + +// respond to fetch requests by browser using service worker. +self.addEventListener('fetch', function(event) { + const requestUrl = new URL(event.request.url); + + if (requestUrl.origin === location.origin) { + event.respondWith(getNetworkResponse(event.request)); + return; + } + + event.respondWith(fetch(event.request)); +}); + +// If asset exists in cache, respond with cache, +// otherwise respond from network after putting asset in cache. +function getNetworkResponse(request) { + return caches.open(CACHE_NAME).then(cache => { + return cache.match(request).then(response => { + if (response) return response; + + return fetch(request).then(networkResponse => { + cache.put(request, networkResponse.clone()); + return networkResponse; + }) + }); + }); +}; \ No newline at end of file From 2a85724dfba44ea1d249cd78b7341248a30b2f06 Mon Sep 17 00:00:00 2001 From: Adnan Usman Date: Mon, 2 Apr 2018 17:57:28 -0700 Subject: [PATCH 2/6] Added service worker notification for updates --- js/main.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ sw.js | 26 +++++++++++++++++++++++++- 2 files changed, 74 insertions(+), 1 deletion(-) diff --git a/js/main.js b/js/main.js index 197f6fe53..9336755fa 100644 --- a/js/main.js +++ b/js/main.js @@ -375,6 +375,7 @@ function showHelp() { $('#helpScreen').fadeToggle(150, "linear"); } +// ask browser if it supports service workers, if it does, register it. if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('./sw.js').then(function(reg) { @@ -383,6 +384,25 @@ if ('serviceWorker' in navigator) { if(!navigator.serviceWorker.controller) { return; } + + if(reg.waiting) { + notifySWUpdates(reg.waiting); + } + + if(reg.installing) { + trackSWStates(reg.installing); + } + + reg.addEventListener('updatefound', function() { + trackSWStates(reg.installing); + }) + + var reloading; + navigator.serviceWorker.addEventListener('controllerchange', function() { + if(reloading) return; + window.location.reload(); + reloading = true; + }); }, function(err) { console.log('SW registration failed'); @@ -390,3 +410,32 @@ if ('serviceWorker' in navigator) { }); } + +// notify user of game update available, +// when user clicks button service worker updates with new cache and page reloads. +function notifySWUpdates(reg) { + console.log('There is a new Service Worker available'); + let SW_Button = document.createElement('button'); + SW_Button.innerHTML = 'Update Available'; + let doc_body = document.getElementsByTagName('body')[0]; + doc_body.appendChild(SW_Button); + SW_Button.style.backgroundColor = 'blue'; + SW_Button.style.color = '#fff'; + SW_Button.style.position = 'fixed'; + SW_Button.style.bottom = '0px'; + SW_Button.style.right = '0px'; + SW_Button.style.padding = '5px 10px'; + SW_Button.addEventListener('click', function() { + console.log(reg); + reg.postMessage({activate: 'true'}); + }); +} + +// tracks service worker state and activates notification function when installed. +function trackSWStates(reg) { + reg.addEventListener('statechange', function() { + if(this.state == 'installed') { + notifySWUpdates(reg); + } + }); +} \ No newline at end of file diff --git a/sw.js b/sw.js index a23f9b40a..485f06612 100644 --- a/sw.js +++ b/sw.js @@ -62,4 +62,28 @@ function getNetworkResponse(request) { }) }); }); -}; \ No newline at end of file +}; + +// Delete any unused old caches when a new service worker is activated +self.addEventListener('activate', function(event) { + event.waitUntil( + Promise.all([ + clients.claim(), + caches.keys().then(function(cacheNames) { + cacheNames.filter(function(cacheName) { + if(cacheName.startsWith('hextris') && cacheName !== CACHE_NAME) { + caches.delete(cacheName); + } + }) + }) + ] + ) + ) +}); + +// listen to messages and skip waiting state of service worker +// this basically activates service worker when notification recieved. +self.addEventListener('message', function(event) { + if(event.data.activate == 'true'); + self.skipWaiting(); +}); \ No newline at end of file From 51ca5910940c0400976d92e160f54bbffab8ed0b Mon Sep 17 00:00:00 2001 From: Adnan Usman Date: Tue, 3 Apr 2018 14:13:49 -0700 Subject: [PATCH 3/6] created manifest.json --- index.html | 1 + manifest.json | 11 +++++++++++ 2 files changed, 12 insertions(+) create mode 100644 manifest.json diff --git a/index.html b/index.html index 355f2a809..6f3427357 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,7 @@ + diff --git a/manifest.json b/manifest.json new file mode 100644 index 000000000..1b14630b6 --- /dev/null +++ b/manifest.json @@ -0,0 +1,11 @@ +{ + "background_color": "#ecf0f1", + "display": "standalone", + "icons": [], + "name": "Hextris", + "short_name": "Hextris", + "description": "Fast paced HTML5 puzzle game inspired by Tetris!", + "start_url": "/", + "scope": "/", + "theme_color": "#ecf0f1" +} \ No newline at end of file From 44a12740f5b944e055d59aa1efd9378dc29f6492 Mon Sep 17 00:00:00 2001 From: Adnan Usman Date: Tue, 3 Apr 2018 14:34:18 -0700 Subject: [PATCH 4/6] created assets.json instead of long list of urls --- js/assets.json | 31 +++++++++++++++++++++++++++++++ sw.js | 41 +++++++++++------------------------------ 2 files changed, 42 insertions(+), 30 deletions(-) create mode 100644 js/assets.json diff --git a/js/assets.json b/js/assets.json new file mode 100644 index 000000000..037a9d94b --- /dev/null +++ b/js/assets.json @@ -0,0 +1,31 @@ +{ +"cache": + [ + "index.html", + "vendor/hammer.min.js", + "vendor/js.cookie.js", + "vendor/jsonfn.min.js", + "vendor/keypress.min.js", + "vendor/jquery.js", + "js/save-state.js", + "js/view.js", + "js/wavegen.js", + "js/math.js", + "js/Block.js", + "js/Hex.js", + "js/Text.js", + "js/comboTimer.js", + "js/checking.js", + "js/update.js", + "js/render.js", + "js/input.js", + "js/main.js", + "js/initialization.js", + "http://fonts.googleapis.com/css?family=Exo+2", + "style/fa/css/font-awesome.min.css", + "style/style.css", + "style/rrssb.css", + "vendor/rrssb.min.js", + "vendor/sweet-alert.min.js" + ] +} \ No newline at end of file diff --git a/sw.js b/sw.js index 485f06612..ca3a7c8ec 100644 --- a/sw.js +++ b/sw.js @@ -1,38 +1,19 @@ -var CACHE_NAME = 'hextris-v1'; -var urlsToCache = [ - 'index.html', - 'vendor/hammer.min.js', - 'vendor/js.cookie.js', - 'vendor/jsonfn.min.js', - 'vendor/keypress.min.js', - 'vendor/jquery.js', - 'js/save-state.js', - 'js/view.js', - 'js/wavegen.js', - 'js/math.js', - 'js/Block.js', - 'js/Hex.js', - 'js/Text.js', - 'js/comboTimer.js', - 'js/checking.js', - 'js/update.js', - 'js/render.js', - 'js/input.js', - 'js/main.js', - 'js/initialization.js', - 'http://fonts.googleapis.com/css?family=Exo+2', - 'style/fa/css/font-awesome.min.css', - 'style/style.css', - 'style/rrssb.css', - 'vendor/rrssb.min.js', - 'vendor/sweet-alert.min.js' -]; +var CACHE_NAME = 'hextris-v2'; // install service worker on first install and load cache assets. self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME).then(function(cache) { - return cache.addAll(urlsToCache); + fetch('js/assets.json').then(function(response) { + return response.json(); + }).catch(function(err) { + console.log('json fetch err:', err); + }).then(function(assetManifest) { + let cacheFiles = assetManifest.cache; + cache.addAll(cacheFiles); + }).catch(function(err) { + console.log('problem adding to cache:', err); + }) }) ); }); From 4b17eb6666214a3e44c98e5b9773c94759b7e0cf Mon Sep 17 00:00:00 2001 From: Adnan Usman Date: Tue, 3 Apr 2018 14:51:47 -0700 Subject: [PATCH 5/6] Switched over urls to SSL (https://) for service worker to work properly --- index.html | 10 +++++----- js/assets.json | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 6f3427357..a8042c894 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,13 @@ Hextris - + - + @@ -18,10 +18,10 @@ - + - + @@ -33,7 +33,7 @@ - + diff --git a/js/assets.json b/js/assets.json index 037a9d94b..4eae4f85b 100644 --- a/js/assets.json +++ b/js/assets.json @@ -21,7 +21,7 @@ "js/input.js", "js/main.js", "js/initialization.js", - "http://fonts.googleapis.com/css?family=Exo+2", + "https://fonts.googleapis.com/css?family=Exo+2", "style/fa/css/font-awesome.min.css", "style/style.css", "style/rrssb.css", From d86230ca1eaeda1dc36d9f47b98f1b411f3350fd Mon Sep 17 00:00:00 2001 From: Adnan Usman Date: Wed, 4 Apr 2018 10:57:21 -0700 Subject: [PATCH 6/6] fixed some fetch related errors --- sw.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/sw.js b/sw.js index ca3a7c8ec..686f09ef0 100644 --- a/sw.js +++ b/sw.js @@ -1,4 +1,4 @@ -var CACHE_NAME = 'hextris-v2'; +var CACHE_NAME = 'hextris-v3'; // install service worker on first install and load cache assets. self.addEventListener('install', function(event) { @@ -36,11 +36,18 @@ function getNetworkResponse(request) { return caches.open(CACHE_NAME).then(cache => { return cache.match(request).then(response => { if (response) return response; - - return fetch(request).then(networkResponse => { - cache.put(request, networkResponse.clone()); - return networkResponse; - }) + + if(request.cache === 'only-if-cached') { + return fetch(request, {mode: "same-origin"}).then(networkResponse => { + cache.put(request, networkResponse.clone()); + return networkResponse; + }) + } else { + return fetch(request).then(networkResponse => { + cache.put(request, networkResponse.clone()); + return networkResponse; + }) + } }); }); };