From 8ee4aee7f145d36df2a1d2160b6629e4bf7ad121 Mon Sep 17 00:00:00 2001
From: p0wen <Philly.e@hotmail.de>
Date: Mon, 28 Sep 2020 09:02:06 +0000
Subject: [PATCH] Adjust Routing to support PWA on Githubpages

---
 README.md                |  1 +
 assets/js/scripts/app.js |  2 +-
 manifest.json            | 14 +++++++------
 sw.js                    | 44 ++++++++++++++++++++--------------------
 4 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 88e636a..a05722d 100644
--- a/README.md
+++ b/README.md
@@ -187,6 +187,7 @@ Testing Methods
 * Fixed Bugs & Issues:
 ** Sound on Safari (switched from SoundManager2 to Howler.js)
 ** Location of the play/pause button due to absolute positioning
+** Setup of PWA was tricky due to routing of github pages - solution was adapted from https://gist.github.com/kosamari/7c5d1e8449b2fbc97d372675f16b566e
 
 * Open Issues:
 ** landscape view an mobile devices
diff --git a/assets/js/scripts/app.js b/assets/js/scripts/app.js
index ff78a8c..bbe876b 100644
--- a/assets/js/scripts/app.js
+++ b/assets/js/scripts/app.js
@@ -2,7 +2,7 @@
 
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', function() {
-    navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    navigator.serviceWorker.register('/zengarden/sw.js', {scope: '/zengarden/'}).then(function(registration) {
       // Registration was successful
       console.log('ServiceWorker registration successful with scope: ', registration.scope);
     }, function(err) {
diff --git a/manifest.json b/manifest.json
index b0ba914..ca25208 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,27 +2,29 @@
   "name": "Zengarden",
   "short_name": "zengarden",
   "icons": [{
-      "src": "assets/media/img/favicon_io/zenapple.png",
+      "src": "/zengarden/assets/media/img/favicon_io/zenapple.png",
       "sizes": "180x180",
       "type": "image/png"
     }, {
-      "src": "assets/media/img/favicon_io/zen192x192.png",
+      "src": "/zengarden/assets/media/img/favicon_io/zen192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },{
-      "src": "assets/media/img/favicon_io/maskable_icon.png",
+      "src": "/zengarden/assets/media/img/favicon_io/maskable_icon.png",
       "sizes": "196x196",
       "type": "image/png",
       "purpose": "maskable"
     }, {
-      "src": "assets/media/img/favicon_io/zen512x512.png",
+      "src": "/zengarden/assets/media/img/favicon_io/zen512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }],
   "lang": "en-US",
   "description": "Find time to meditate and track your progress",
-  "start_url": "/index.html",
+  "start_url": "/zengarden/index.html",
+  "scope": "/zengarden/",
   "display": "standalone",
   "background_color": "grey",
-  "theme_color": "white"
+  "theme_color": "#ff6000",
+  "orientation": "portrait"
 }
\ No newline at end of file
diff --git a/sw.js b/sw.js
index b999b70..f7d29eb 100644
--- a/sw.js
+++ b/sw.js
@@ -1,26 +1,26 @@
-/** how to make a progressive web app  - https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605*/
+/** how to make a progressive web app  - https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605
+* "Once the cache is created it adds all of the files listed in the filesToCache array. 
+* (Please note that while this code works for demonstration purposes it is not intended for production as it will stop if it fails to load even one of the files.)" https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605  
+*/ 
 
-
-/* "Once the cache is created it adds all of the files listed in the filesToCache array. (Please note that while this code works for demonstration purposes it is not intended for production as it will stop if it fails to load even one of the files.)" https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605 */ 
-
-var cacheName = "zengarden";
-var filesToCache = [
-  "/",
-  "/index.html",
- /** 
-  * "/assets/media/img/afternoon.jpg",
-  "/assets/media/img/sunrise.jpg",
-  "/assets/media/img/pause.svg",
-  "/assets/media/img/play.svg",
-  "/assets/media/sounds/ambientsound.mp3",
-  "/assets/media/sounds/ambientsound.webm",
-  "/assets/media/sounds/endbell.mp3",
-  "/assets/media/sounds/endbell.webm",
-  "/assets/media/sounds/startbell.mp3",
-  "/assets/media/sounds/startbell.webm",
-  */ 
-  "/assets/js/scripts/app.js",
-  "/assets/css/style.css",
+let appName = "zengarden";
+let cacheVersion = "version_1";
+let cacheName = appname + cacheVersion;
+let filesToCache = [
+  "/zengarden/",
+  "/zengarden/index.html",
+  "/zengarden/assets/media/img/afternoon.jpg",
+  "/zengarden/assets/media/img/sunrise.jpg",
+  "/zengarden/assets/media/img/pause.svg",
+  "/zengarden/assets/media/img/play.svg",
+  "/zengarden/assets/media/sounds/ambientsound.mp3",
+  "/zengarden/assets/media/sounds/ambientsound.webm",
+  "/zengarden/assets/media/sounds/endbell.mp3",
+  "/zengarden/assets/media/sounds/endbell.webm",
+  "/zengarden/assets/media/sounds/startbell.mp3",
+  "/zengarden/assets/media/sounds/startbell.webm",
+  "/zengarden/assets/js/scripts/app.js",
+  "/zengarden/assets/css/style.css",
 ];
 
 /* Start the service worker and cache all of the app's content */