从浏览器或者Webview 中唤起APP

转自：从浏览器或者Webview 中唤醒APP


移动互联时代，很多互联网服务都会同时具备网站以及移动客户端，很多人认为APP的能帮助建立更稳固的用户关系，于是经常会接到各种从浏览器、webview中唤醒APP的需求，显然，这对于前端开发人员来说，是一件很纠结的事。
##唤醒APP
目前常见的主动唤醒APP方式有几种：
###Url scheme
Url scheme是iOS，Android平台都支持，只需要原生APP开发时注册scheme， 那么用户点击到此类链接时，会自动跳到APP。比如


1



2



3



4



<!-- 打开考拉APP首页 -->



<a href="kaola://www.kaola.com">打开APP</a>



<!-- 呼叫号码 -->



<a href="tel://13788889999">打开拨号</a>

如果配置scheme的路径，并在app中识别，则可以直接打开APP特定页面，如下：


1



2



<!-- 打开考拉APP商品详情 -->



<a href="kaola://www.kaola.com/product/8342.html">打开APP商品详情</a>

上述的链接，需要考虑手机是否支持此Scheme：
支持：弹出相应程序；
不支持：错误处理情况因平台而异，部分app会直接跳错误页（比如Android Chrome/41，iOS中老版的Lofter）； 也有的停留在原页面，但弹出提示“无法打开网页”（比如iOS7）；iOS8以及最新的Android Chrome/43 目前都是直接停留在当前页，不会跳出错误提示。
总体来看， iOS的支持程度比Android好，iOS在实际使用中，除非明确禁止的（比如微信），很少碰到不支持的情况；Android平台则各个app厂商差异很大，比如Chrome从25及以后就不再支持通过js触发（非用户点击），设置iframe src地址等来触发scheme跳转。
###Android intent
这是Android平台独有的，使用方式如下


1



2



3



4



5



6



7



8



9



intent:



HOST/URI-path // Optional host 



#Intent; 



package=[string]; 



action=[string]; 



category=[string]; 



component=[string]; 



scheme=[string]; 



end;

这里的HOST/URI-path, 与普通http URL 的host/path书写方式相同， package是Android app的包名，其它参数如action、category、component不是很理解, 具体见文档 , 比如打开考拉 app的商品详情，代码如下


1



2



<!-- 打开考拉APP -->



<a href="intent://www.kaola.com/product/8342.html#Intent;scheme=kaola;package=com.kaola;end">打开APP</a>

如果手机能匹配到相应的APP，则会直接打开；如没有安装，则会跳到手机默认的应用商店，比如Google原生系统Nexus 5，将会直接跳到Google Play， 对于国内各厂商定制过的系统，则跳转到各自的默认应用商店，或者弹出商店供选择。
intent 比scheme相对完善的一点是，提供一个打开失败去向URL的选项，可以通过指定参数 S.browser_fallback_url 来指定去向URL。
比如如下的打开APP动作，如果打开失败，则跳转到app下载页，这对于国内的特殊网络环境，还是挺有用的。


1



2



<!-- 打开考拉APP -->



<a href="intent://www.kaola.com/product/8342.html#Intent;scheme=kaola;package=com.kaola;S.browser_fallback_url=http%3A%2F%2Fapp.kaola.com;end">打开APP</a>

###HTTP URL订阅
Android Chrome平台独有，app中订阅自有内容相关的URL，在Chrome中浏览相关网页时，会自动弹出提示，让用户选择用浏览器还是APP打开，通用性有限。
###iOS内置APP广告条
在页面Head中增加meta， 添加智能 App 广告条 （iOS 6+ Safari）， 如下


1



<meta"apple-itunes-app"content"app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"

可以自动判断是否已安装应用， 可惜只能用于iOS+Safari， 在第三方应用中就不行了。
效果如下：



###Android Chrome内置app安装提示
这个是Mobile Chrome 43 beta新加入的特性，在用户浏览某一个网站多次后，如果Chrome发现该站点有原生APP，则会提示用户下载原生APP，此项特性开发者无法干预，完全是Google的推荐行为，在项目中用不上，具体见新闻报道
##实际应用中存在的问题
移动平台提供这么多唤醒APP的方法，但是功能还不够完善，以下情况JS无法检测并做处理：
  1. APP如果唤醒失败，很多时候都会跳到错误页，影响用户体验，而我们的需求很可能是需要跳到下载或者其它页。
  2. APP成功唤醒，页面无法直接得知，系统没有提供此类回调。
