Hello everyone,
I've made a Native app install banner for my site meeting the following criteria:
My manifest.json
file also meets this extra criteria:
short_name
.image/png
.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:
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.
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? 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.
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);
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:
- The app uses a service worker
- The site is using HTTPS
- The app has a manifest declared
- 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With