今天在做前端输出的时候,需要和app的做些对接工作。就是在手机浏览器中下载某app时,能判断该用户是否安装了该应用。如果安装了该应用,就直接打开该应用;如果没有安装该应用,就下载该应用。
那么下面就对在浏览器中,用js判断某用户是否安装了该应用,并判断是否打开该应用做个简单的介绍。
那么,怎么判断某用户是否安装了某应用呢?
在这里,先写段html代码,如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="某app下载链接"></a>
</body>
</html>
判断手机端是否安装某应用,并打开该应用的js代码如下:
function isInstalled(){
var the_href=$(".down_app").attr("href");//获得下载链接
window.location="apps custom url schemes";//打开某手机上的某个app应用
setTimeout(function(){
window.location=the_href;//如果超时就跳转到app下载页
},500);
}
apps custom url schemes是什么
apps custom url schemes 是WAP端和APP端约定好的一个协议URL,如:
web2app://
和正常的URL一样,除了protocol部分外,也可以有host、path及参数,如:
web2app://openapp?type=1&id=12
具体要看各端约定,不过个人建议最好还是按照URL的组成规范来定义scheme,不然会引入由于URL不规范而导致的各种编码问题。
2.注册URL Scheme
安卓端:
(一般是在manifest.xml文件的activity的intent filter里面)
<span>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:scheme="**"
android:host="**.**"
android:pathPrefix="/**"> </data>
</intent-filter>
</span>
苹果端:
3.web 前端调用:
前端通过:
window.location="url schemes://";//打开某手机上的某个app应用
便可直接调用打开应用。
希望传参的话可以通过以下方式
window.location="URL Schemes://URL identifier";
//打开某手机上的某个app应用并传参URL identifier
以上介绍了怎么创建该本地协议及调用该本地协议的方法。但这里还有个关键就是怎么判断用户是否安装了该app呢?原理如下:
在手机浏览器中用js代码请求该协议,如果在500ms内,如果有应用程序能解析这个协议,那么就能打开该应用;如果超过500ms就跳转到app下载页。
URL Scheme存在的问题
IOS9.0以上弹确认框的问题。
在IOS9.0以上版本中,WAP端打开协议URL,如果已安装APP,会弹出如下图所示的确认框。
大部分情况下,用户点击“打开”APP之前,页面直接刷新跳转到WAP下载页,导致打开APP失败。这就是IOS9.0以上不能用scheme实现需求的主要原因。如果手机上未安装APP,WAP端打开协议URL,会弹出无效URL的弹窗,也会影响用户体验。
跳转下载页问题。
由于跳转到下载页由前端定时器触发,在所有的andriod机以及部分IOS机器上,打开APP后,WAP页还是会被定时跳转到下载页。
通用链接实现方案
什么是Universal Links(通用链接)?
这是iOS9推出的一项功能,如果你的应用支持Universal Links(通用链接),那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app,不需要额外做任何判断等),或者打开网页(iOS设备上没有安装你的app)。或许可以更简单点来说明,
在iOS9之前,对于从各种从浏览器,Safari、UIWebView或者 WKWebView中唤醒APP的需求,我们通常只能使用scheme。
具体实现方式请见
通用链接实现方案