先声明一下关于ios中9.0打开方式的文章来自博客:IOS9通用链接(universal link)
前言
对于一个完备的互联网产品而言需要有app端与web端两个不同前端,对于产品而言很多都希望能够将wap页上的用户引向native app上这就要求前端工程师们为网页提供各种入口去打开app,今天我们就聊一聊app的打开方式(有错误的地方还请高手指正)。
常规打开
对于app打开而言最常规的打开就是通过url scheme的方式去打开你的app,如下的
myapp://
myapp://open
myapp://type=1&id=2sdeo223lwe
这些抛出都是以url的方式进行抛出,app捕捉到这些抛出去做相应的处理,本文对app的处理不做详细描述,app开发请自行谷歌百度。对于前端而言抛出的方式也有很多,而最理想的方式是通过iframe的src对其进行链抛出,来!说的在多都没有代码来的清晰,请看下面。
首先我们需要有一个iframe:
//实际上就是新建一个iframe的生成器
var createIframe=(function(){
var iframe;
return function(){
if(iframe){
return iframe;
}else{
iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
return iframe;
}
}
})()
之后我们还需要一个url scheme:
//生成一个url scheme,假设我们约定的scheme是myApp://type=1&id=iewo212j32这种形式的
var baseScheme = "myApp://"
var createScheme=function(options){
var urlScheme=baseScheme;
for(var item in options){
urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&";
}
urlScheme = urlScheme.substring(0, urlScheme.length - 1);
return encodeURIComponent(urlScheme);
}
这种scheme形式的其实不是最好的,根据我们踩过的坑,觉得约定为与http协议相近可能更好一些,具体的协议需要前端人员自己去和app端人员约定。
ok万事具备,iframe有了,urlScheme也有了,该去打开app了
var openApp=function(){
var localUrl=createScheme();
var openIframe=createIframe();
if(isIos()){
//判断是否是ios,具体的判断函数自行百度
window.location.href = localUrl;
var loadDateTime = Date.now();
setTimeout(function () {
var timeOutDateTime = Date.now();
if (timeOutDateTime - loadDateTime < 1000) {
window.location.href = "你的下载页面";
}
}, 25);
}else if(isAndroid()){
//判断是否是android,具体的判断函数自行百度
if (isChrome()) {
//chrome浏览器用iframe打不开得直接去打开,算一个坑
window.location.href = localUrl;
} else {
//抛出你的scheme
openIframe.src = localUrl;
}
setTimeout(function () {
window.location.href = "你的下载页面";
}, 500);
}else{
//主要是给winphone的用户准备的,实际都没测过,现在winphone不好找啊
openIframe.src = localUrl;
setTimeout(function () {
window.location.href = "你的下载页面";
}, 500);
}
}
以上就是你要打开scheme的主要代码了,好吧,实际上不只是打开app,还要实现未打开的时候跳到下载页去。其中安卓实际上无论有没有打开都会跳到下载页去,而ios........好吧!按照网上的说法是浏览器失焦后会挂起脚本,呵呵,这是多老的ios版本的表现了,实际上现在的ios已经没有这么做,有些版本会跟安卓的表现一样,而有些则是直接跳转根本不会去打开,还有打开的时候那个恶心的系统弹窗是什么鬼。好吧,实际上至此你会发现,ios9.0以上的有些打不开直接跳,有些打得开还会有允许弹窗,而微信则是无论如何都打不开,实际上微信会在他的浏览器里拦截掉所有未经其允许的scheme包括app store,那么接下来我们要解决这些问题。
通用链接
针对ios9及以上的打不开问题,实际上ios9提供了更好的解决方案————通用链接。
什么是Universal Links(通用链接)?
这是iOS9推出的一项功能,如果你的应用支持Universal Links(通用链接),那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app,不需要额外做任何判断等),或者打开网页(iOS设备上没有安装你的app)。或许可以更简单点来说明,在iOS9之前,对于从各种从浏览器,Safari、UIWebView或者 WKWebView中唤醒APP的需求,我们通常只能使用scheme。
以上来自网上关于通用链接的介绍,对于前端简单点讲就是你访问一个http的url,如果这个url带有你提交给开发平台的配置文件中匹配规则的内容,ios系统会去尝试打开你的app,如果打不开,系统就会在浏览器中转向你要访问的链接。很好的一个属性,因为通过这个属性在ios9上我们能够绕过微信的拦截从而打开app。
以下是ios开发人员要做的百度搜索结果第一条ios中实现通用链接:
而我们要做的真的很简单,实际上我们只需要抛出链接就好了(实际上博主只是来骗经验的)。在此之前请准备好与主站不同的域名,比如主站www.xxxx,你们可以准备好open.xxxx的域名作为重定向用。好吧!实际上通用链接有一个很坑的属性,必须是异域打开,而且如果你提交的是你主站的链接,你打开你的主站你会发现网站上方会挂着一个难看的灰条转向appstore中你们的app,没错,就是ios系统干的这个事,具体的其他注意事项可以参考这篇文章IOS9通用链接(universal link)。
那么接下来我们的代码得做好更改
//增加通用链接的生成,
var baseScheme = "myApp://",
baseLink="http://m.xxxx?";
var createScheme=function(options,isLink){
var urlScheme=isLink?baseLink:baseScheme;
for(var item in options){
urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&";
}
urlScheme = urlScheme.substring(0, urlScheme.length - 1);
return isLink?urlScheme:encodeURIComponent(urlScheme);
}
然后对抛出做
var openApp=function(){
//生成你的scheme你也可以选择外部传入
var localUrl=createScheme({type:1,id:"sdsdewe2122"});
var openIframe=createIframe();
if(isIos()){
//判断是否是ios,具体的判断函数自行百度
if(isGreaterThan9()){
//判断是否为ios9以上的版本,跟其他判断一样navigator.userAgent判断,ios会有带版本号
localUrl=createScheme({type:1,id:"sdsdewe2122"},true);//代码还可以优化一下
location.href = localUrl;//实际上不少产品会选择一开始将链接写入到用户需要点击的a标签里
return;
}
window.location.href = localUrl;
var loadDateTime = Date.now();
setTimeout(function () {
var timeOutDateTime = Date.now();
if (timeOutDateTime - loadDateTime < 1000) {
window.location.href = "你的下载页面";
}
}, 25);
}else if(isAndroid()){
//判断是否是android,具体的判断函数自行百度
if (isChrome()) {
//chrome浏览器用iframe打不开得直接去打开,算一个坑
window.location.href = localUrl;
} else {
//抛出你的scheme
openIframe.src = localUrl;
}
setTimeout(function () {
window.location.href = "你的下载页面";
}, 500);
}else{
//主要是给winphone的用户准备的,实际都没测过,现在winphone不好找啊
openIframe.src = localUrl;
setTimeout(function () {
window.location.href = "你的下载页面";
}, 500);
}
}
实际上就只需要更改这么点,最重要的是app端接入通用链接,注意抛出的链接不要跟主站同域即可,之后就是不断的调试,自己去踩坑吧,记得绑定域名,这个对域名具有一定的依赖性。
微信中打开
至此只有微信是打不开的,实际上腾讯系的产品都是打不开的,包括qq浏览器。
对于微信中有两种方式:
一种简单的方式就是弹窗告诉用户让他去浏览器中打开——在技术之外的办法
还有一种方式就是应用宝
是的如果是微信就去打开你的app对应的应用宝,应用宝会去检测你的app是否存在有则去打开,但只是去打开。实际上腾讯的应用宝对于开发者在功能上做的比想象中的要强大,你在应用宝的微下载中配置申请你的applink与app store的链接,之后你只要在你的链接参数中带上android_schema="myApp://"
就在应用宝中打开app中的特定功能,如果忽略应用宝的页面跟自己scheme打开没有太大区别,具体的操作可以查看应用宝的说明。简而言之,腾讯的产品中都去借助应用宝这个平台去执行你需要的操作。在此就不贴代码了,只要判断浏览器如果是微信或者是qq就去跳你的应用宝链接就行。
总结
实际上单纯打开app非常简单,目前无论安卓还是ios都能够很好的支持scheme,当然腾讯系产品除外,实际上百度浏览器也会拦截scheme(我觉得真是奇了葩!!!微信这种尚能理解,一个浏览器居然擅自去拦截scheme)目前对百度浏览器还没有什么很好的办法,可以尝试是否能够通过百度应用市场去解决。如果是希望打开app同时又要打开下载页,那么ios9及以上就得用通用链接去解决,重点就是这个通用链接。
IOS9通用链接(universal link)
Jun 27, 2016IOS9以上版本新增了通用链接的功能。最近在项目中正好有用到,并在开发过程中遇到了很多坑。因此对其进行总结,以供大家参考,如有疏漏,求留言指证~~
应用场景
在WAP页面中点击某个按钮。
- 用户装了APP,直接打开APP对应页面;
- 没有装APP,跳转到WAP下载页;
URL Scheme实现方案
var iframe = document.createElement('iframe'); iframe.style.display = 'none'; document.body.appendChild(iframe); if(userAgent.match(/(iPhone|iPod|iPad);?/i)){ //抛出schemes,打开app对应页面 window.location.href = "apps custom url schemes"; //由于部分ios中打开app后,WAP页面会被挂起,定时器不会被执行。因此可以做下优化: //WAP页重新被聚焦后,如果超过1s,认为APP被打开了,重新聚焦时就不必再跳转到APP下载页 var loadDateTime = Date.now(); window.setTimeout(function () { var timeOutDateTime = Date.now(); if (timeOutDateTime - loadDateTime < 1000) { window.location.href = "app下载页面"; } }, 25); }else{ //抛出schemes,打开app对应页面 iframe.src = "apps custom url schemes" //跳转下载页 setTimeout(function () { window.location.href = "app下载页面"; }, 500); } |
以上代码原理是:
- 如果安装了APP,抛出的URL Scheme可以被app解析,则打开该APP,并由APP跳转到对应的页面;
- 如果未安装APP,没有应用程序可以解析该协议,则在500ms以内执行定时器里的函数,打开WAP端的下载页面。
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不规范而导致的各种编码问题。
首先在,APP里会配置好预定好的URL Scheme协议,
<intent-filter > <action android:name="android.intent.action.VIEW"/> <category android:name="android.intent.category.DEFAULT"/> <!-- scheme的Uri的协议必须跟此值相同--> <data android:scheme="web2app"/> </intent-filter> |
每当WAP页打开协议URL,系统便会打开该APP,然后根据URL协议后面的部分,执行后续逻辑(比如打开WAP页对应的APP页面)。
URL Scheme存在的问题
IOS9.0以上弹确认框的问题。
在IOS9.0以上版本中,WAP端打开协议URL,如果已安装APP,会弹出如下图所示的确认框。
大部分情况下,用户点击“打开”APP之前,页面直接刷新跳转到WAP下载页,导致打开APP失败。这就是IOS9.0以上不能用scheme实现需求的主要原因。如果手机上未安装APP,WAP端打开协议URL,会弹出无效URL的弹窗,也会影响用户体验。跳转下载页问题。
由于跳转到下载页由前端定时器触发,在所有的andriod机以及部分IOS机器上,打开APP后,WAP页还是会被定时跳转到下载页。
通用链接实现方案
在IOS9.0以上开始支持通用链接,接下来详细解析一下用通用链接实现该功能的方案。
apple-app-site-association文件
apple-app-site-association是IOS中一个JSON格式的“通用链接”配置文件,在其paths键中设置通用链接的具体规则。
{ "applinks": { "apps": [], "details": [ { "appID": "...", "paths": ["/open/*"] } ] } } |
IOS端,在Xcode的capabilities里添加域名(b,为通用链接的域名)。这样在第一次启动APP时,APP会从 https://b/apple-app-site-association 下载这个配置文件并交由IOS系统管理。该配置文件必须通过SSL的方式请求,所以,b必须支持SSL访问。
实现原理
用通用链接实现的原理如下图所示。在服务器a上部署WAP页以及APP下载页,在b上署“后端重定向服务”以及“ios通用链接的配置文件”。
当WAP页打开如下通用链接时:http://b/open/…, 如果已经安装了APP,且该链接和APP在apple-app-site-association中配置的规则一致,则打开该APP,并由APP进行后续处理(打开应用内的某个页面);如果ios上没有安装APP,则系统不会对该链接进行特殊处理,直接在浏览器中打开,后端的重定向服务会将该链接重定向到下载页“http://a/mobile/app”, 代码如下:
if(navigator.userAgent.match(/OS 9_\d[_\d]* like Mac OS X/i)){ location.href = "universal link"; } |
几个坑
WAP页面的域(a)和抛出的通用链接的域(b)必须不一样。如果同域,抛出的通用链接在很多情况下会被系统忽略,就算已安装APP,也打不开并且直接重定向到下载页。(至少在IOS9.*的版本中遇到了这个问题)。
通用链接在微信webview中的BUG。
微信webview中打开WAP页,该WAP页通过设置loaction.href抛出通用链接打开APP。之后从APP重新返回到该webview页面,并用微信进行分享。- 期待结果:分享出在webview中展示的WAP页。
- 实际结果:发现最终分享出去的是APP下载页。
- 原因分析:虽然在装了APP的情况下,不会在webview中打开该通用链接刷新到下载页,但是location.href这个全局变量已被更改,微信的默认分享的链接是location.href所指链接。该BUG的具体原因及解决方案将在以后的文章中进行详细分析。
更多推荐
网页打开app
发布评论