Launching app OR app store from Safari?

Solution 1:

It's not possible to check if app is installed from a web page. You could do it inside an other app by checking if your url scheme can be opened using UIApplication's -canOpenURL: method, but there is no javascript equivalent to this.

However, you can use the following workaround:

<script language="javascript">
    function open_appstore() {
        window.location='http://itunes.com/';
    }

    function try_to_open_app() {
        setTimeout('open_appstore()', 300);
    }
</script>

<a onClick="javascript:try_to_open_app();" href="yourappurl:">App name</a>

This code will set a timeout on the link that will call the open_appstore function if this timeout ends. Since your link is pointed at the app's custom url, Safari will try to open that link and if it can, it will open the app and stop the timer, so AppStore link will not be opened.

If the app link can't be opened, when timer runs out it will display an error popup saying it can't open the page (can't get rid of that), but it will immediately go to AppStore and dismiss that error.

iOS 9 adds a really nice feature that lets your app open a http/s url: Universal Links

In iOS 10 there is a popup saying "Open in [App Name]" when you tap the link and the app is installed. If the user does not tap on "Open" in the given timeout, this solution will use the fallback. As 300ms is too short to tap anything, this solution always fails on iOS 10.

Solution 2:

This worked for me with a similar situation: wherein I wanted to open gmaps app if it was supported - otherwise go to gmap site directly.

function mapLink(addy) {     
  addy = encodeURIComponent(addy);

  var fallback = 'http://maps.google.com/?q=' + addy
  , link = 'comgooglemaps://?q=' + addy;

  try {
    document.location = link;
  } catch(err) {
    document.location = fallback;
  }
}

Seems to work pretty well for my use case.

Update: If you want to do a new window on fallback, this still allowed the ios error message to pop up. To get around it try this.

  try {
    document.location = link;
  } catch(err) {
    window.location.reload(true);
    window.open(fallback, '_blank');
  }

Solution 3:

The Solution from Apple:

From Apple Documentation

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

If the app is already installed on a user's device, the banner intelligently changes its action, and tapping the banner will simply open the app. If the user doesn’t have your app on his device, tapping on the banner will take him to the app’s entry in the App Store. When he returns to your website, a progress bar appears in the banner, indicating how much longer the download will take to complete. When the app finishes downloading, the View button changes to an Open button, and tapping the banner will open the app while preserving the user’s context from your website.

Smart App Banners automatically determine whether the app is supported on the user’s device. If the device loading the banner does not support your app, or if your app is not available in the user's location, the banner will not display.

To add a Smart App Banner to our webpage, include the following meta tag in the head of each page where you’d like the banner to appear:

NOTE: We can also pass the app-argument: like myName,etc.,

Check that Providing Navigational Context to Your App Header in this Page

Updates:

1. Once you have closed the banner that showing up, then that will not be displayed again even though you had that meta tag in our html.

2. To reset that launch the settings App then navigate to General>Resent>Reset all settings