##实际需求、解决方案
  1. 要在打开APP失败时，不能使当前页面跳到错误页，且打开失败时，有失败函数回调。
  2. 如果成功打开APP，有成功函数回调。
    针对第一点，可以将打开动作放到iframe中，就算跳转失败仍能停留在当前页面；那剩下的问题就是如何检测APP是否成功打开；
    网上常见解决方案如下：
    
1
    

    
2
    

    
3
    

    
4
    

    
5
    

    
6
    

    
7
    

    
8
    

    
9
    

    
10
    

    
11
    

    
12
    

    
13
    

    
14
    

    
//创建一个隐藏的iframe
    

    
var ifr = document.createElement('iframe');
    

    
ifr.src = 'com.baidu.tieba://';
    

    
ifr.style.display = 'none';
    

    
document.body.appendChild(ifr);
    

    
//记录唤醒时间
    

    
var openTime = +new Date();
    

    
window.setTimeout(function(){
    

    
document.body.removeChild(ifr);
    

    
//如果setTimeout 回调超过2500ms，则弹出下载
    

    
if( (+new Date()) - openTime > 2500 ){
    

    
window.location = 'http://exam.com/xxxx.apk';
    

    
}
    

    
},2000)
此脚本利用了程序切换到后台时，计时器回调会被推迟的原理，如果APP被唤醒，那么此网页必然进入后台，如果用户从APP再切换回来，时间一般也会超过2.5s；如果app没有唤醒，则setTimeout 基本上会准时回调，时间不会超过2s。但是实际上，这个仅仅在iOS平台有效，Android由于是多任务的，应用放到后台，setTimeout 基本上还是会准时触发，所以这个逻辑还不够完善。
那Android 浏览器有没有方法检测应用是否进入了后台呢？ 页面可见性API（Page Visibility API）, 可以通过检测 document.hidden 或 document.[webkit|moz|ms]Hidden 来检查页面是否可见，或者订阅页面的visibilitychange事件； 如果仅仅应用在新版Android及Chrome上，这个是很美好的，对于老版本（<4.4）及Android Webview， 则不可用。
暮然回首，那人却在灯火阑珊处，setInterval，对，就setInterval， 如果设置比较小的运行间隔（<30ms），在浏览器或者webview中，应用切换到后台，setInterval会被很明显的延迟执行，比如设置一个运行间隔20ms，总计运行100次的定时器，如果页面一直处于前台，则100次跑完，总耗时与 100x20=2000ms不会有太大差异，但页面在后台运行时，此时间会明显超过2000ms。可以利用这一点来实现是否成功打开APP检测及回调。
代码如下：


1



2



3



4



5



6



7



8



9



10



11



12



13



14



15



16



17



18



19



20



21



22



23



24



25



26



27



28



29



30



31



32



33



34



35



36



37



38



function openApp(openUrl, appUrl, action, callback) {



//检查app是否打开



function checkOpen(cb){



var _clickTime = +(new Date());



function check(elsTime) {



if ( elsTime > 3000 || document.hidden || document.webkitHidden) {



cb(1);



} else {



cb(0);



}



}



//启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束



var _count = 0, intHandle;



intHandle = setInterval(function(){



_count++;        



var elsTime = +(new Date()) - _clickTime;



if (_count>=100 || elsTime > 3000 ) {



clearInterval(intHandle);



check(elsTime);



}



}, 20);



}







//在iframe 中打开APP



var ifr = document.createElement('iframe');



ifr.src = openUrl;



ifr.style.display = 'none';



if (callback) {



checkOpen(function(opened){



callback && callback(opened);



});



}







document.body.appendChild(ifr);      



setTimeout(function() {



document.body.removeChild(ifr);



}, 2000);  



}

iframe方式打开APP的问题：
  • Android Chrome/25+ 无法打开APP，所以最好是APP配合监听http URL 来实现。
  • iOS、Android平台，近期发现在没有安装对应app时尝试唤醒，有少数APP会连当前页面（iframe的父页面）也变成错误页的情况。
其它问题：
微信无法打开或者下载，打开APP这个基本无解，下载则只能让应用进驻应用宝市场，然后检测到在微信中运行时，跳转到应用宝页面下载。
###2015-11-01 补充
随着iOS9， Android M的推出， 原先的Scheme URL唤醒app的方式成功率以及很低，并且苹果还加入了确认机制，使得通过javascript来自动唤醒APP的方式基本不可用。
这两大平台都推出了自己的WEB与APP连接的方式： Universal Links， App Link， 这部分需要App的开发人员来做了。




时间：