CODEWITHSUNDEEP
androidgoogle-chromeprogressive-web-apps
alexp
alexp

Reputation: 3637

Android Native App Install Banner Is Not Working

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:

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.

Upvotes: 7

Views: 4656

Answers (2)

soloko
soloko

Reputation: 284

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:

  1. Enable this flag in chrome chrome://flags/#bypass-app-banner-engagement-checks
  2. Login to Google Play on your Android device or emulator (make sure the emulator has the play store)
  3. The app should not already be installed on the device
  4. Follow the requirements listed at the top here
  5. 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)

Upvotes: 2

Petr Nagy
Petr Nagy

Reputation: 569

First, troubleshoot using this answer.

Second, make sure the app is not already installed.

Third, if you are testing this on an emulator, make sure you have actually signed in to the Play Store app.

Upvotes: 1

Related Questions