如何检查是否通过iPhone上的网页安装了应用程序?


142

我想创建一个网页,该页面将在iPhone未安装应用程序的情况下将iPhone重定向到应用程序商店,但是如果iPhone安装了应用程序,我希望它打开应用程序。

我已经在iPhone应用程序中实现了自定义网址,因此该应用程序的网址如下所示:

myapp://

如果此网址无效,我希望页面重定向到应用商店。这有可能吗?

如果我没有在手机上安装该应用程序,并在safari中编写myapp://网址,那么我得到的只是一条错误消息。

即使我真的很想知道使用JavaScript的丑陋骇客?


1
这在每个iOS版本中都在不断变化-iOS9再次破坏了所有功能。我建议您使用branch.io之类的服务来为您解决这个问题。我帮助构建了Branch Link服务的一部分,目前它处理了6000多种不同的重定向边缘案例……太疯狂了。
Alex Austin

1
在2017年,如果你需要的是链接到你的应用程序从电子邮件,你倒是应该看看我的回答:stackoverflow.com/questions/13044805/...
塞巴斯蒂安·洛伯

Answers:


199

据我所知,您无法从浏览器中检查是否已安装应用程序。

但是您可以尝试将手机重定向到应用程序,如果没有任何反应,请将手机重定向到指定页面,如下所示:

setTimeout(function () { window.location = "https://itunes.apple.com/appdir"; }, 25);
window.location = "appname://";

如果第二行代码给出结果,则永远不会执行第一行。

希望这可以帮助!

类似的问题:


20
当前在iOS 6.1.2中,这似乎仅在webapp模式下有效。如果直接从浏览器中使用该应用程序,它将按预期方式打开外部应用程序,但还会触发超时并重定向浏览器。
米卡·图珀拉

我需要针对iOS和Android的此类解决方案。我发现此答案已集成到此处的跨平台解决方案中:gist.github.com/FokkeZB/6635236#file-all-in-one-php
Justin

4
如果未安装该应用程序,则会引发难看的“找不到页面”警报。无论如何,我们可以压制这一点
Akshat Agarwal

3
@AkshatAgarwal,能否请您详细说明如何编码以抑制“未找到页面警报”
Harpreet

2
现在有新的方法可以在Android和iOS中实现此功能。看看Android应用程序链接iOS通用链接
maledr53

157

为了进一步解决这个问题,有时您需要添加额外的代码来处理人们在启动应用程序后返回浏览器的问题,即setTimeout函数将在他们运行时立即运行。所以,我做这样的事情:

var now = new Date().valueOf();
setTimeout(function () {
    if (new Date().valueOf() - now > 100) return;
    window.location = "https://itunes.apple.com/appdir";
}, 25);
window.location = "appname://";

这样,如果冻结了代码执行(即应用程序切换),它将无法运行。


2
此解决方案比其他解决方案好得多,我不得不增加50点的时间
Magico

1
我对它在iOS 7上失败的评论是错误的:我只需要将100毫秒增加到几秒钟(无论如何都不需要那么短)。
devios1

代替itunes.apple.com/appdir,保存一个步骤(无需等待http重定向),然后直接链接到应用程序商店URL方案。例如:itms://itunes.apple.com/us/app/yelp/id284910350
Justin

太棒了,它对于ios应用程序正常工作,相同的代码在android应用程序中同时重定向到两个网址。您为打开应用程序和Play商店的android做过吗?
Mehul Dudhat

5
这将持续打开我的应用程序和应用程序商店,即使在50点也是如此。iOS 12
Josh Wolff

27

iOS Safari具有一项功能,可让您在网页上添加“智能”横幅,该横幅将链接到您的应用程序(如果已安装)或App Store。

您可以通过添加一个 meta在页面上标签来实现。如果您希望应用程序在加载时做一些特别的事情,甚至可以指定详细的应用程序URL。

有关详细信息,请访问Apple的“ 使用智能应用程序横幅广告推广应用程序”页面。

该机制具有易于操作和呈现标准化横幅的优点。缺点是您对外观或位置没有太多控制权。另外,如果在Safari以外的浏览器中查看该页面,则所有选择均关闭。


2
但是,如果用户未安装应用程序,则不会显示应用程序横幅
TomSawyer

通用链接或智能横幅都不适合我。我需要具有多个指向不同应用程序的本机应用程序链接。每个都安装了Check IF,启动它,否则去商店。我也无法控制将所有权文件上传到通用链接的域。因此,这两种选择对我来说都是无效的。需要一个纯JavaScript解决方案。
FranticRock

16

截至2017年,似乎没有可靠的方法可以检测到已安装的应用程序,并且重定向技巧不会在所有地方起作用。

