PWA on Github pages

user_7545993 0
Viewed 4630

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...

progressive-web-apps github-pages github javascript
2 Answers

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

user_99356540
Related