*更新 iOS9的 Universal Links 更好的解决了这个问题,详看。 

首先看个网易的实际案例。

iOS6的Mobile Safari给前端开发者带来了什么  里已经提到iOS6的mobile safari将有智能应用通知标题(Smart App Banners)的功能,意在解决mobile safari里无法检测第三方应用安装状态的,通过这个功能,可以在页面中实现应用推荐类的需求。但目前来看,要实现这个需求只能在第三方应用中实现。思路也简单,第三方应用可以通过iOS的SDK提供的接口检测到对应的应用是否已经安装,然后在内嵌的UIWebView中打开的连接时追加参数如“?isinstalled=1”之类的参数供web页面获取来判断。web获知状态后可以提示给用户觖发的对应的应用的方案,如“打开应用”,“安装应用”等。

不过我们今天来说一种不借助第三方应用在mobile safari里就能实现跟上述类似的功能。

先来看看实现代码:

<body>
<div>
点击连接
<br />
如果已经安装网易新闻客户端将<font color="blue">打开对应新闻</font>
<br />
否则<font color="red">打开 APPSTORE</font>
<br />
<a href="newsapp://doc/8A7OMFOJ00014JB6"></a>
<a onClick="javascript:try_to_open_app();" href="newsapp://doc/8A7OMFOJ00014JB6">打开网易新闻</a>
</div>
<script language="javascript">
var timeout;
function open_appstore() {
window.location='http://itunes.apple.com/cn/app/id425349261?mt=8';
}

function try_to_open_app() {
timeout = setTimeout('open_appstore()', 300);
}
</script>
</body>

思路是:
1.连接的指向打开应用
2.onclick触发延时打开App Store下载应用页面
你可以保存以上代码进行测试。那为什么可实现呢?因为当你点击连接的同时是打开应用现时300ms后打开下载页面,如果应用成功打开生命周期就是激活状态,那么浏览器的状态是进入后台,页面里的所有操作都被注销了,显然timeout会被clear掉,但如果你没有成功打开应用即返回404,那么300ms到页面当然会自动跳转了。这里需要注意a元素的target不能是“_blank”,具体原因我想你已经知道了。
这种方式使用有两个缺点:
1.如果应用没有安装的话页面在跳转至App Store的同时会弹出打不开网址的提示。当然将连接协议改成itms-apps://可以避免

2.在设计过程中文案只能是“打开应用”之类,因为检测过程是由mobile safari自动实现的

有人会想到,可否通过new Image()的onload和onerror实现提前检测应用是否已经安装呢?答案是否定的,测试结果表明,这种方式即使应用已经安装还是会触发onerror。