对于像我这样需要直接从电子邮件进行深度链接的人(非常常见),值得注意以下几点:

  • 使用appScheme://发送电子邮件无法正常工作,因为链接将在Gmail中进行过滤

  • Chrome阻止了自动重定向到appScheme://:我怀疑Chrome要求重定向与用户交互(例如点击)同步

  • 现在,您可以不使用appScheme://进行深层链接,这会更好,但它需要一个现代化的平台和其他设置。Android iOS


值得注意的是,其他人已经对此进行了深入的思考。如果您查看Slack如何实现其“魔术链接”功能,您会注意到:

  • 它发送带有常规http链接的电子邮件(对于Gmail,则可以)
  • 网页上有一个大按钮,可链接到appScheme://(Chrome可以)


9

@Alistair在此答案中指出中,有时用户在打开应用程序后会返回浏览器。该答案的评论者指出,所使用的时间值必须根据iOS版本进行更改。当我们的团队不得不处理此问题时,我们发现必须调整初始超时的时间值并告知我们是否已返回浏览器,并且通常不适用于所有用户和设备。

与其使用任意的时差阈值来确定我们是否返回浏览器,还不如检测“ pagehide”和“ pageshow”事件。

我开发了以下网页来帮助诊断正在发生的事情。随着事件的发生,它添加了HTML诊断程序,主要是因为使用控制台日志记录,警报或Web Inspector,jsfiddle.net等技术在此工作流程中都有其缺点。Javascript不会使用时间阈值,而是会计算“ pagehide”和“ pageshow”事件的数量,以查看它们是否已发生。我发现最有效的策略是使用初始超时1000(而不是其他人报告/建议的25、50或100)。

可以在本地服务器上提供服务,例如python -m SimpleHTTPServer,可以在iOS Safari上查看。

要使用它,请按“打开已安装的应用程序”或“未安装应用程序”链接。这些链接应分别导致Maps应用或App Store打开。然后,您可以返回Safari查看事件的顺序和时间。

(请注意:这仅适用于Safari。对于其他浏览器(例如Chrome),您必须安装用于页面隐藏/显示等效事件的处理程序)。

更新:正如@Mikko在评论中指出的那样,iOS8中显然不再支持我们正在使用的pageshow / pagehide事件。

<html>
<head>
</head>
<body>
<a href="maps://" onclick="clickHandler()">Open an installed app</a>
<br/><br/>
<a href="xmapsx://" onclick="clickHandler()">App not installed</a>
<br/>

<script>

var hideShowCount = 0 ;
window.addEventListener("pagehide", function() {
    hideShowCount++ ;
    showEventTime('pagehide') ;
});

window.addEventListener("pageshow", function() {
    hideShowCount++ ;
    showEventTime('pageshow') ;
});

function clickHandler(){
    var hideShowCountAtClick = hideShowCount ;
    showEventTime('click') ;
    setTimeout(function () {
               showEventTime('timeout function '+(hideShowCount-hideShowCountAtClick)+' hide/show events') ;
               if (hideShowCount == hideShowCountAtClick){
                    // app is not installed, go to App Store
                    window.location = 'http://itunes.apple.com/app' ;
               }
            }, 1000);
}

function currentTime()
{
    return Date.now()/1000 ;
}

function showEventTime(event){
    var time = currentTime() ;
    document.body.appendChild(document.createElement('br'));
    document.body.appendChild(document.createTextNode(time+' '+event));
}
</script>
</body>
</html>

2

我需要做这样的事情,最终我得到了以下解决方案。

我有一个特定的网站URL,它将用两个按钮打开一个页面

1)一键进入网站

2)按钮2转到应用程序(iPhone / Android手机/平板电脑),如果未安装应用程序(例如另一个URL或应用程序商店),则可以从此处退回到默认位置

3)cookie记住用户的选择

<head>
<title>Mobile Router Example </title>


<script type="text/javascript">
    function set_cookie(name,value)
    {
       // js code to write cookie
    }
    function read_cookie(name) {
       // jsCode to read cookie
    }

    function goToApp(appLocation) {
        setTimeout(function() {
            window.location = appLocation;
              //this is a fallback if the app is not installed. Could direct to an app store or a website telling user how to get app


        }, 25);
        window.location = "custom-uri://AppShouldListenForThis";
    }

    function goToWeb(webLocation) {
        window.location = webLocation;
    }

    if (readCookie('appLinkIgnoreWeb') == 'true' ) {
        goToWeb('http://somewebsite');

    }
    else if (readCookie('appLinkIgnoreApp') == 'true') {
        goToApp('http://fallbackLocation');
    }



</script>
</head>
<body>


