Question: Nested paths breaks lighthouse PWA test
See original GitHub issueI have found some problems when using nested routes with the plugin: lighthouse cannot resolve start_url
when in nested path route, for example just request https://vitesse.netlify.app/hi/a
in private mode on chrome, open dev tools and run lighthouse with PWA check checked:
The problem in question can be solved just adding the scope
to the manifest.webmanifest
file and also initializing it with the basePath
.
By default it is initialized as ./
, and I don’t know if this value is ok to be used as scope
when registering the service worker. I register it using router.isReady
callback instead on index page and change the default pattern to be /
, and so the header, the manifest.webmanifest
and the registration matches:
This is because it seems that the nested parent path acts as a new scope, that is distinct from the missing scope
.
Another think that I don’t know if it is required is to add a header like that to the html (I just add it as a http header from the server side):
service-worker-allowed: `${basePath}`
Here is a working manifest.webmanifest.
You can see a working sample here: https://cancer.malvarez.info/conozca-su-riesgo, then click on + icon and run the test (it is with vite 1 + vitesse 1, I’m migrating it to vite 2 + vitesse 2).
Issue Analytics
- State:
- Created 3 years ago
- Comments:27 (25 by maintainers)
Something is wrong @antfu , go to vitesse demo page, then open manifest from devtools, it is base64 encoded.
You must configure netlify to server
manifest.webmanifest
files withapplication/manifest+json
content type, it is being served withapplication/octet-stream
content type.The scope would be set to
base
by default from v0.4.6. I think it’s good to make things just works if possible, thanks for the notice and suggestions