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

如何唤起本地app

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

1. newsapp://xxxxx 

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

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

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

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

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

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

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

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

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

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

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

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

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

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. // 立即打开的按钮 
20.  
21. var openapp = document.getElementById('openapp'); 
22.  
23. openapp.addEventListener('click', function() { 
24.  
25.   if(/MicroMessenger/gi.test(navigator.userAgent) { 
26.  
27.     // 引导用户在浏览器中打开 
28.  
29.   }) else{ 
30.  
31.     body.appendChild(iframe); 
32.  
33.     iframe.src = url.open; 
34.  
35.     timer = setTimeout(function() { 
36.  
37.       wondow.location.href = url.down; 
38.  
39.     }, 500); 
40.  
41.   } 
42.  
43. }, false)  

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

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

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

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

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

pagehide: 页面隐藏时触发

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

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

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

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

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.   
14.  
15. $(window).on('pagehide', function() { 
16.  
17.     clearTimeout(timer); 
18.  
19. })  

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

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

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

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

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

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

虽然有一些外部的引用，和一些搞不懂是干什么用的方法和变量，但是基本逻辑还是能够看明白。好像也没有什么特别的地方。研究了许久，看到了一个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.  
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. }  

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

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里面去了，如果没有就在页面上有一个立即下载的按钮，按钮行只有下载处理。

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