浏览器中唤起NativeApp

前段时间遇到一个小需求：要求在分享出来的h5页面中，有一个立即打开的按钮，如果本地安装了我们的app，那么点击就直接唤起本地app，如果没有安装，则跳转到下载。

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都网站建设、外贸网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的赵县网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

因为从来没有做过这个需求，因此这注定是一个苦逼的调研过程。

我们最开始就面临2个问题：一是如何唤起本地app，二是如何判断浏览器是否安装了对应app。

如何唤起本地app

首先，想要实现这个需求，肯定是必须要客户端同学的配合才行，因此我们不用知道所有的实现细节，我们从前端角度思考看这个问题，需要知道的一点是，ios与Android都支持一种叫做schema协议的链接。比如网易新闻客户端的协议为

 
 
 
 
    
  
  
  
  
  1. newsapp://xxxxx
    2.

当然，这个协议不需要我们前端去实现，我们只需要将协议放在a标签的href属性里，或者使用location.href与iframe来实现激活这个链接。而location.href与iframe是解决这个需求的关键。

在ios中，还支持通过smart app banner来唤起app，即通过一个meta标签，在标签里带上app的信息，和打开后的行为，代码形如

 
 
 
 
    
  
  
  
  
    2.

我们还需要知道的一点是，微信里屏蔽了schema协议。除非你是微信的合作伙伴之类的，他们专门给你配置进白名单。否则我们就没办法通过这个协议在微信中直接唤起app。

因此我们会判断页面场景是否在微信中，如果在微信中，则会提示用户在浏览器中打开。

如何判断本地是否安装了app

很无奈的是，在浏览器中无法明确的判断本地是否安装了app。因此我们必须采取一些取巧的思路来解决这个问题。

我们能够很容易想到，采用设置一个延迟定时器setTimeout的方式，***时间尝试唤起app，如果200ms没有唤起成功，则默认本地没有安装app，200ms以后，将会触发下载行为。

结合这个思路，我们来全局考虑一下这个需求应该采用什么样的方案来实现它。

使用location.href的同学可能会面临一个担忧，在有的浏览器中，当我们尝试激活schema link的时候，若本地没有安装app，则会跳转到一个浏览器默认的错误页面去了。因此大多数人采用的解决方案都是使用iframe

测试了很多浏览器，没有发现过这种情况

后来观察了网易新闻，今日头条，YY等的实现方案，发现大家都采用的是iframe来实现。好吧，面对这种情况，只能屈服。

整理一下目前的思路，得到下面的解决方案

 
 
 
 
    
  
  
  
  
  1. var url = {
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.   open: 'app://xxxxx',
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.   down: 'xxxxxxxx'
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. };
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. var iframe = document.createElement('iframe');
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. var body = document.body;
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. iframe.style.cssText='display:none;width=0;height=0';
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. var timer = null;
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.  
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. // 立即打开的按钮
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. var openapp = document.getElementById('openapp');
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. openapp.addEventListener('click', function() {
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.   if(/MicroMessenger/gi.test(navigator.userAgent) {
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.     // 引导用户在浏览器中打开
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.   }) else{
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.     body.appendChild(iframe);
    32. 
  
  
  
  
  32. 
  
  
  
  
  33.     iframe.src = url.open;
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.     timer = setTimeout(function() {
    36. 
  
  
  
  
  36. 
  
  
  
  
  37.       wondow.location.href = url.down;
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.     }, 500);
    40. 
  
  
  
  
  40. 
  
  
  
  
  41.   }
    42. 
  
  
  
  
  42. 
  
  
  
  
  43. }, false) 
    44.

想法很美好，现实很残酷。一测试，就发现简单的这样实现有许多的问题。

***个问题在于，当页面成功唤起app之后，我们再切换回来浏览器，发现跳转到了下载页面。

为了解决这个问题，发现各个公司都进行了不同方式的尝试。

也是历经的很多折磨，发现了几个比较有用的事件。

pageshow： 页面显示时触发，在load事件之后触发。需要将该事件绑定到window上才会触发

pagehide: 页面隐藏时触发

visibilitychange： 页面隐藏没有在当前显示时触发，比如切换tab，也会触发该事件

document.hidden 当页面隐藏时，该值为true，显示时为false

由于各个浏览器的支持情况不同，我们需要将这些事件都给绑定上，即使这样，也不一定能够保证所有的浏览器都能够解决掉这个小问题，实在没办法的事情就不管了。

