Question

我在优化的移动Safari网站上有两个链接。一个是App Store的链接，用于下载我的应用程序。另一个是Launch App按钮，它使用注册的app：//协议打开应用程序。问题是，如果未安装应用程序，则当用户单击“启动应用程序”按钮时，移动版Safari会窒息。是否可以检测注册的协议是否可用，如果不可用，请使用适当的URL（例如下载应用程序URL）更改启动应用程序按钮，以便用户不会获得令人讨厌的弹出窗口？

Answer 1

这与this question大致相似;最相关的建议是有一个单独的按钮试图启动应用程序，同时创建一个计时器，如果没有安装应用程序，如果它是，那么Safari会在计时器启动之前退出的情况下触发计时器。

Answer 2

如果您在网页上添加iframe并将src设置为自定义方案，则iOS会自动重定向到应用中的该位置。如果未安装该应用程序，则不会发生任何事情。这允许您深入链接到应用程序（如果已安装），或者如果未安装则重定向到App Store。

例如，如果您安装了Twitter应用，并导航到包含以下标记的网页，您将立即转到该应用。如果您没有安装Twitter应用程序，您会看到文本＆＃34;未安装Twitter应用程序。＆＃34;

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

这意味着您可以使用单个按钮指向具有与此类似的标记的网页：

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

Answer 3

下面是一个有效的代码片段，但并不完美。你仍然可以看到safari弹出窗口，但其他一切都按预期工作：

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

我在此处发布了有关详细信息的博文：http://aawaara.com/post/74543339755/smallest-piece-of-code-thats-going-to-change-the-world

iPhone：如果未安装应用程序，则在移动版Safari中重定向到应用商店

3 个答案: