现在的位置: 首页 > 综合 > 正文

在mobile safari中巧妙实现检测应用安装就打开,否则进App Store下载

2013年10月16日 ⁄ 综合 ⁄ 共 1321字 ⁄ 字号 评论关闭

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

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

先来看看实现代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<div>
点击连接
<br
/>
如果已经安装网易新闻客户端将<font
color=
"blue">打开对应新闻</font>
<br
/>
否则<font
color=
"red">打开
APPSTORE</font>
<br
/>
<a
onClick=
"javascript:try_to_open_app();"

href=
"newsapp://doc/8A7OMFOJ00014JB6">打开网易新闻</a>
</div>
<script
language=
"javascript">
var

timeout;
function

open_appstore() {
}
 
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。

抱歉!评论已关闭.