因此需要扩充一下上面的方案，当本地app被唤起，则页面会隐藏掉，就会触发pagehide与visibilitychange事件

 
 
 
 
    
  
  
  
  
  1. $(document).on('visibilitychange webkitvisibilitychange', function() {
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     var tag = document.hidden || document.webkitHidden;
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     if (tag) {
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.         clearTimeout(timer);
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.     }
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. })
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. $(window).on('pagehide', function() {
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.     clearTimeout(timer);
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. }) 
    20.

而另外一个问题就是IOS9+下面的问题了。ios9的Safari，根本不支持通过iframe跳转到其他页面去。也就是说，在safari下，我的整体方案被全盘否决!

于是我就只能尝试使用location.href的方式，这个方式能够唤起app，但是有一个坑爹的问题，使用schema协议唤起app会有弹窗而不会直接跳转去app!甚至当本地没有app时，会被判断为链接无效，然后还有一个弹窗。

这个弹窗会造成什么问题呢?如果用户不点确认按钮，根据上面的逻辑，这个时候就会发现页面会自动跳转到下载去了。而且无效的弹窗提示在用户体验上是不允许出现的。

好吧，继续扒别人的代码，看看别人是如何实现的。然后我又去观摩了其他公司的实现结果，发现网易新闻，今日头条都可以在ios直接从微信中唤起app。真是神奇了，可是今日头条在Android版微信上也没办法直接唤起的，他们在Android上都是直接到腾讯应用宝的下载里去。所以按道理来说这不是添加了白名单。

