How to test if Native app install banner works

Question

Hello everyone,

I've made a Native app install banner for my site meeting the following criteria:

• Have a web app manifest file.
• Be served over HTTPS.

My manifest.json file also meets this extra criteria:

• a short_name.
• a name (used in the banner prompt).
• a 192x192 png icon, your icon declaration's should include a mime type of image/png.
• a related_applications object with information about the app.

So my manifest.json file looks like this:

{
  "short_name": "test",
  "name": "test test",
  "prefer_related_applications": true,
  "related_applications": [
    {
    "platform": "play",
    "id": "secret"
    }
  ],
  "icons": [
    {
      "src": "appicon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "appicon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "appicon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    }
  ]
}

I've also added <link rel="manifest" href="/manifest.json"> to every page.

So I believe it should all work but I want to be sure that it all works, how can I test it since the most important criteria is:

• Be visited by the user twice, over two separate days during the course of two weeks.

Which means in order to test if it actually works I have to visit the site 2 separate days.. There must be another way right?

I hope someone know's how to test this.

Thanks in advance.

Answer 1

Citing Google's sample page: https://googlechrome.github.io/samples/app-install-banner/

The web app install banner user prompt that Chrome will trigger to indicate that the user can add your web app to the users home screen. It will only prompt when a number of criteria have been met:

1. The app uses a service worker
2. The site is using HTTPS
3. The app has a manifest declared
4. The manifest has a short_name, 144-pixel icon and a type of 'image/png'

From my own experience, this banner isn't as straightforward to test as you would like.

The sample page claims, but I haven't found this helped force the banner to display.

For testing we encourage you to force the banner to appear by setting the chrome://flags/#bypass-app-banner-engagement-checks flag.

The banner will only show up once in a day, for user-experience great, but for debugging it's not so great (given the chrome flag doesn't work)... I ended up reinstalling chrome on my test devices each time I needed to debug. A coworker had an idea of fast forwarding the systems date/time, I never tried this though.

Hope this helps.

e.g.