Search code examples
androidprogressive-web-appsgoogle-chrome-android

Why is my PWA not installing even though the "Install" button is there?

I'm currently building a Progressive Web App (PWA) and I'm trying to get it installed on my phone/computer.

The manifest is set, defined, referenced in the <head> and loaded, as I can see it using Chrome DevTools (Application > Manifest).

There is no warning at all on my manifest, everything seems find, the service-worker is running etc.

When going on my website using my phone, there is the banner at the bottom proposing to install the app, and if I right-click on the menu at the top right, there is the "Install" option (not add to home screen).

When I click on it, it looks like it is installing the app, but the icon on the home screen still has the chrome "label/icon" on it, so the PWA is not installed correctly. After plugging my phone onto my computer, and installing the PWA, I can see the following error in DevTools console: failed to install webApk for: [url of manifest].

There is no more information, and after searching on Google there's literally only one result, it's the source code of Chromium...

Here's my manifest.json file:

{
    "id": "/index.php",
    "name": "NAME",
    "short_name": "NAME",
    "description": "DESCRIPTION",
    "start_url": "/index.php",
    "scope": "/",
    "display": "standalone",
    "background_color": "#582C7A",
    "theme_color": "#FF7F01",
    "lang": "fr",
    "orientation": "portrait",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "/maskable_icon_x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        },
        {
            "src": "/assets/icon/logo.svg",
            "sizes": "any",
            "type": "image/svg+xml",
            "purpose": "any"
        }
    ]
}

How can I solve this issue and get my PWA to be installed correctly?

Thanks.

Solution

  • This seems to be an issue with Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1107123

    While the issue is said to be fixed, I did some testing and the only thing that created this error of failing to install the PWA is this:

    "sizes": "any"

    Indeed, everything works fine once you remove it, and you can install your PWA correctly.