Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to test if Native app install banner works

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.

like image 721
KittyCat Avatar asked Oct 26 '17 12:10

KittyCat


People also ask

How does Smart app banner work?

In essence, a smart app banner will prompt your user to get your app if they're on a mobile device. If the user visits your site on an Android device, they'll be shown a smart banner for the Google Play store. If they're on an iPhone, they'll be shown the iOS smart banner – leading to the Apple App Store.

What is a Smart app banner?

What Is A Smart App Banner? A mobile smart banner uses a fraction of the screen on a mobile website to inform and encourage users to open the native app, or to install it if they don't have it.

How do I know if an application is installed in android programmatically?

Call the below function appInstalledOrNot() with the package name of the app installed on the ANDROID Device as a string parameter. This function returns true if the app is installed otherwise returns false. super. onCreate(savedInstanceState);


1 Answers

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.

like image 149
Elliott Greaves Avatar answered Nov 13 '22 12:11

Elliott Greaves