阅览器中引发 native app或许跳转到下载页面

　　在做 h5 页面中，会遇到这样一个需求，有一个当即翻开的按钮，假如本地装置了咱们的 app，那么点击就直接引发本地 app，假如没有装置，则跳转到下载。

　　首要想到的是两个问题：一是怎样引发本地 app，二是怎样判别阅览器是否装置了对应 app。

　　怎样引发本地 app

　　首要，想要完结这个需求，肯定是必需求客户端同学的协作才行，因而咱们不必知道一切的完结细节，咱们从BETWAY登录视点考虑看这个问题，需求知道的一点是，ios 与 Android 都支撑一种叫做 schema 协议的链接。比方网易新闻客户端的协议为

　　JavaScript

1. newsapp://xxxxx 

　　当然，这个协议不需求咱们BETWAY登录去完结，咱们只需求将协议放在 a 标签的 href 特点里，或许运用 location.href 与 iframe 来完结激活这个链接。而 location.href 与 iframe 是处理这个需求的要害。

　　在 ios 中，还支撑经过smart app banner来引发 app，即经过一个 meta 标签，在标签里带上 app 的信息，和翻开后的行为，代码形如

　　XHTML

1. <meta name="apple-itunes-app" content="app-id=1023600494, app-argument=tigerbrokersusstock://com.tigerbrokers.usstock/post?postId=7125" /> 

　　需求留意的是：咱们就没办法经过这个协议在微信中直接引发 app。原因是微信里屏蔽了 schema 协议，除非你是微信的协作伙伴之类的，他们专门给你装备进白名单。

　　因而咱们会判别页面场景是否在微信中，假如在微信中，则会提示用户在阅览器中翻开。

　　怎样判别本地是否装置了 app

　　首要咱们能够供认的是，在阅览器中无法清晰的判别本地是否装置了 app。因而咱们有必要采纳一些取巧的思路来处理这个问题。

　　咱们能够很简略想到，选用设置一个推迟定时器 setTimeout 的办法，第一时刻测验引发 app，假如 200ms 没有引发成功，则默许本地没有装置 app，200ms 今后，将会触发下载行为。

　　结合这个思路，咱们来大局考虑一下这个需求应该选用什么样的计划来完结它。

　　运用 location.href 的同学或许会面对一个忧虑，在有的阅览器中，当咱们测验激活 schema link 的时分，若本地没有装置 app，则会跳转到一个阅览器默许的过错页面去了。因而大多数人选用的处理计划都是运用 iframe

　　测验了许多阅览器，没有发现过这种状况

　　后来调查了网易新闻，今天头条，YY 等的完结计划，发现咱们都选用的是 iframe 来完结。好吧，面对这种状况，只能屈从。

　　收拾一下现在的思路，得到下面的处理计划

　　JavaScript

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

　　主意很夸姣，实际很严酷。一测验，就发现简略的这样完结有许多的问题。

　　第一个问题在于，当页面成功引发 app 之后，咱们再切换回来阅览器，发现跳转到了下载页面。

　　为了处理这个问题，发现各个公司都进行了不同办法的测验。

　　也是历经的许多摧残，发现了几个比较有用的作业。

　　pageshow 页面显现时触发，在 load 作业之后触发。需求将该作业绑定到 window 上才会触发

　　pagehide 页面躲藏时触发

　　visibilitychange 页面躲藏没有在当时显现时触发，比方切换 tab，也会触发该作业

　　document.hidden 当页面躲藏时，该值为 true，显现时为 false

　　由于各个阅览器的支撑状况不同，咱们需求将这些作业都给绑定上，即便这样，也纷歧定能够确保一切的阅览器都能够处理掉这个小问题，实在没办法的作业就不管了。

　　因而需求扩大一下上面的计划，当本地 app 被引发，则页面会躲藏掉，就会触发 pagehide 与 visibilitychange 作业

　　JavaScript

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