为了找到这个问题的解决方案，我在网易新闻的页面中扒出了他们的代码，并整理如下，添加了部分注释

 
 
 
 
    
  
  
  
  
  1. window.NRUM = window.NRUM || {};
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. window.NRUM.config = {
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     key:'27e86c0843344caca7ba9ea652d7948d',
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.     clientStart: +new Date()
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. };
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. (function() {
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.     var n = document.getElementsByTagName('script')[0],
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.         s = document.createElement('script');
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.  
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.     s.type = 'text/javascript';
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.     s.async = true;
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.     s.src = '//nos.netease.com/apmsdk/napm-web-min-1.1.3.js';
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.     n.parentNode.insertBefore(s, n);
    26. 
  
  
  
  
  26. 
  
  
  
  
  27. })();
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.  
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.  
    32. 
  
  
  
  
  32. 
  
  
  
  
  33. ;
    34. 
  
  
  
  
  34. 
  
  
  
  
  35. (function(window,doc){
    36. 
  
  
  
  
  36. 
  
  
  
  
  37.  
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.     // http://apm.netease.com/manual?api=web
    40. 
  
  
  
  
  40. 
  
  
  
  
  41.     NRUM.mark && NRUM.mark('pageload', true)
    42. 
  
  
  
  
  42. 
  
  
  
  
  43.  
    44. 
  
  
  
  
  44. 
  
  
  
  
  45.     var list = []
    46. 
  
  
  
  
  46. 
  
  
  
  
  47.     var config = null
    48. 
  
  
  
  
  48. 
  
  
  
  
  49.  
    50. 
  
  
  
  
  50. 
  
  
  
  
  51.     // jsonp
    52. 
  
  
  
  
  52. 
  
  
  
  
  53.     function jsonp(a, b, c) {
    54. 
  
  
  
  
  54. 
  
  
  
  
  55.         var d;
    56. 
  
  
  
  
  56. 
  
  
  
  
  57.         d = document.createElement('script');
    58. 
  
  
  
  
  58. 
  
  
  
  
  59.         d.src = a;
    60. 
  
  
  
  
  60. 
  
  
  
  
  61.         c && (d.charset = c);
    62. 
  
  
  
  
  62. 
  
  
  
  
  63.         d.onload = function() {
    64. 
  
  
  
  
  64. 
  
  
  
  
  65.             this.onload = this.onerror = null;
    66. 
  
  
  
  
  66. 
  
  
  
  
  67.             this.parentNode.removeChild(this);
    68. 
  
  
  
  
  68. 
  
  
  
  
  69.             b && b(!0);
    70. 
  
  
  
  
  70. 
  
  
  
  
  71.         };
    72. 
  
  
  
  
  72. 
  
  
  
  
  73.         d.onerror = function() {
    74. 
  
  
  
  
  74. 
  
  
  
  
  75.             this.onload = this.onerror = null;
    76. 
  
  
  
  
  76. 
  
  
  
  
  77.             this.parentNode.removeChild(this);
    78. 
  
  
  
  
  78. 
  
  
  
  
  79.             b && b(!1);
    80. 
  
  
  
  
  80. 
  
  
  
  
  81.         };
    82. 
  
  
  
  
  82. 
  
  
  
  
  83.         document.head.appendChild(d);
    84. 
  
  
  
  
  84. 
  
  
  
  
  85.     };
    86. 
  
  
  
  
  86. 
  
  
  
  
  87.  
    88. 
  
  
  
  
  88. 
  
  
  
  
  89.  
    90. 
  
  
  
  
  90. 
  
  
  
  
  91.     function localParam(search,hash){
    92. 
  
  
  
  
  92. 
  
  
  
  
  93.         search = search || window.location.search;
    94. 
  
  
  
  
  94. 
  
  
  
  
  95.         hash = hash || window.location.hash;
    96. 
  
  
  
  
  96. 
  
  
  
  
  97.         var fn = function(str,reg){
    98. 
  
  
  
  
  98. 
  
  
  
  
  99.             if(str){
    100. 
  
  
  
  
  100. 
  
  
  
  
  101.                 var data = {};
    102. 
  
  
  
  
  102. 
  
  
  
  
  103.                 str.replace(reg,function( $0, $1, $2, $3 ){
    104. 
  
  
  
  
  104. 
  
  
  
  
  105.                     data[ $1 ] = $3;
    106. 
  
  
  
  
  106. 
  
  
  
  
  107.                 });
    108. 
  
  
  
  
  108. 
  
  
  
  
  109.                 return data;
    110. 
  
  
  
  
  110. 
  
  
  
  
  111.             }
    112. 
  
  
  
  
  112. 
  
  
  
  
  113.         }
    114. 
  
  
  
  
  114. 
  
  
  
  
  115.         return {search: fn(search,new RegExp( "([^?=&]+)(=([^&]*))?", "g" ))||{},hash: fn(hash,new RegExp( "([^#=&]+)(=([^&]*))?", "g" ))||{}};
    116. 
  
  
  
  
  116. 
  
  
  
  
  117.     }
    118. 
  
  
  
  
  118. 
  
  
  
  
  119.  
    120. 
  
  
  
  
  120. 
  
  
  
  
  121.     jsonp('http://active.163.com/service/form/v1/5847/view/1047.jsonp')
    122. 
  
  
  
  
  122. 
  
  
  
  
  123.  
    124. 
  
  
  
  
  124. 
  
  
  
  
  125.     window.search = localParam().search
    126. 
  
  
  
  
  126. 
  
  
  
  
  127.     window._callback = function(data) {
    128. 
  
  
  
  
  128. 
  
  
  
  
  129.         window._callback = null
    130. 
  
  
  
  
  130. 
  
  
  
  
  131.         list = data.list
    132. 
  
  
  
  
  132. 
  
  
  
  
  133.         if(search.s && !!search.s.match(/^wap/i)) {
    134. 
  
  
  
  
  134. 
  
  
  
  
  135.             config = list.filter(function(item){
    136. 
  
  
  
  
  136. 
  
  
  
  
  137.                 return item.type === 'wap'
    138. 
  
  
  
  
  138. 
  
  
  
  
  139.             })[0]
    140. 
  
  
  
  
  140. 
  
  
  
  
  141.             return
    142. 
  
  
  
  
  142. 
  
  
  
  
  143.         }
    144. 
  
  
  
  
  144. 
  
  
  
  
  145.         config = list.filter(function(item){
    146. 
  
  
  
  
  146. 
  
  
  
  
  147.             return item.type === search.s
    148. 
  
  
  
  
  148. 
  
  
  
  
  149.         })[0]
    150. 
  
  
  
  
  150. 
  
  
  
  
  151.     }
    152. 
  
  
  
  
  152. 
  
  
  
  
  153.  
    154. 
  
  
  
  
  154. 
  
  
  
  
  155.     var isAndroid = !!navigator.userAgent.match(/android/ig),
    156. 
  
  
  
  
  156. 
  
  
  
  
  157.         isIos = !!navigator.userAgent.match(/iphone|ipod/ig),
    158. 
  
  
  
  
  158. 
  
  
  
  
  159.         isIpad = !!navigator.userAgent.match(/ipad/ig),
    160. 
  
  
  
  
  160. 
  
  
  
  
  161.         isIos9 = !!navigator.userAgent.match(/OS 9/ig),
    162. 
  
  
  
  
  162. 
  
  
  
  
  163.         isYx = !!navigator.userAgent.match(/MailMaster_Android/i),
    164. 
  
  
  
  
  164. 
  
  
  
  
  165.         isNewsapp = !!navigator.userAgent.match(/newsapp/i),
    166. 
  
  
  
  
  166. 
  
  
  
  
  167.         isWeixin = (/MicroMessenger/ig).test(navigator.userAgent),
    168. 
  
  
  
  
  168. 
  
  
  
  
  169.         isYixin = (/yixin/ig).test(navigator.userAgent),
    170. 
  
  
  
  
  170. 
  
  
  
  
  171.         isQQ = (/qq/ig).test(navigator.userAgent),
    172. 
  
  
  
  
  172. 
  
  
  
  
  173.         params = localParam().search,
    174. 
  
  
  
  
  174. 
  
  
  
  
  175.         url = 'newsapp://',
    176. 
  
  
  
  
  176. 
  
  
  
  
  177.         iframe = document.getElementById('iframe');
    178. 
  
  
  
  
  178. 
  
  
  
  
  179.  
    180. 
  
  
  
  
  180. 
  
  
  
  
  181.     var isIDevicePhone = (/iphone|ipod/gi).test(navigator.platform);
    182. 
  
  
  
  
  182. 
  
  
  
  
  183.     var isIDeviceIpad = !isIDevicePhone && (/ipad/gi).test(navigator.platform);
    184. 
  
  
  
  
  184. 
  
  
  
  
  185.     var isIDevice = isIDevicePhone || isIDeviceIpad;
    186. 
  
  
  
  
  186. 
  
  
  
  
  187.     var isandroid2_x = !isIDevice && (/android\s?2\./gi).test(navigator.userAgent);
    188. 
  
  
  
  
  188. 
  
  
  
  
  189.     var isIEMobile = !isIDevice && !isAndroid && (/MSIE/gi).test(navigator.userAgent);
    190. 
  
  
  
  
  190. 
  
  
  
  
  191.     var android_url = (!isandroid2_x) ? "http://3g.163.com/links/4304" : "http://3g.163.com/links/6264";
    192. 
  
  
  
  
  192. 
  
  
  
  
  193.     var ios_url = "http://3g.163.com/links/3615";
    194. 
  
  
  
  
  194. 
  
  
  
  
  195.     var wphone_url = "http://3g.163.com/links/3614";
    196. 
  
  
  
  
  196. 
  
  
  
  
  197.     var channel = params.s || 'newsapp'
    198. 
  
  
  
  
  198. 
  
  
  
  
  199.  
    200. 
  
  
  
  
  200. 
  
  
  
  
  201.     // 判断在不同环境下app的url
    202. 
  
  
  
  
  202. 
  
  
  
  
  203.     if(params.docid){
    204. 
  
  
  
  
  204. 
  
  
  
  
  205.         if(params['boardid'] && params['title']){
    206. 
  
  
  
  
  206. 
  
  
  
  
  207.             url = url + 'comment/' + params.boardid + '/' + params.docid + '/' + params.title
    208. 
  
  
  
  
  208. 
  
  
  
  
  209.         }else{
    210. 
  
  
  
  
  210. 
  
  
  
  
  211.             url = url + 'doc/' + params.docid
    212. 
  
  
  
  
  212. 
  
  
  
  
  213.         }
    214. 
  
  
  
  
  214. 
  
  
  
  
  215.     }else if(params.sid){
    216. 
  
  
  
  
  216. 
  
  
  
  
  217.         url = url + 'topic/' + params.sid
    218. 
  
  
  
  
  218. 
  
  
  
  
  219.     }else if(params.pid){
    220. 
  
  
  
  
  220. 
  
  
  
  
  221.         var pid = params.pid.split('_')
    222. 
  
  
  
  
  222. 
  
  
  
  
  223.         url = url + 'photo/' + pid[0] + '/' + pid[1]
    224. 
  
  
  
  
  224. 
  
  
  
  
  225.     }else if(params.vid){
    226. 
  
  
  
  
  226. 
  
  
  
  
  227.         url = url + 'video/' + params.vid
    228. 
  
  
  
  
  228. 
  
  
  
  
  229.     }else if(params.liveRoomid){
    230. 
  
  
  
  
  230. 
  
  
  
  
  231.         url = url + 'live/' + params.liveRoomid
    232. 
  
  
  
  
  232. 
  
  
  
  
  233.     }else if(params.url){
    234. 
  
  
  
  
  234. 
  
  
  
  
  235.         url = url + 'web/' + decodeURIComponent(params.url)
    236. 
  
  
  
  
  236. 
  
  
  
  
  237.     }else if(params.expertid){
    238. 
  
  
  
  
  238. 
  
  
  
  
  239.         url = url + 'expert/' + params.expertid
    240. 
  
  
  
  
  240. 
  
  
  
  
  241.     }else if(params.subjectid){
    242. 
  
  
  
  
  242. 
  
  
  
  
  243.         url = url + 'subject/' + params.subjectid
    244. 
  
  
  
  
  244. 
  
  
  
  
  245.     }else if(params.readerid){
    246. 
  
  
  
  
  246. 
  
  
  
  
  247.         url = url + 'reader/' + params.readerid
    248. 
  
  
  
  
  248. 
  
  
  
  
  249.     }else{
    250. 
  
  
  
  
  250. 
  
  
  
  
  251.         url += 'startup'
    252. 
  
  
  
  
  252. 
  
  
  
  
  253.     }
    254. 
  
  
  
  
  254. 
  
  
  
  
  255.     if(url.indexOf('?') >= 0){
    256. 
  
  
  
  
  256. 
  
  
  
  
  257.         url += '&s=' + (params.s || 'sps')
    258. 
  
  
  
  
  258. 
  
  
  
  
  259.     }else{
    260. 
  
  
  
  
  260. 
  
  
  
  
  261.         url += '?s=' + (params.s || 'sps')
    262. 
  
  
  
  
  262. 
  
  
  
  
  263.     }
    264. 
  
  
  
  
  264. 
  
  
  
  
  265.  
    266. 
  
  
  
  
  266. 
  
  
  
  
  267.     // ios && 易信  用iframe 打开
    268. 
  
  
  
  
  268. 
  
  
  
  
  269.     if((isIos||isIpad) && navigator.userAgent.match(/yixin/i)) {
    270. 
  
  
  
  
  270. 
  
  
  
  
  271.         document.getElementById('iframe').src = url;
    272. 
  
  
  
  
  272. 
  
  
  
  
  273.     }
    274. 
  
  
  
  
  274. 
  
  
  
  
  275.  
    276. 
  
  
  
  
  276. 
  
  
  
  
  277.     var height = document.documentElement.clientHeight;
    278. 
  
  
  
  
  278. 
  
  
  
  
  279.  
    280. 
  
  
  
  
  280. 
  
  
  
  
  281.     // 通常情况下先尝试使用iframe打开
    282. 
  
  
  
  
  282. 
  
  
  
  
  283.     document.getElementById('iframe').src = url;
    284. 
  
  
  
  
  284. 
  
  
  
  
  285.  
    286. 
  
  
  
  
  286. 
  
  
  
  
  287.     // 移动端浏览器中，将下载页面显示出来
    288. 
  
  
  
  
  288. 
  
  
  
  
  289.     if(!isWeixin && !isQQ && !isYixin && !isYx){
    290. 
  
  
  
  
  290. 
  
  
  
  
  291.         document.querySelector('.main-body').style.display = 'block'
    292. 
  
  
  
  
  292. 
  
  
  
  
  293.         if(isIos9){
    294. 
  
  
  
  
  294. 
  
  
  
  
  295.             document.querySelector('.main-body').classList.add('showtip')
    296. 
  
  
  
  
  296. 
  
  
  
  
  297.         }
    298. 
  
  
  
  
  298. 
  
  
  
  
  299.  
    300. 
  
  
  
  
  300. 
  
  
  
  
  301.         setTimeout(function(){
    302. 
  
  
  
  
  302. 
  
  
  
  
  303.             document.body.scrollTop = 0
    304. 
  
  
  
  
  304. 
  
  
  
  
  305.         },200)
    306. 
  
  
  
  
  306. 
  
  
  
  
  307.     }else{
    308. 
  
  
  
  
  308. 
  
  
  
  
  309.         document.getElementById('guide').style.display = 'block'
    310. 
  
  
  
  
  310. 
  
  
  
  
  311.     }
    312. 
  
  
  
  
  312. 
  
  
  
  
  313.  
    314. 
  
  
  
  
  314. 
  
  
  
  
  315.     // Forward To Redirect Url
    316. 
  
  
  
  
  316. 
  
  
  
  
  317.     // Add by zhanzhixiang 12/28/2015
    318. 
  
  
  
  
  318. 
  
  
  
  
  319.     if (params.redirect) {
    320. 
  
  
  
  
  320. 
  
  
  
  
  321.         var redirectUrl = decodeURIComponent(params.redirect);
    322. 
  
  
  
  
  322. 
  
  
  
  
  323.         if ( typeof(URL) === 'function' && new URL(redirectUrl).hostname.search("163.com") !== -1) {
    324. 
  
  
  
  
  324. 
  
  
  
  
  325.             window.location.href = redirectUrl;
    326. 
  
  
  
  
  326. 
  
  
  
  
  327.         } else if (redirectUrl.search("163.com") !== -1){
    328. 
  
  
  
  
  328. 
  
  
  
  
  329.             window.location.href = redirectUrl;
    330. 
  
  
  
  
  330. 
  
  
  
  
  331.         };
    332. 
  
  
  
  
  332. 
  
  
  
  
  333.     }
    334. 
  
  
  
  
  334. 
  
  
  
  
  335.  
    336. 
  
  
  
  
  336. 
  
  
  
  
  337.     // Forward To Redirect Url End
    338. 
  
  
  
  
  338. 
  
  
  
  
  339.     if ((isWeixin || isQQ) && isAndroid) {
    340. 
  
  
  
  
  340. 
  
  
  
  
  341.         window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.netease.newsreader.activity&ckey=CK1331205846719&android_schema=' +　url.match(/(.*)\?/)[1]
    342. 
  
  
  
  
  342. 
  
  
  
  
  343.     }
    344. 
  
  
  
  
  344. 
  
  
  
  
  345.  
    346. 
  
  
  
  
  346. 
  
  
  
  
  347.     if(isIos||isIpad){
    348. 
  
  
  
  
  348. 
  
  
  
  
  349.         document.getElementById("guide").classList.add('iosguideopen')
    350. 
  
  
  
  
  350. 
  
  
  
  
  351.     }else if (isAndroid){
    352. 
  
  
  
  
  352. 
  
  
  
  
  353.         document.getElementById("guide").classList.add('androidguideopen')
    354. 
  
  
  
  
  354. 
  
  
  
  
  355.     }else{
    356. 
  
  
  
  
  356. 
  
  
  
  
  357.         // window.location.href = 'http://www.163.com/newsapp'
    358. 
  
  
  
  
  358. 
  
  
  
  
  359.     }
    360. 
  
  
  
  
  360. 
  
  
  
  
  361.  
    362. 
  
  
  
  
  362. 
  
  
  
  
  363.     document.getElementById('link').addEventListener('click', function(){
    364. 
  
  
  
  
  364. 
  
  
  
  
  365.  
    366. 
  
  
  
  
  366. 
  
  
  
  
  367.         // 统计
    368. 
  
  
  
  
  368. 
  
  
  
  
  369.         neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )
    370. 
  
  
  
  
  370. 
  
  
  
  
  371.  
    372. 
  
  
  
  
  372. 
  
  
  
  
  373.         if (config) {
    374. 
  
  
  
  
  374. 
  
  
  
  
  375.             android_url = config.android
    376. 
  
  
  
  
  376. 
  
  
  
  
  377.         }
    378. 
  
  
  
  
  378. 
  
  
  
  
  379.         if (config && config.iOS) {
    380. 
  
  
  
  
  380. 
  
  
  
  
  381.             ios_url = config.iOS
    382. 
  
  
  
  
  382. 
  
  
  
  
  383.         }
    384. 
  
  
  
  
  384. 
  
  
  
  
  385.         if(isWeixin || isQQ){
    386. 
  
  
  
  
  386. 
  
  
  
  
  387.             return
    388. 
  
  
  
  
  388. 
  
  
  
  
  389.         }
    390. 
  
  
  
  
  390. 
  
  
  
  
  391.         var msg = isIDeviceIpad ? "检测到您正在使用iPad, 是否直接前往AppStore下载?" : "检测到您正在使用iPhone, 是否直接前往AppStore下载?";
    392. 
  
  
  
  
  392. 
  
  
  
  
  393.         if (isIDevice){
    394. 
  
  
  
  
  394. 
  
  
  
  
  395.             window.location = ios_url;
    396. 
  
  
  
  
  396. 
  
  
  
  
  397.             return;
    398. 
  
  
  
  
  398. 
  
  
  
  
  399.         }else if(isAndroid){
    400. 
  
  
  
  
  400. 
  
  
  
  
  401.             // uc浏览器用iframe唤醒
    402. 
  
  
  
  
  402. 
  
  
  
  
  403.             if(navigator.userAgent.match(/ucbrowser|yixin|MailMaster/i)){
    404. 
  
  
  
  
  404. 
  
  
  
  
  405.                 document.getElementById('iframe').src = url;
    406. 
  
  
  
  
  406. 
  
  
  
  
  407.             } else {
    408. 
  
  
  
  
  408. 
  
  
  
  
  409.                 window.location.href = url;
    410. 
  
  
  
  
  410. 
  
  
  
  
  411.             }
    412. 
  
  
  
  
  412. 
  
  
  
  
  413.             setTimeout(function(){
    414. 
  
  
  
  
  414. 
  
  
  
  
  415.                 if(document.webkitHidden) {
    416. 
  
  
  
  
  416. 
  
  
  
  
  417.                     return
    418. 
  
  
  
  
  418. 
  
  
  
  
  419.                 }
    420. 
  
  
  
  
  420. 
  
  
  
  
  421.                 if (confirm("检测到您正在使用Android 手机，是否直接下载程序安装包？")) {
    422. 
  
  
  
  
  422. 
  
  
  
  
  423.                     neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp_pass&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )
    424. 
  
  
  
  
  424. 
  
  
  
  
  425.                     window.location.href = android_url;
    426. 
  
  
  
  
  426. 
  
  
  
  
  427.                 } else {
    428. 
  
  
  
  
  428. 
  
  
  
  
  429.                     neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp_cancel&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )
    430. 
  
  
  
  
  430. 
  
  
  
  
  431.                 }
    432. 
  
  
  
  
  432. 
  
  
  
  
  433.             },200)
    434. 
  
  
  
  
  434. 
  
  
  
  
  435.             return;
    436. 
  
  
  
  
  436. 
  
  
  
  
  437.         }else if(isIEMobile){
    438. 
  
  
  
  
  438. 
  
  
  
  
  439.             window.location = wphone_url;
    440. 
  
  
  
  
  440. 
  
  
  
  
  441.             return;
    442. 
  
  
  
  
  442. 
  
  
  
  
  443.         }else{
    444. 
  
  
  
  
  444. 
  
  
  
  
  445.             window.open('http://www.163.com/special/00774IQ6/newsapp_download.html');
    446. 
  
  
  
  
  446. 
  
  
  
  
  447.             return;
    448. 
  
  
  
  
  448. 
  
  
  
  
  449.         }
    450. 
  
  
  
  
  450. 
  
  
  
  
  451.     }, false)
    452. 
  
  
  
  
  452. 
  
  
  
  
  453.  
    454. 
  
  
  
  
  454. 
  
  
  
  
  455.     setTimeout(function(){
    456. 
  
  
  
  
  456. 
  
  
  
  
  457.         if(isIDevice && params.notdownload != 1 && !isNewsapp && !isIos9){
    458. 
  
  
  
  
  458. 
  
  
  
  
  459.             document.getElementById('link').click()
    460. 
  
  
  
  
  460. 
  
  
  
  
  461.         }
    462. 
  
  
  
  
  462. 
  
  
  
  
  463.     }, 1000)
    464. 
  
  
  
  
  464. 
  
  
  
  
  465.  
    466. 
  
  
  
  
  466. 
  
  
  
  
  467. })(window,document); 
    468.

