Skip to content

Question: Nested paths breaks lighthouse PWA test #23

Closed
@userquin

Description

I 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:

imagen

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:

imagen

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

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions