CODEWITHSUNDEEP
vue.jsprogressive-web-appsvitemanifest.jsonweb-app-manifest
Albert Mudarra
Albert Mudarra

Reputation: 11

How can I use relative paths in my manifest.json file for a PWA?

I have built a web application using Vite + Vue and I want it to be installable as a mobile application. By adding a manifest.json file, with the proper config, my web application should be treated as a Progressive Web App and could be installed in all sorts of devices. I have created a basic manifest.json this way, following this guide.

{
    "name": "My app",
    "short_name": "My app",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "icons": [
        {
            "src": "/img/pwa_logo.png",
            "sizes": "512x512"
        }
    ]
}

This works fine when developing locally, but when building the app and deploying it, both the start_url and the src for the icon seems to be invalid.

The only solution that I came up with is to put the specific url in start_url and src. However this is not a great solution because I have several environments, and I would have to specify 3 different urls, and create 3 different manifest.json, one for each environment.

It also does not make sense because in every documentation I have seen about web app manifests, they specify the start_url as "/", not hardcoded ones.

How can I avoid having 3 different manifest files, and hardcoded urls?

Upvotes: 1

Views: 790

Answers (1)

init-qy
init-qy

Reputation: 356

2 issues in your manifest:

  • An icons property that includes a 192x192 px and a 512x512 px icon.
  • A prefer_related_applications property set to a value other than true.

You can try to use chrome Lighthouse in DevTools to check your pwa manifest.json.

For more information, you can see lighthouse-guide and mdn-guide

Upvotes: -1

Related Questions