　　而别的一个问题便是 IOS9+ 下面的问题了。ios9 的 Safari，底子不支撑经过 iframe 跳转到其他页面去。也便是说，在 safari 下，我的全体计划被全盘否决!

　　所以我就只能测验运用 location.href 的办法，这个办法能够引发 app，可是有一个坑爹的问题，运用 schema 协议引发 app 会有弹窗而不会直接跳转去 app!甚至当本地没有 app 时，会被判别为链接无效，然后还有一个弹窗。

　　这个弹窗会形成什么问题呢?假如用户不点供认按钮，依据上面的逻辑，这个时分就会发现页面会主动跳转到下载去了。并且无效的弹窗提示在用户体会上是不允许呈现的。

　　好吧，持续扒别人的代码，看看别人是怎样完结的。然后我又去观摩了其他公司的完结成果，发现网易新闻，今天头条都能够在 ios 直接从微信中引发 app。真是独特了，可是今天头条在 Android 版微信上也没办法直接引发的，他们在 Android 上都是直接到腾讯运用宝的下载里去。所以按道理来说这不是添加了白名单。

　　为了找到这个问题的处理计划，我在网易新闻的页面中扒出了他们的代码，并收拾如下，添加了部分注释(因触及的代码块篇幅过长，考虑到阅览作用，请至阅览原文检查。

　　尽管有一些外部的引证，和一些搞不懂是干什么用的办法和变量，可是根本逻辑仍是能够看理解。如同也没有什么特别的当地。研讨了良久，看到了一个 jsonp 恳求很独特。这是来干嘛用的?

　　所以费尽含辛茹苦，查找了许多文章，终究确定了一个要害的名词 Universal links。

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

　　Apple 为 iOS 9 发布了一个所谓的通用链接的深层链接特性，即 Universal links。尽管它并不完美，可是这一发布，让数以千计的运用开发人员忽然意识到自己的运用体会被打破。

　　Universal links，一种能够便利的经过传统的 HTTP/HTTPS 链接来发动 App，运用相同的网址翻开网站和 App。

　　关于这个问题的发问与 universal links 的介绍请至阅览原文

　　ios9 推行的一个新的协议!

　　关于本文的这个问题，国内的论坛有许许多多的文章来处理，可是说到 universal links 的文章少之又少，而我想吐槽的是，咱们的 ios 开发也尼玛不知道这个名词，搞什么鬼。他改变了用户体会的要害在于，微信没有屏蔽这个协议。因而假如咱们的 app 注册了这个协议，那么咱们就能够从微信中直接引发 app。

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

　　JavaScript

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

　　咱们能够直接拜访这个链接，检查里边的内容

　　https://active.163.com/service/form/v1/5847/view/1047.jsonp

　　至于 universal links 详细怎样完结，让 ios 的同学去搞定吧，这儿供给两个参阅文章

　　https://www.cocoachina.com/bbs/read.php?tid-1486368.html

　　https://blog.branch.io/how-to-setup-universal-links-to-deep-link-on-apple-ios-9

　　支撑了这个协议之后，咱们又能够经过 iframe 来引发 app 了，因而根本逻辑便是这样了。终究的调研成果是

　　没有完美的处理计划

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

　　由于咱们面对许多没办法处理的问题，比方无法实在意义上的判别本地是否装置了 app，pageshow，pagehide 并不是一切的阅览器都支撑等。许多其他博客里边，什么核算时刻差等计划，根!本!没!有!用!我还花了好久的时刻去研讨这个计划。

　　老实说，从微信中跳转到外部阅览器，并不是一个好的处理计划，这样会导致许多用户丢失，因而咱们都在 ios 上完结了 universal links，而我愈加倾向的计划是知乎的处理，他们从规划上避免了在一个按钮上来判别这个逻辑，而选用了两个按钮的办法。

　　网易新闻的逻辑是，点击翻开会调整到一个下载页面，这个下载页面一加载完结果测验翻开app，假如翻开了就直接跑到 app 里边去了，假如没有就在页面上有一个当即下载的按钮，按钮行只要下载处理。