iPhone: redirect to app store on mobile safari if app is not installed

25,718

Solution 1

This is broadly similar to this question; the most relevant suggestions there are to have a single button that attempts to launch the app, simultaneously creating a timer that'll fire if the app isn't installed on the grounds that if it were then Safari would have exited before the timer fires.

Solution 2

If you add an iframe on your web page with the src set to 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>

This means that you could have a single button that directs to a web page with markup similar to this:

<!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>

Solution 3

Below is a code snippet that works, but is not perfect. You still see the safari popup, but everything else works as expected:

<script type="text/javascript">
    var timer;
    var heartbeat;
    var lastInterval;

    function clearTimers() {
        clearTimeout(timer);
        clearTimeout(heartbeat);
    }

    window.addEventListener("pageshow", function(evt){
        clearTimers();
    }, false);

    window.addEventListener("pagehide", function(evt){
        clearTimers();
    }, false);

    function getTime() {
        return (new Date()).getTime();
    }

    // For all other browsers except Safari (which do not support pageshow and pagehide properly)
    function intervalHeartbeat() {
        var now = getTime();
        var diff = now - lastInterval - 200;
        lastInterval = now;
        if(diff > 1000) { // don't trigger on small stutters less than 1000ms
            clearTimers();
        }
    }

    function launch_app_or_alt_url(el) {
        lastInterval = getTime();
        heartbeat = setInterval(intervalHeartbeat, 200);
        document.location = 'myapp://customurl';
        timer = setTimeout(function () {
            document.location = 'http://alternate.url.com';
        }, 2000);
    }

    $(".source_url").click(function(event) {
        launch_app_or_alt_url($(this));
        event.preventDefault();
    });
</script>

I have blogged about the details here: http://aawaara.com/post/74543339755/smallest-piece-of-code-thats-going-to-change-the-world

25,718

bignay2000

Updated on January 05, 2020

Comments

bignay2000 over 4 years

I have two links on an optimized mobile Safari web site. One is a link to the App Store to download my application. The other is a Launch App button which uses the registered app:// protocol to open the application. The problem is that mobile Safari chokes when the user clicks the Launch App button if the application is not installed. Is it possible to detect if the registered protocol is available, and if it isn't, change the Launch App button with an appropriate URL, such as the download app URL, so that the user doesn't get a nasty popup?
SuperDuperTango almost 9 years

This works on ios7, but doesn't seem to work on ios8. I can call any other app URL except itms:// or itms-app://. It does work on ios7. Does this have to do with apple pushing the use of smart banners instead of auto-redirecting to the app store?