Redirect to application if installed, otherwise to App Store

I know it's possible to link directly to an app in iOS by registering a custom scheme (e.g. so://) and it's also possible to link to the app in the appstore via itunes.

In many cases, the ideal flow is to provide a link that redirects to the app if it's installed and to the store if not. Is this possible, and if so, how?

Added for clarity, the scenario is I'm opening a link (http) from an e-mail on my iphone that's inviting me to join a group in an application. If the user has the app installed on that device it should open, otherwise the http link should redirect to itunes.

I think the more simple answer would be to set up a page on your server with the following javascript:

(function() {
  var app = {
    launchApp: function() {
      window.location.replace("myapp://");
      this.timer = setTimeout(this.openWebApp, 1000);
    },

    openWebApp: function() {
      window.location.replace("http://itunesstorelink/");
    }
  };

  app.launchApp();
})();

This basically attempts to redirect to your app and sets a timeout to redirect to the app store if it fails.

You could even make the code a little more smart, and check the user agent to see if they are an ios user, an android user, or a webuser, and then redirect them appropriately.

There is no way to check for this. However, there is a nice workaround.

The idea is basically this:

The first time you open your app, you open up mobile safari from within your app to a predefined URL on your server
On that URL you set up a cookie, like appInstalled to the users mobile safari
You then kick the user back to your app with your registered scheme (same as FB does with SSO)
All your email links point to your website, but on the website you check if the browser is mobile Safari and if the appInstalled cookie exists
If either the browser is not mobile Safari or the cookie is not found, you redirect to the AppStore, or stay in your webpage.
If the conditions of #4 are true, you redirect the user to your app with the registered scheme
If the app has been deleted by the user, so the custom url scheme fails, you have a fail-safe redirect to the appstore

The 2 last steps are explained on this SO post

If you have a web page you link to from the email with the web page containing an iframe with the src set to the custom scheme for your App, iOS will automatically redirect to that location in the App. If the app is not installed, nothing will happen. This allows you to deep link into the App if it is installed, or redirect to the App Store if it is not installed.

For example, if you have the twitter app installed, and navigate to a webpage containing the following markup, you would be immediately directed to the app. If you did not have the Twitter app installed, you would see the text "The Twitter App is not installed."

<!DOCTYPE html>
<html>
    <head>
    <title>iOS Automatic Deep Linking</title>
    </head>
    <body>
        <iframe src="twitter://" width="0" height="0"></iframe>
        <p>The Twitter App is not installed</p>
    </body>
</html>

Here is a more thorough example that redirects to the App store if the App is not installed:

<!DOCTYPE html>
<html>
    <head>
    <title>iOS Automatic Deep Linking</title>
    <script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
    <script src='//mobileesp.googlecode.com/svn/JavaScript/mdetect.js'></script>
    <script>
      (function ($, MobileEsp) {
        // On document ready, redirect to the App on the App store.
        $(function () {
          if (typeof MobileEsp.DetectIos !== 'undefined' && MobileEsp.DetectIos()) {
            // Add an iframe to twitter://, and then an iframe for the app store
            // link. If the first fails to redirect to the Twitter app, the
            // second will redirect to the app on the App Store. We use jQuery
            // to add this after the document is fully loaded, so if the user
            // comes back to the browser, they see the content they expect.
            $('body').append('<iframe class="twitter-detect" src="twitter://" />')
              .append('<iframe class="twitter-detect" src="itms-apps://itunes.com/apps/twitter" />');
          }
        });
      })(jQuery, MobileEsp);
    </script>
    <style type="text/css">
      .twitter-detect {
        display: none;
      }
    </style>
    </head>
    <body>
    <p>Website content.</p>
    </body>
</html>

Redirect to application if installed, otherwise to App Store

Related

Recent Posts