How exactly are we supposed to implement the Native App Install Prompt for Chrome on Android?

Question

I'm looking at the Google documentation at https://developers.google.com/web/fundamentals/app-install-banners/native, trying to figure out how to show an install banner on Chrome for Android to install our native app.

First of all, in a couple of places, this page refers to adding your app to the home screen, which is not what this page is supposed to be about, right? This is supposed to be about installing native apps, not PWAs.

But my real question is: what is the flow supposed to look like in the real world? If all the proper conditions are met, we're supposed to display a button or some other thing the user can interact with, and then Chrome shows an install banner? So, we show a button or a banner that says "Install our app", and then if the user clicks it, Chrome displays another banner that says "Install"? This seems like a very redundant experience, requiring more button clicks to install than just showing the Chrome install banner automatically (which is how I gather it used to work).

I've done a bunch of searches, but can't find any examples where people show how they're using this current flow. Is anyone actually using this?

Should I just use something like https://github.com/ain/smartbanner.js instead?

Answer 1

The docs are confusing, misleading and often refer to PWA's. Once you have the manifest and meet the requirements, there will be a native banner that appears with an install link or add to home screen link. Here are my updated requirements for Android smart app banner and how to test it. I included one missing criteria from the docs: multiple different icon sizes are required.

---

Android Native App Install Prompt Requirements

• The web app nor the native app are already installed.
• Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds)
• Includes a Web App Manifest that includes:
  • short_name
  • name (used in the banner prompt)
  • icons including a 36x36, 48x48, 72x72, 96x96, 144x144, 192x192, 512x512 version
  • prefer_related_applications is true
  • related_applications object with information about the app
• start_url can be set to . for the current location
• Manifest is served over HTTPS - manifest.json
  • include this on your page <link rel="manifest" href="manifest.json" />

Testing

• Login to chrome on your Android device or emulator
• Login to the Google Play store (must have play store on device)
• Enable this flag in chrome chrome://flags/#bypass-app-banner-engagement-checks
• The app should not already be installed on the device

Debugging

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)

Example

manifest.json

{
  "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"
}

Answer 2

The flow is basically defined by prefer_related_applications in the manifest.json ...this differs from PWA, where only a link is added to the home-screen, but no Play Store is being referenced. Once installed, an Android SDK application can filter for relevant content URLs.