How can i prompt native app installation in mobile browsers

Question

Hi i want to display a banner in mobile browser to prompt user to download the app from the store (either Google play or Apple). An example is the following Example banner

For IOS i found this. It seems it works only for safari browser. Is there any way to implement it for other browsers too?

For Android i found this. It is for PWA. I tried to implement it in our website (not PWA) but nothing was displayed.

Is there any way to work in both OSes and in all latest browsers? If there isn't, how can i get the rating, latest icons and check if it is supported in the country?

Birdwatcher

Answer 1

Another alternative is smartbanner.js, ~13 KB, no jQuery or other dependencies.

Easy to set up based on a dozen of meta tags, but also has API for more complex scenarios.

Inspissate

I was looking at this plugin. Any way that you know of to implement it in Angular? Supposedly the smartbanner API was how you're supposed to use it in a single page application. But I could never get smartbanner.publish() to work in any other place than a <script> tag in an html element and even then, would get errors (No options detected. Please consult documentation). These errors broke my unit tests which meant I couldnt deploy and test it. – Perfumery

Answer 2

Smart App Banner for iOS

In order to display the banner whenever a visitor opens your web using an iOS device (iPhone, iPod or iPad) you only need to include the following line within the head element of your HTML code:

<meta name="apple-itunes-app" content="app-id=myAppStoreID">

Smart App Banner for Android

There is no native support on Android for Smart App Banners, but you can use a jQuery plugin instead.

First, download the plugin and upload to your server jquery.smartbanner.css and jquery.smartbanner.js.

Then, you need to include two fragments of code. The first one within the head element:

<meta name="google-play-app" content="app-id=com.package.android">
<link rel="stylesheet" href="/path/a/jquery.smartbanner.css" type="text/css" 
media="screen">

The second piece of code has to be included at the end of the body.

<!-- copy body -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">. 
</script>
<script src="/path/a/jquery.smartbanner.js"></script>
<script type="text/javascript">
  $().smartbanner();
</script>
<!-- end copy body -->

Piaffe