Adjust Routing to support PWA on Githubpages

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

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) {

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"
 }

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 */