Mobile Safari 调用本地APP，否则进入App Store下载

一：思考一个问题

如何让用户通过手机浏览器（Mobile Safari），访问一个URL就能直接打开iOS上的App应用，如果该应用APP没有安装，那么直接跳转到App Store的APP下载页面。

二：准备工作

首先先理解下面知识。
1: iOS SDK 的 OpenURL 函数和 URL Scheme 相关
2: JavaScript 的window.location 和 setTimeout 函数

三：实现代码

先来看看实现代码，我以打开QQ为例子。

<!DOCTYPE html">
<html>
<body>
<script type="text/javascript">
window.location = "mqq:open";
setTimeout( 
function(){ 
window.location="http://itunes.apple.com/cn/app/qq-2011/id444934666?mt=8";
}, 30);
}
</script>
</body>
</html>

用Safari打开下边这个地址：http://jsdashi.com/demo/MobileSafari/qq.html
就会看到效果：
1.如果您已经安装QQ，那么会直接打开QQ App。
2.如果您没有安装，那么会直接跳转到App Store的QQ页面。

思路是：
 1.window.location连接的指向为打开应用 
2.延时打开App Store下载应用页面 。
具体来说：当你打开链接时，Mobile Safari通过window.location指向URL Scheme，直接打开本地应用，否则30ms后打开下载页面。如果应用成功打开，生命周期就是激活状态，那么浏览器的状态是进入后台,页面里的所有操作都被注销了,显然timeout会被clear掉，但如果你没有成功打开应用即返回404，那么30ms后页面当然会自动跳转了。
 这种方式使用有个缺点： 如果应用没有安装的话页面在跳转至App Store的同时会弹出打不开网址的提示。当然将连接协议改成itms-apps://可以避免。即：itms-apps://itunes.apple.com/cn/app/qq-2011/id444934666?mt=8

<!DOCTYPE html">
<html>
<body>
<script type="text/javascript">
window.location = "mqq:open";
setTimeout( 
function(){ 
window.location="itms-apps://itunes.apple.com/cn/app/qq-2011/id444934666?mt=8";
}, 30);
}
</script>
</body>
</html>

mqq:open是QQ应用在Apple的URL Schemes，具体查找应用的URL Schemes,需要找开发商索要，当然也不是所有软件的作者都有公布，
可以使用下面的方法：如何找到软件的URL Schemes？
也可以访问handleOpenURL，总结了相当多的可用的URL Schemes，不过国内的的软件很少，实在是让人头疼。
然后在附一篇完整的代码，可针对PC 和 Mobile单独做调整：

