Path issue for Icons and Screenshots

[gevera]

I hope you could share some light on the following issue.

I am working on a web app that has multiple routes. The icons and screenshots are in the asset folder along the manifest.json

{
    "name": "My App",
    "short_name": "My App",
    "description": "Awesome PWA",
    "start_url": "/",
    "scope": "/",
    "icons": [
        {
            "src": "logo-192x192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "logo-512x512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "screenshots": [
        {
         "src": "desktop_screenshot.png",
          "sizes": "1440x900",
          "type": "image/png",
          "form_factor": "wide",
          "label": "Desktop"
        },
        {
            "src": "mobile_screenshot.png",
             "sizes": "375x667",
             "type": "image/png",
             "form_factor": "narrow",
             "label": "Mobile"
           }
    ],
    "display": "standalone"
}

The pwa-install is in the layout, so it is being accessible from every route like so

    <pwa-install id="pwa-install" manifest-url="manifest.json"></pwa-install>

Now if I visit the root page / , the assets, meaning the icons and screenshots, are displayed properly. However, when I do navigate to any other route, the icons and screenshots are missing. Note that the native browser prompt displays correctly the assets regardless of the route. I have tried to change start_url to ./ without any luck. Any feedback will do. Thanks.

[khmyznikov]

Just debug via devtools the requests to your icons. You will see the attempts and why the routes are broken.

[gevera]

I figured out the issue. For multi page web apps, the route for the assets should start with a slash, so instead of

"icons": [
        {
            "src": "logo-192x192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
]

we need

"icons": [
        {
            "src": "/logo-192x192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
]

Thanks for your reply

[anilanar]

According to the spec, icon/screenshot src are relative to the manifest. But I think pwa-install uses them as is, which makes them relative to the current page's url path. For example:

Manifest at https://cdn.com/foo/manifest.json:

{
  ...
  "icons": [ { "src": "icon.png" }]
}

• User visits https://website.com/page/subpage
• pwa-install requests icon from https://website.com/page/icon.png instead of from https://cdn.com/foo/icon.png.

[khmyznikov]

@anilanar nice finding! Can you help with fix? Should be easy 🙂