虽然有一些外部的引用，和一些搞不懂是干什么用的方法和变量，但是基本逻辑还是能够看明白。好像也没有什么特别的地方。研究了许久，看到了一个jsonp请求很奇特。这是来干嘛用的?

于是费尽千辛万苦，搜索了很多文章，最终锁定了一个关键的名词 Universal links。

如果我早知道这个名词，那么问题就不会变的那么束手无策。所以这个东西是什么呢?

Apple为iOS 9发布了一个所谓的通用链接的深层链接特性，即Universal links。虽然它并不***，但是这一发布，让数以千计的应用开发人员突然意识到自己的应用体验被打破。

Universal links，一种能够方便的通过传统的HTTP/HTTPS 链接来启动App，使用相同的网址打开网站和App。

关于这个问题的提问与universal links的介绍(http://stackoverflow.com/questions/31891777/ios-9-safari-iframe-src-with-custom-url-scheme-not-working)

ios9推行的一个新的协议!

关于本文的这个问题，国内的论坛有许许多多的文章来解决，但是提到universal links的文章少之又少，而我想吐槽的是，我们的ios开发也尼玛不知道这个名词，搞什么鬼。他改变了用户体验的关键在于，微信没有屏蔽这个协议。因此如果我们的app注册了这个协议，那么我们就能够从微信中直接唤起app。

这个时候我就发现，上面贴的网易新闻代码中的jsonp请求的内容，就是这个协议必须的一个叫做apple-app-site-association的JSON文件

 
 
 
 
    
  
  
  
  
  1. {
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.    "applinks": {
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.        "apps": [ ],
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.        "details": {
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.            "TEAM-IDENTIFIER.YOUR.BUNDLE.IDENTIFIER": {
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.                "paths": [
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.                    "*"
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.                ]
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.            }
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.        }
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.    }
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. } 
    24.

大家可以直接访问这个链接，查看里面的内容

http://active.163.com/service…

至于universal links具体如何实现，让ios的同学去搞定吧，这里提供两个参考文章

http://www.cocoachina.com/bbs…

https://blog.branch.io/how-to…

支持了这个协议之后，我们又可以通过iframe来唤起app了，因此基本逻辑就是这样了。

但是!并不是就没有坑了。

universal links还有一个大坑，就是如果想要通过universal links只在在微信中打开app，同一个页面我们还得使用不同的两个域名。

这个特性虽然有点坑，但是通过这个特性却能够***判断本地是否安装了你们的app。

比如我们正常访问当前页面的域名为A，对应的页面url为A+，而当我们点击按钮，需要打开app用到的域名为B，，对应的页面url为B+。

A与B都被注册成为了对应app的universal links，A+ 与 B+ 都指向同一个页面。

我们通过js判断，如果是通过B+访问的该页面，则直接跳去下载app。这样，当我们从A+通过点击访问B+时，如果universal links生效并且本地安装了对应的app，app会直接被打开。如果本地没有安装App，则会直接执行刚才B+中跳去下载的设定。

OK，这个问题，几乎所有的坑我都在上面说到了，如果想要做好兼容，就是一个针对每个坑做***选择了，这是一个工作量的问题。

不过最终的调研结果是

没有***的解决方案

就算是网易新闻，这个按钮在使用过程中也会有一些小bug，无法做到***的状态。

因为我们面临许多没办法解决的问题，比如无法真正意义上的判断本地是否安装了app，pageshow，pagehide并不是所有的浏览器都支持等。很多其他博客里面，什么计算时间差等方案，我花了很久的时间去研究这个方案，结果是，根!本!没!有!用!

老实说，从微信中跳转到外部浏览器，并不是一个好的解决方案，这样会导致很多用户流失，因此大家都在ios上实现了universal links。

网易新闻的逻辑是，点击打开会跳转到一个下载页面，这个下载页面一加载完成就尝试打开app，如果打开了就直接跑到app里面去了，如果没有就在页面上有一个立即下载的按钮，按钮行只有下载处理。

这个问题就总结到这里，如果大家有更好的方案，欢迎与我沟通。

当前标题：浏览器中唤起NativeApp
文章链接：http://www.shufengxianlan.com/qtweb/news47/524597.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

品牌网站制作知识

分类信息网站

广安网站设计　　 　温江网站建设　　 　做手机网站　　 　雅安服务器托管　　 　郫县封阳台　　 　云南护栏打桩机　　 　网络推广公司　　 　光华服务器托管　　 　营销网站建设　　 　成都网络营销　　 　丹棱网站建设　　 　仿古建筑设计　　 　红光高低压开关厂　　 　品牌网站建设公司　　 　重庆水土三线托管　　 　买链接　　 　网站运营　　 　重庆小程序开发公司　　 　成都app开发　　 　成都APP定制开发