Installation of demos doesn't work

[Hofer-Julian]

If I attempt to install the demo with Firefox or Chrome or Android, I am only greeted with an error page when opening it.

[Nitrodist]

Yes, it's broken. The period tracker and html_and_css project within this project links to app.js but within that specific directory, it doesn't exist. I checked the git history for that file path and didn't come up with anything.

You can reproduce this error by trying to use the period tracker online here and see that app.js fails its network request in the Network developer tools.

https://mdn.github.io/pwa-examples/cycletracker/html_and_css/?

[jedick]

Hello. I suspect that the OP's screenshot shows a rendering of the 404 page at http://mdn.github.io/. The problem could be that the app loads index.html from the root of the site instead of from a subdirectory (e.g. https://mdn.github.io/pwa-examples/cycletracker/service_workers/)

The MDN docs state (emphasis added) "If your app's main page is at the root of your site, you can set the start_url to /."

The demo is in a subdirectory on GitHub pages, so the app's main page is not at the root of the site.

The MDN docs also state that "You can set "start_url": "./" to use the default behavior on all browsers."

• Doing this is a first step to resolve this issue.
• However, after making this change, I was getting fetch retriever errors when reloading the app in the browser. It appears that the paths in sw.js also need to be updated to point to the subdirectory rather than the root of the site.
• Finally, to get the app icon to appear in iOS I had to add scope to the manifest.

Summary of changes I applied to get CycleTracker to work as expected on both iOS and Android with hosting on GitHub pages, running in the browser or as an installed app:

In cycletracker.json, modify start_url and add scope:

"start_url": "./",
"scope": ".",

In sw.js, prepend all paths with .:

"./",
"./index.html",
"./app.js",
"./style.css",
"./icons/wheel.svg",
...
event.respondWith(caches.match("./"));