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

南楼画角 提交于 2019-12-04 19:33:51

问题


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?


回答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.




回答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>



回答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



来源:https://stackoverflow.com/questions/5679918/iphone-redirect-to-app-store-on-mobile-safari-if-app-is-not-installed

标签

工具导航Map