<div class="iphone_table_padding">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <!-- INTRO -->
            <span class="iphone_copy_intro">Check out our new app or go to website</span>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <div class="iphone_btn_padding">

                <!-- GET IPHONE APP BTN -->
                <table border="0" cellspacing="0" cellpadding="0" class="iphone_btn" onclick="set_cookie('appLinkIgnoreApp',document.getElementById('chkDontShow').checked);goToApp('http://getappfallback')">
                    <tr>
                        <td class="iphone_btn_on_left">&nbsp;</td>
                        <td class="iphone_btn_on_mid">
                            <span class="iphone_copy_btn">
                                Get The Mobile Applications
                            </span>
                        </td>
                        <td class="iphone_btn_on_right">&nbsp;</td>
                    </tr>
                </table>

            </div>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <div class="iphone_btn_padding">

                <table border="0" cellspacing="0" cellpadding="0" class="iphone_btn"  onclick="set_cookie('appLinkIgnoreWeb',document.getElementById('chkDontShow').checked);goToWeb('http://www.website.com')">
                    <tr>
                        <td class="iphone_btn_left">&nbsp;</td>
                        <td class="iphone_btn_mid">
                            <span class="iphone_copy_btn">
                                Visit Website.com
                            </span>
                        </td>
                        <td class="iphone_btn_right">&nbsp;</td>
                    </tr>
                </table>

            </div>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <div class="iphone_chk_padding">

                <!-- CHECK BOX -->
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td><input type="checkbox" id="chkDontShow" /></td>
                        <td>
                            <span class="iphone_copy_chk">
                                <label for="chkDontShow">&nbsp;Don&rsquo;t show this screen again.</label>
                            </span>
                        </td>
                    </tr>
                </table>

            </div>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
</table>

</div>

</body>
</html>

我需要这种类型的代码,但无法放置链接。要求:如果安装了app1,请转到Link 1,否则请转到Link2。有人可以帮忙吗?
SFDC_Learner

安装应用程序时需要取消设置cookie,以防用户1st选择网站。
查理·里策

1

编译了一些答案后,我提出了以下代码。让我吃惊的是,计时器也没有得到一个PC(浏览器,FF)或Android上的Chrome浏览冻结-触发器在后台工作,并在清晰视野检查是唯一可靠的信息。

var timestamp             = new Date().getTime();
var timerDelay              = 5000;
var processingBuffer  = 2000;

var redirect = function(url) {
  //window.location = url;
  log('ts: ' + timestamp + '; redirecting to: ' + url);
}
var isPageHidden = function() {
    var browserSpecificProps = {hidden:1, mozHidden:1, msHidden:1, webkitHidden:1};
    for (var p in browserSpecificProps) {
        if(typeof document[p] !== "undefined"){
        return document[p];
      }
    }
    return false; // actually inconclusive, assuming not
}
var elapsedMoreTimeThanTimerSet = function(){
    var elapsed = new Date().getTime() - timestamp;
  log('elapsed: ' + elapsed);
  return timerDelay + processingBuffer < elapsed;
}
var redirectToFallbackIfBrowserStillActive = function() {
  var elapsedMore = elapsedMoreTimeThanTimerSet();
  log('hidden:' + isPageHidden() +'; time: '+ elapsedMore);
  if (isPageHidden() || elapsedMore) {
    log('not redirecting');
  }else{
    redirect('appStoreUrl');
  }
}
var log = function(msg){
    document.getElementById('log').innerHTML += msg + "<br>";
}

setTimeout(redirectToFallbackIfBrowserStillActive, timerDelay);
redirect('nativeApp://');

JS小提琴


-2

日期解决方案比其他解决方案要好得多,我不得不在50上增加时间,例如,这是一个Tweeter示例:

//on click or your event handler..
var twMessage = "Your Message to share";
var now = new Date().valueOf();
setTimeout(function () {
   if (new Date().valueOf() - now > 100) return;
   var twitterUrl = "https://twitter.com/share?text="+twMessage;
   window.open(twitterUrl, '_blank');
}, 50);
window.location = "twitter://post?message="+twMessage;

Mobile IOS Safari上的唯一问题是您没有在设备上安装应用程序,因此Safari在打开新网址时会显示自动关闭的警报,无论如何,这是一个不错的解决方案!


1
@AkshatAgarwal,因为这与7天后发布的alastair相同的解决方案
albanx

-5

没读完所有这些内容,但可能使用了iframe,并将源添加到“我的应用://任何”中。

然后定期检查页面的设置间隔是否为404。

您还可以使用Ajax调用。如果响应为404,则未安装应用。


这不能解决问题。
Andrey M.
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.