Android Native App Install Banner Is Not Working

Question

I am trying to get a native app install banner for my Android app on my site. My manifest.json looks like this:

{
    "short_name": "App Name",
    "icons": [
        {
            "src": "launch-icon.png",
            "sizes": "144x144",
            "type": "image/png"
        }
    ],
    "prefer_related_applications": true,
    "related_applications": [
        {
            "platform": "play",
            "id": "my.app.id"
        }
    ]
}

It meets all the critiera list here:

Served over HTTPS
short_name
144x144 icon

I am skipping the engagement checks for testing by setting the chrome flag:

chrome://flags/#bypass-app-banner-engagement-checks

I have tried the example page and it works as expected, i.e. the banner shows. However I cannot see any difference between how my manifest is set up vs. the one in the example. I have used remote debugging to verify that the manifest file does get fetched.

Did you try not skipping the engagement check? To check if your code is working. — Mr.Rebot
Did you figure out how to fix it? 1. is service-worker.js mandatory to add? 2. What should the start_url be? I have Project -> view -> .cshtml. I added link tag to this html I have my .json in Project -> manifest.json 3. Will the banner show up in dev tools or emulator? or only in mobile? — Priya Payyavula
One thing they forgot to mention, but indicate on their example page is that it takes 24 hours or 1 day for the install banner to display. It started working on mine after 24 hours was up. I put the manifest.json file in a separate folder off of root in my MVC 5 app, so not having the file in the root directory did not matter. I also checked to make sure Chrome was able to display the contents of my manifest.json file. Example page here. googlechrome.github.io/samples/app-install-banner/… — Dumber_Texan2

soloko soloko · Accepted Answer · 2021-03-18T21:34:34

It looks like you have most of the requirements met. There is one missing criteria: multiple different icon sizes are required. Those sizes are 36x36, 48x48, 72x72, 96x96, 144x144, 192x192.

Also, the start_url can be . to set the current path.

Here's an example:

{
  "name": "App Name",
  "short_name": "App Name Install Banner Sample",
  "icons": [
    {
      "src": "icon-0-75x.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "icon-1x.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icon-1-5x.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "prefer_related_applications": true,
  "related_applications": [
    {
      "platform": "play",
      "id": "com.google.samples.apps.iosched",
      "url": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched"
    }
  ],
  "start_url": ".",
  "display": "standalone"
}

As a reminder:

Enable this flag in chrome chrome://flags/#bypass-app-banner-engagement-checks
Login to Google Play on your Android device or emulator (make sure the emulator has the play store)
The app should not already be installed on the device
Follow the requirements listed at the top here
Inspect the sources tab in your browser to see if the manifest is served correctly and remember to check the console for any errors (warnings are fine)

Android Native App Install Banner Is Not Working

2 Answers