PWA on Github pages

Question

I'm working on PWA on my page, and I'm following 100% this simple codelab - https://codelabs.developers.google.com/codelabs/add-to-home-screen/#0 and everything works fine (on exmaple code used, and also on my own webpage), but only when i test it on localhost. after deploying it on github pages, i got lots of errors:

1. GET https://[myusername].github.io/manifest.json 404 () (ie. there may be something wrong with paths, as there should be project name before manifest file i guess)
2. Manifest: Line: 1, column: 1, Unexpected token. (in devtools i can see there's although it's normal json file and it's working fine on my localhost);
3. TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
4. and after clicking "Add to homescreen" in devtools, i got: Manifest: Line: 1, column: 1, Unexpected token. and Site cannot be installed: the manifest could not be fetched, is empty, or could not be parsed.

Any ideas? I don't know if i'm doing something wrong or there's something wrong with github pages...

Terryn

Answer 1

The root path of Github Pages is the user name ^{https://{github_username}.github.io/{repository}}, which means that if your repository is to become a PWA, then the start_url in manifest.json should be adjusted accordingly, and your other paths that point to the root path, such as / should also be given the repository name /repo/ to work correctly.

for example

manifest.json

{
  // ...
  "id": "/repository/", // not "/"
  "start_url": "/repository/", // if you set "/" that means: `https://{github_username}.github.io/` not `https://{github_username}.github.io/repository`
}

app.js

navigator.serviceWorker.register('/repository/sw.js') // not '/sw.js'

Full example

• source: https://github.com/CarsonSlovoka/twenty48/tree/gh-pages/docs
• demo: https://carsonslovoka.github.io/twenty48/

Suppressive

Answer 2

It looks like the service-worker.js and manifest.json files may have gotten corrupted somehow, because I can't open either file on my computer even with multiple downloads. (I'm looking at the /final folder)

I'd also suggest looking at other PWA's already on Github, such as pwarocks to see how they've pulled off a PWA using Github Pages.

Decisive

Well, for me the files itself are working fine (+ new files in my own project, based on this tutorial), but only on localhost testing, not after publishing on github. Probably i should check another source, but this seems to be the simplest. – Terryn