浏览器中唤起native app || 跳转到应用商城下载

admin

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

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

我们最开始就面临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

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

复制代码

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

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

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

复制代码

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

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

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

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

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

pagehide: 页面隐藏时触发

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

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

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

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

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

复制代码

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

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

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

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

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

1. 
   
2. window.NRUM = window.NRUM || {};
   
3. window.NRUM.config = {
   
4.     key:'27e86c0843344caca7ba9ea652d7948d',
   
5.     clientStart: +new Date()
   
6. };
   
7. (function() {
   
8.     var n = document.getElementsByTagName('script')[0],
   
9.         s = document.createElement('script');
   
10. 
    
11.     s.type = 'text/javascript';
    
12.     s.async = true;
    
13.     s.src = '//nos.netease.com/apmsdk/napm-web-min-1.1.3.js';
    
14.     n.parentNode.insertBefore(s, n);
    
15. })();
    
16. 
    
17. 
    
18. ;
    
19. (function(window,doc){
    
20. 
    
21.     // http://apm.netease.com/manual?api=web
    
22.     NRUM.mark && NRUM.mark('pageload', true)
    
23. 
    
24.     var list = []
    
25.     var config = null
    
26. 
    
27.     // jsonp
    
28.     function jsonp(a, b, c) {
    
29.         var d;
    
30.         d = document.createElement('script');
    
31.         d.src = a;
    
32.         c && (d.charset = c);
    
33.         d.onload = function() {
    
34.             this.onload = this.onerror = null;
    
35.             this.parentNode.removeChild(this);
    
36.             b && b(!0);
    
37.         };
    
38.         d.onerror = function() {
    
39.             this.onload = this.onerror = null;
    
40.             this.parentNode.removeChild(this);
    
41.             b && b(!1);
    
42.         };
    
43.         document.head.appendChild(d);
    
44.     };
    
45. 
    
46. 
    
47.     function localParam(search,hash){
    
48.         search = search || window.location.search;
    
49.         hash = hash || window.location.hash;
    
50.         var fn = function(str,reg){
    
51.             if(str){
    
52.                 var data = {};
    
53.                 str.replace(reg,function( $0, $1, $2, $3 ){
    
54.                     data[ $1 ] = $3;
    
55.                 });
    
56.                 return data;
    
57.             }
    
58.         }
    
59.         return {search: fn(search,new RegExp( "([^?=&]+)(=([^&]*))?", "g" ))||{},hash: fn(hash,new RegExp( "([^#=&]+)(=([^&]*))?", "g" ))||{}};
    
60.     }
    
61. 
    
62.     jsonp('http://active.163.com/service/form/v1/5847/view/1047.jsonp')
    
63. 
    
64.     window.search = localParam().search
    
65.     window._callback = function(data) {
    
66.         window._callback = null
    
67.         list = data.list
    
68.         if(search.s && !!search.s.match(/^wap/i)) {
    
69.             config = list.filter(function(item){
    
70.                 return item.type === 'wap'
    
71.             })[0]
    
72.             return
    
73.         }
    
74.         config = list.filter(function(item){
    
75.             return item.type === search.s
    
76.         })[0]
    
77.     }
    
78. 
    
79.     var isAndroid = !!navigator.userAgent.match(/android/ig),
    
80.         isIos = !!navigator.userAgent.match(/iphone|ipod/ig),
    
81.         isIpad = !!navigator.userAgent.match(/ipad/ig),
    
82.         isIos9 = !!navigator.userAgent.match(/OS 9/ig),
    
83.         isYx = !!navigator.userAgent.match(/MailMaster_Android/i),
    
84.         isNewsapp = !!navigator.userAgent.match(/newsapp/i),
    
85.         isWeixin = (/MicroMessenger/ig).test(navigator.userAgent),
    
86.         isYixin = (/yixin/ig).test(navigator.userAgent),
    
87.         isQQ = (/qq/ig).test(navigator.userAgent),
    
88.         params = localParam().search,
    
89.         url = 'newsapp://',
    
90.         iframe = document.getElementById('iframe');
    
91. 
    
92.     var isIDevicePhone = (/iphone|ipod/gi).test(navigator.platform);
    
93.     var isIDeviceIpad = !isIDevicePhone && (/ipad/gi).test(navigator.platform);
    
94.     var isIDevice = isIDevicePhone || isIDeviceIpad;
    
95.     var isandroid2_x = !isIDevice && (/android\s?2\./gi).test(navigator.userAgent);
    
96.     var isIEMobile = !isIDevice && !isAndroid && (/MSIE/gi).test(navigator.userAgent);
    
97.     var android_url = (!isandroid2_x) ? "http://3g.163.com/links/4304" : "http://3g.163.com/links/6264";
    
98.     var ios_url = "http://3g.163.com/links/3615";
    
99.     var wphone_url = "http://3g.163.com/links/3614";
    
100.     var channel = params.s || 'newsapp'
     
101. 
     
102.     // 判断在不同环境下app的url
     
103.     if(params.docid){
     
104.         if(params['boardid'] && params['title']){
     
105.             url = url + 'comment/' + params.boardid + '/' + params.docid + '/' + params.title
     
106.         }else{
     
107.             url = url + 'doc/' + params.docid
     
108.         }
     
109.     }else if(params.sid){
     
110.         url = url + 'topic/' + params.sid
     
111.     }else if(params.pid){
     
112.         var pid = params.pid.split('_')
     
113.         url = url + 'photo/' + pid[0] + '/' + pid[1]
     
114.     }else if(params.vid){
     
115.         url = url + 'video/' + params.vid
     
116.     }else if(params.liveRoomid){
     
117.         url = url + 'live/' + params.liveRoomid
     
118.     }else if(params.url){
     
119.         url = url + 'web/' + decodeURIComponent(params.url)
     
120.     }else if(params.expertid){
     
121.         url = url + 'expert/' + params.expertid
     
122.     }else if(params.subjectid){
     
123.         url = url + 'subject/' + params.subjectid
     
124.     }else if(params.readerid){
     
125.         url = url + 'reader/' + params.readerid
     
126.     }else{
     
127.         url += 'startup'
     
128.     }
     
129.     if(url.indexOf('?') >= 0){
     
130.         url += '&s=' + (params.s || 'sps')
     
131.     }else{
     
132.         url += '?s=' + (params.s || 'sps')
     
133.     }
     
134. 
     
135.     // ios && 易信  用iframe 打开
     
136.     if((isIos||isIpad) && navigator.userAgent.match(/yixin/i)) {
     
137.         document.getElementById('iframe').src = url;
     
138.     }
     
139. 
     
140.     var height = document.documentElement.clientHeight;
     
141. 
     
142.     // 通常情况下先尝试使用iframe打开
     
143.     document.getElementById('iframe').src = url;
     
144. 
     
145.     // 移动端浏览器中，将下载页面显示出来
     
146.     if(!isWeixin && !isQQ && !isYixin && !isYx){
     
147.         document.querySelector('.main-body').style.display = 'block'
     
148.         if(isIos9){
     
149.             document.querySelector('.main-body').classList.add('showtip')
     
150.         }
     
151. 
     
152.         setTimeout(function(){
     
153.             document.body.scrollTop = 0
     
154.         },200)
     
155.     }else{
     
156.         document.getElementById('guide').style.display = 'block'
     
157.     }
     
158. 
     
159.     // Forward To Redirect Url
     
160.     // Add by zhanzhixiang 12/28/2015
     
161.     if (params.redirect) {
     
162.         var redirectUrl = decodeURIComponent(params.redirect);
     
163.         if ( typeof(URL) === 'function' && new URL(redirectUrl).hostname.search("163.com") !== -1) {
     
164.             window.location.href = redirectUrl;
     
165.         } else if (redirectUrl.search("163.com") !== -1){
     
166.             window.location.href = redirectUrl;
     
167.         };
     
168.     }
     
169. 
     
170.     // Forward To Redirect Url End
     
171.     if ((isWeixin || isQQ) && isAndroid) {
     
172.         window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.netease.newsreader.activity&ckey=CK1331205846719&android_schema=' +　url.match(/(.*)\?/)[1]
     
173.     }
     
174. 
     
175.     if(isIos||isIpad){
     
176.         document.getElementById("guide").classList.add('iosguideopen')
     
177.     }else if (isAndroid){
     
178.         document.getElementById("guide").classList.add('androidguideopen')
     
179.     }else{
     
180.         // window.location.href = 'http://www.163.com/newsapp'
     
181.     }
     
182. 
     
183.     document.getElementById('link').addEventListener('click', function(){
     
184. 
     
185.         // 统计
     
186.         neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )
     
187. 
     
188.         if (config) {
     
189.             android_url = config.android
     
190.         }
     
191.         if (config && config.iOS) {
     
192.             ios_url = config.iOS
     
193.         }
     
194.         if(isWeixin || isQQ){
     
195.             return
     
196.         }
     
197.         var msg = isIDeviceIpad ? "检测到您正在使用iPad, 是否直接前往AppStore下载?" : "检测到您正在使用iPhone, 是否直接前往AppStore下载?";
     
198.         if (isIDevice){
     
199.             window.location = ios_url;
     
200.             return;
     
201.         }else if(isAndroid){
     
202.             // uc浏览器用iframe唤醒
     
203.             if(navigator.userAgent.match(/ucbrowser|yixin|MailMaster/i)){
     
204.                 document.getElementById('iframe').src = url;
     
205.             } else {
     
206.                 window.location.href = url;
     
207.             }
     
208.             setTimeout(function(){
     
209.                 if(document.webkitHidden) {
     
210.                     return
     
211.                 }
     
212.                 if (confirm("检测到您正在使用Android 手机，是否直接下载程序安装包？")) {
     
213.                     neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp_pass&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )
     
214.                     window.location.href = android_url;
     
215.                 } else {
     
216.                     neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp_cancel&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )
     
217.                 }
     
218.             },200)
     
219.             return;
     
220.         }else if(isIEMobile){
     
221.             window.location = wphone_url;
     
222.             return;
     
223.         }else{
     
224.             window.open('http://www.163.com/special/00774IQ6/newsapp_download.html');
     
225.             return;
     
226.         }
     
227.     }, false)
     
228. 
     
229.     setTimeout(function(){
     
230.         if(isIDevice && params.notdownload != 1 && !isNewsapp && !isIos9){
     
231.             document.getElementById('link').click()
     
232.         }
     
233.     }, 1000)
     
234. 
     
235. })(window,document);

复制代码

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

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

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

1. Apple为iOS 9发布了一个所谓的通用链接的深层链接特性，即Universal links。虽然它并不完美，但是这一发布，让数以千计的应用开发人员突然意识到自己的应用体验被打破。
   
2. 
   
3. Universal links，一种能够方便的通过传统的HTTP/HTTPS 链接来启动App，使用相同的网址打开网站和App。

复制代码

关于这个问题的提问与universal links的介绍 点击这里查看

ios9推行的一个新的协议！

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

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

1. {
   
2.    "applinks": {
   
3.        "apps": [ ],
   
4.        "details": {
   
5.            "TEAM-IDENTIFIER.YOUR.BUNDLE.IDENTIFIER": {
   
6.                "paths": [
   
7.                    "*"
   
8.                ]
   
9.            }
   
10.        }
    
11.    }
    
12. }

复制代码

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

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

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

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

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

HuaXuHai

登录可见评论