<!DOCTYPE html">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0">
    <title>Mobile Safari 调用本地APP，否则进入App Store下载</title>
	<meta name="keywords" content="Mobile Safari 调用本地APP，否则进入App Store下载" />
	<meta name="description" content="Mobile Safari 调用本地APP，否则进入App Store下载" />
	<script type="text/javascript">
	/**  
	浏览器版本信息
	* @type {Object} 
	* @return {Boolean}  返回布尔值     
	*/
	function browser() {
	    var u = navigator.userAgent.toLowerCase();
	    var app = navigator.appVersion.toLowerCase();
	    return {
	        txt: u, // 浏览器版本信息
	        version: (u.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1], // 版本号       
	        msie: /msie/.test(u) && !/opera/.test(u), // IE内核
	        mozilla: /mozilla/.test(u) && !/(compatible|webkit)/.test(u), // 火狐浏览器
	        safari: /safari/.test(u) && !/chrome/.test(u), //是否为safair
	        chrome: /chrome/.test(u), //是否为chrome
	        opera: /opera/.test(u), //是否为oprea
	        presto: u.indexOf('presto/') > -1, //opera内核
	        webKit: u.indexOf('applewebkit/') > -1, //苹果、谷歌内核
	        gecko: u.indexOf('gecko/') > -1 && u.indexOf('khtml') == -1, //火狐内核
	        mobile: !!u.match(/applewebkit.*mobile.*/), //是否为移动终端
	        ios: !!u.match(/\(i[^;]+;( u;)? cpu.+mac os x/), //ios终端
	        android: u.indexOf('android') > -1, //android终端
	        iPhone: u.indexOf('iphone') > -1, //是否为iPhone
	        iPad: u.indexOf('ipad') > -1, //是否iPad
	        webApp: !!u.match(/applewebkit.*mobile.*/) && u.indexOf('safari/') == -1 //是否web应该程序，没有头部与底部
	    };
	}
	var timeout;
	function open_appstore() {
		var b=browser();
		if(b.ios||b.iPhone||b.iPad){
			window.location="itms-apps://itunes.apple.com/cn/app/qq-2011/id444934666?mt=8";
		}else if(b.android){
			// 
		}
	} 
	function try_to_open_app() {
		var b=browser();
		if(b.ios||b.iPhone||b.iPad){
			window.location="mqq:open";
		}else if(b.android){
			// 
		}
		timeout = setTimeout('open_appstore()', 30);
	}
	try_to_open_app();
	</script>
</head>
<body>
</body>
</html>

请点击查看：http://jsdashi.com/demo/MobileSafari/index.html

	<!DOCTYPE html>
	<html>
	<head>
	<title>QQ</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<script type="text/javascript">
	function try_to_open_app(){
	window.location = "mqq:open";
	setTimeout( function(){ window.location="itms-apps://itunes.apple.com/cn/app/qq-2011/id444934666?mt=8";} , 1000);
	}
	</script>
	</head>
	<body>
	<h2>1秒之后，跳转到QQ App Store下载页面</h2>
	<script type="text/javascript">
	try_to_open_app();
	</script>
	</body>
	</html>

<!DOCTYPE html">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,minimum-scale=1.0">
	<title>Mobile Safari 调用本地APP，否则进入App Store下载</title>
	<meta name="keywords" content="Mobile Safari 调用本地APP，否则进入App Store下载" />
	<meta name="description" content="Mobile Safari 调用本地APP，否则进入App Store下载" />
	<script type="text/javascript">
	/**
	浏览器版本信息
	* @type {Object}
	* @return {Boolean} 返回布尔值
	*/
	function browser() {
	var u = navigator.userAgent.toLowerCase();
	var app = navigator.appVersion.toLowerCase();
	return {
	txt: u, // 浏览器版本信息
	version: (u.match(/.+(?:rv\|it\|ra\|ie)[\/: ]([\d.]+)/) \|\| [])[1], // 版本号
	msie: /msie/.test(u) && !/opera/.test(u), // IE内核
	mozilla: /mozilla/.test(u) && !/(compatible\|webkit)/.test(u), // 火狐浏览器
	safari: /safari/.test(u) && !/chrome/.test(u), //是否为safair
	chrome: /chrome/.test(u), //是否为chrome
	opera: /opera/.test(u), //是否为oprea
	presto: u.indexOf('presto/') > -1, //opera内核
	webKit: u.indexOf('applewebkit/') > -1, //苹果、谷歌内核
	gecko: u.indexOf('gecko/') > -1 && u.indexOf('khtml') == -1, //火狐内核
	mobile: !!u.match(/applewebkit.mobile./), //是否为移动终端
	ios: !!u.match(/\(i[^;]+;( u;)? cpu.+mac os x/), //ios终端
	android: u.indexOf('android') > -1, //android终端
	iPhone: u.indexOf('iphone') > -1, //是否为iPhone
	iPad: u.indexOf('ipad') > -1, //是否iPad
	webApp: !!u.match(/applewebkit.mobile./) && u.indexOf('safari/') == -1 //是否web应该程序，没有头部与底部
	};
	}
	var timeout;
	function open_appstore() {
	var b=browser();
	if(b.ios\|\|b.iPhone\|\|b.iPad){
	window.location="itms-apps://itunes.apple.com/cn/app/qq-2011/id444934666?mt=8";
	}else if(b.android){
	//
	}
	}
	function try_to_open_app() {
	var b=browser();
	if(b.ios\|\|b.iPhone\|\|b.iPad){
	window.location="mqq:open";
	}else if(b.android){
	//
	}
	timeout = setTimeout('open_appstore()', 30);
	}
	try_to_open_app();
	</script>
	</head>
	<body>
	<h2>Mobile Safari 调用本地APP，否则进入App Store下载</h2>
	</body>
	</html>