瀏覽器中喚起Native App
前段時(shí)間遇到一個(gè)小需求：要求在分享出來(lái)的h5頁(yè)面中，有一個(gè)立即打開(kāi)的按鈕，如果本地安裝了我們的app，那么點(diǎn)擊就直接喚起本地app，如果沒(méi)有安裝，則跳轉(zhuǎn)到下載。
因?yàn)閺膩?lái)沒(méi)有做過(guò)這個(gè)需求，因此這注定是一個(gè)苦逼的調(diào)研過(guò)程。
我們最開(kāi)始就面臨2個(gè)問(wèn)題：一是如何喚起本地app，二是如何判斷瀏覽器是否安裝了對(duì)應(yīng)app。
如何喚起本地app
首先，想要實(shí)現(xiàn)這個(gè)需求，肯定是必須要客戶端同學(xué)的配合才行，因此我們不用知道所有的實(shí)現(xiàn)細(xì)節(jié)，我們從前端角度思考看這個(gè)問(wèn)題，需要知道的一點(diǎn)是，ios與Android都支持一種叫做schema協(xié)議的鏈接。比如網(wǎng)易新聞客戶端的協(xié)議為
- newsapp://xxxxx
當(dāng)然，這個(gè)協(xié)議不需要我們前端去實(shí)現(xiàn)，我們只需要將協(xié)議放在a標(biāo)簽的href屬性里，或者使用location.href與iframe來(lái)實(shí)現(xiàn)激活這個(gè)鏈接。而location.href與iframe是解決這個(gè)需求的關(guān)鍵。
在ios中，還支持通過(guò)smart app banner來(lái)喚起app，即通過(guò)一個(gè)meta標(biāo)簽，在標(biāo)簽里帶上app的信息，和打開(kāi)后的行為，代碼形如
- <meta name="apple-itunes-app" content="app-id=1023600494, app-argument=tigerbrokersusstock://com.tigerbrokers.usstock/post?postId=7125"/>
我們還需要知道的一點(diǎn)是，微信里屏蔽了schema協(xié)議。除非你是微信的合作伙伴之類的，他們專門給你配置進(jìn)白名單。否則我們就沒(méi)辦法通過(guò)這個(gè)協(xié)議在微信中直接喚起app。
因此我們會(huì)判斷頁(yè)面場(chǎng)景是否在微信中，如果在微信中，則會(huì)提示用戶在瀏覽器中打開(kāi)。
如何判斷本地是否安裝了app
很無(wú)奈的是，在瀏覽器中無(wú)法明確的判斷本地是否安裝了app。因此我們必須采取一些取巧的思路來(lái)解決這個(gè)問(wèn)題。
我們能夠很容易想到，采用設(shè)置一個(gè)延遲定時(shí)器setTimeout的方式，***時(shí)間嘗試喚起app，如果200ms沒(méi)有喚起成功，則默認(rèn)本地沒(méi)有安裝app，200ms以后，將會(huì)觸發(fā)下載行為。
結(jié)合這個(gè)思路，我們來(lái)全局考慮一下這個(gè)需求應(yīng)該采用什么樣的方案來(lái)實(shí)現(xiàn)它。
使用location.href的同學(xué)可能會(huì)面臨一個(gè)擔(dān)憂，在有的瀏覽器中，當(dāng)我們嘗試激活schema link的時(shí)候，若本地沒(méi)有安裝app，則會(huì)跳轉(zhuǎn)到一個(gè)瀏覽器默認(rèn)的錯(cuò)誤頁(yè)面去了。因此大多數(shù)人采用的解決方案都是使用iframe
測(cè)試了很多瀏覽器，沒(méi)有發(fā)現(xiàn)過(guò)這種情況
后來(lái)觀察了網(wǎng)易新聞，今日頭條，YY等的實(shí)現(xiàn)方案，發(fā)現(xiàn)大家都采用的是iframe來(lái)實(shí)現(xiàn)。好吧，面對(duì)這種情況，只能屈服。
整理一下目前的思路，得到下面的解決方案
- var url = {
- open: 'app://xxxxx',
- down: 'xxxxxxxx'
- };
- var iframe = document.createElement('iframe');
- var body = document.body;
- iframe.style.cssText='display:none;width=0;height=0';
- var timer = null;
- // 立即打開(kāi)的按鈕
- var openapp = document.getElementById('openapp');
- openapp.addEventListener('click', function() {
- if(/MicroMessenger/gi.test(navigator.userAgent) {
- // 引導(dǎo)用戶在瀏覽器中打開(kāi)
- }) else{
- body.appendChild(iframe);
- iframe.src = url.open;
- timer = setTimeout(function() {
- wondow.location.href = url.down;
- }, 500);
- }
- }, false)
想法很美好，現(xiàn)實(shí)很殘酷。一測(cè)試，就發(fā)現(xiàn)簡(jiǎn)單的這樣實(shí)現(xiàn)有許多的問(wèn)題。
***個(gè)問(wèn)題在于，當(dāng)頁(yè)面成功喚起app之后，我們?cè)偾袚Q回來(lái)瀏覽器，發(fā)現(xiàn)跳轉(zhuǎn)到了下載頁(yè)面。
為了解決這個(gè)問(wèn)題，發(fā)現(xiàn)各個(gè)公司都進(jìn)行了不同方式的嘗試。
也是歷經(jīng)的很多折磨，發(fā)現(xiàn)了幾個(gè)比較有用的事件。
pageshow： 頁(yè)面顯示時(shí)觸發(fā)，在load事件之后觸發(fā)。需要將該事件綁定到window上才會(huì)觸發(fā)
pagehide: 頁(yè)面隱藏時(shí)觸發(fā)
visibilitychange： 頁(yè)面隱藏沒(méi)有在當(dāng)前顯示時(shí)觸發(fā)，比如切換tab，也會(huì)觸發(fā)該事件
document.hidden 當(dāng)頁(yè)面隱藏時(shí)，該值為true，顯示時(shí)為false
由于各個(gè)瀏覽器的支持情況不同，我們需要將這些事件都給綁定上，即使這樣，也不一定能夠保證所有的瀏覽器都能夠解決掉這個(gè)小問(wèn)題，實(shí)在沒(méi)辦法的事情就不管了。
因此需要擴(kuò)充一下上面的方案，當(dāng)本地app被喚起，則頁(yè)面會(huì)隱藏掉，就會(huì)觸發(fā)pagehide與visibilitychange事件
- $(document).on('visibilitychange webkitvisibilitychange', function() {
- var tag = document.hidden || document.webkitHidden;
- if (tag) {
- clearTimeout(timer);
- }
- })
- $(window).on('pagehide', function() {
- clearTimeout(timer);
- })
而另外一個(gè)問(wèn)題就是IOS9+下面的問(wèn)題了。ios9的Safari，根本不支持通過(guò)iframe跳轉(zhuǎn)到其他頁(yè)面去。也就是說(shuō)，在safari下，我的整體方案被全盤否決!
于是我就只能嘗試使用location.href的方式，這個(gè)方式能夠喚起app，但是有一個(gè)坑爹的問(wèn)題，使用schema協(xié)議喚起app會(huì)有彈窗而不會(huì)直接跳轉(zhuǎn)去app!甚至當(dāng)本地沒(méi)有app時(shí)，會(huì)被判斷為鏈接無(wú)效，然后還有一個(gè)彈窗。
這個(gè)彈窗會(huì)造成什么問(wèn)題呢?如果用戶不點(diǎn)確認(rèn)按鈕，根據(jù)上面的邏輯，這個(gè)時(shí)候就會(huì)發(fā)現(xiàn)頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)到下載去了。而且無(wú)效的彈窗提示在用戶體驗(yàn)上是不允許出現(xiàn)的。
好吧，繼續(xù)扒別人的代碼，看看別人是如何實(shí)現(xiàn)的。然后我又去觀摩了其他公司的實(shí)現(xiàn)結(jié)果，發(fā)現(xiàn)網(wǎng)易新聞，今日頭條都可以在ios直接從微信中喚起app。真是神奇了，可是今日頭條在Android版微信上也沒(méi)辦法直接喚起的，他們?cè)贏ndroid上都是直接到騰訊應(yīng)用寶的下載里去。所以按道理來(lái)說(shuō)這不是添加了白名單。
為了找到這個(gè)問(wèn)題的解決方案，我在網(wǎng)易新聞的頁(yè)面中扒出了他們的代碼，并整理如下，添加了部分注釋
- window.NRUM = window.NRUM || {};
- window.NRUM.config = {
- key:'27e86c0843344caca7ba9ea652d7948d',
- clientStart: +new Date()
- };
- (function() {
- var n = document.getElementsByTagName('script')[0],
- s = document.createElement('script');
- s.type = 'text/javascript';
- s.async = true;
- s.src = '//nos.netease.com/apmsdk/napm-web-min-1.1.3.js';
- n.parentNode.insertBefore(s, n);
- })();
- ;
- (function(window,doc){
- // http://apm.netease.com/manual?api=web
- NRUM.mark && NRUM.mark('pageload', true)
- var list = []
- var config = null
- // jsonp
- function jsonp(a, b, c) {
- var d;
- d = document.createElement('script');
- d.src = a;
- c && (d.charset = c);
- d.onload = function() {
- this.onload = this.onerror = null;
- this.parentNode.removeChild(this);
- b && b(!0);
- };
- d.onerror = function() {
- this.onload = this.onerror = null;
- this.parentNode.removeChild(this);
- b && b(!1);
- };
- document.head.appendChild(d);
- };
- function localParam(search,hash){
- search = search || window.location.search;
- hash = hash || window.location.hash;
- var fn = function(str,reg){
- if(str){
- var data = {};
- str.replace(reg,function( $0, $1, $2, $3 ){
- data[ $1 ] = $3;
- });
- return data;
- }
- }
- return {search: fn(search,new RegExp( "([^?=&]+)(=([^&]*))?", "g" ))||{},hash: fn(hash,new RegExp( "([^#=&]+)(=([^&]*))?", "g" ))||{}};
- }
- jsonp('http://active.163.com/service/form/v1/5847/view/1047.jsonp')
- window.search = localParam().search
- window._callback = function(data) {
- window._callback = null
- list = data.list
- if(search.s && !!search.s.match(/^wap/i)) {
- config = list.filter(function(item){
- return item.type === 'wap'
- })[0]
- return
- }
- config = list.filter(function(item){
- return item.type === search.s
- })[0]
- }
- var isAndroid = !!navigator.userAgent.match(/android/ig),
- isIos = !!navigator.userAgent.match(/iphone|ipod/ig),
- isIpad = !!navigator.userAgent.match(/ipad/ig),
- isIos9 = !!navigator.userAgent.match(/OS 9/ig),
- isYx = !!navigator.userAgent.match(/MailMaster_Android/i),
- isNewsapp = !!navigator.userAgent.match(/newsapp/i),
- isWeixin = (/MicroMessenger/ig).test(navigator.userAgent),
- isYixin = (/yixin/ig).test(navigator.userAgent),
- isQQ = (/qq/ig).test(navigator.userAgent),
- params = localParam().search,
- url = 'newsapp://',
- iframe = document.getElementById('iframe');
- var isIDevicePhone = (/iphone|ipod/gi).test(navigator.platform);
- var isIDeviceIpad = !isIDevicePhone && (/ipad/gi).test(navigator.platform);
- var isIDevice = isIDevicePhone || isIDeviceIpad;
- var isandroid2_x = !isIDevice && (/android\s?2\./gi).test(navigator.userAgent);
- var isIEMobile = !isIDevice && !isAndroid && (/MSIE/gi).test(navigator.userAgent);
- var android_url = (!isandroid2_x) ? "http://3g.163.com/links/4304" : "http://3g.163.com/links/6264";
- var ios_url = "http://3g.163.com/links/3615";
- var wphone_url = "http://3g.163.com/links/3614";
- var channel = params.s || 'newsapp'
- // 判斷在不同環(huán)境下app的url
- if(params.docid){
- if(params['boardid'] && params['title']){
- url = url + 'comment/' + params.boardid + '/' + params.docid + '/' + params.title
- }else{
- url = url + 'doc/' + params.docid
- }
- }else if(params.sid){
- url = url + 'topic/' + params.sid
- }else if(params.pid){
- var pid = params.pid.split('_')
- url = url + 'photo/' + pid[0] + '/' + pid[1]
- }else if(params.vid){
- url = url + 'video/' + params.vid
- }else if(params.liveRoomid){
- url = url + 'live/' + params.liveRoomid
- }else if(params.url){
- url = url + 'web/' + decodeURIComponent(params.url)
- }else if(params.expertid){
- url = url + 'expert/' + params.expertid
- }else if(params.subjectid){
- url = url + 'subject/' + params.subjectid
- }else if(params.readerid){
- url = url + 'reader/' + params.readerid
- }else{
- url += 'startup'
- }
- if(url.indexOf('?') >= 0){
- url += '&s=' + (params.s || 'sps')
- }else{
- url += '?s=' + (params.s || 'sps')
- }
- // ios && 易信 用iframe 打開(kāi)
- if((isIos||isIpad) && navigator.userAgent.match(/yixin/i)) {
- document.getElementById('iframe').src = url;
- }
- var height = document.documentElement.clientHeight;
- // 通常情況下先嘗試使用iframe打開(kāi)
- document.getElementById('iframe').src = url;
- // 移動(dòng)端瀏覽器中，將下載頁(yè)面顯示出來(lái)
- if(!isWeixin && !isQQ && !isYixin && !isYx){
- document.querySelector('.main-body').style.display = 'block'
- if(isIos9){
- document.querySelector('.main-body').classList.add('showtip')
- }
- setTimeout(function(){
- document.body.scrollTop = 0
- },200)
- }else{
- document.getElementById('guide').style.display = 'block'
- }
- // Forward To Redirect Url
- // Add by zhanzhixiang 12/28/2015
- if (params.redirect) {
- var redirectUrl = decodeURIComponent(params.redirect);
- if ( typeof(URL) === 'function' && new URL(redirectUrl).hostname.search("163.com") !== -1) {
- window.location.href = redirectUrl;
- } else if (redirectUrl.search("163.com") !== -1){
- window.location.href = redirectUrl;
- };
- }
- // Forward To Redirect Url End
- if ((isWeixin || isQQ) && isAndroid) {
- window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.netease.newsreader.activity&ckey=CK1331205846719&android_schema=' + url.match(/(.*)\?/)[1]
- }
- if(isIos||isIpad){
- document.getElementById("guide").classList.add('iosguideopen')
- }else if (isAndroid){
- document.getElementById("guide").classList.add('androidguideopen')
- }else{
- // window.location.href = 'http://www.163.com/newsapp'
- }
- document.getElementById('link').addEventListener('click', function(){
- // 統(tǒng)計(jì)
- neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )
- if (config) {
- android_url = config.android
- }
- if (config && config.iOS) {
- ios_url = config.iOS
- }
- if(isWeixin || isQQ){
- return
- }
- var msg = isIDeviceIpad ? "檢測(cè)到您正在使用iPad, 是否直接前往AppStore下載?" : "檢測(cè)到您正在使用iPhone, 是否直接前往AppStore下載?";
- if (isIDevice){
- window.location = ios_url;
- return;
- }else if(isAndroid){
- // uc瀏覽器用iframe喚醒
- if(navigator.userAgent.match(/ucbrowser|yixin|MailMaster/i)){
- document.getElementById('iframe').src = url;
- } else {
- window.location.href = url;
- }
- setTimeout(function(){
- if(document.webkitHidden) {
- return
- }
- if (confirm("檢測(cè)到您正在使用Android 手機(jī)，是否直接下載程序安裝包？")) {
- neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp_pass&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )
- window.location.href = android_url;
- } else {
- neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp_cancel&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )
- }
- },200)
- return;
- }else if(isIEMobile){
- window.location = wphone_url;
- return;
- }else{
- window.open('http://www.163.com/special/00774IQ6/newsapp_download.html');
- return;
- }
- }, false)
- setTimeout(function(){
- if(isIDevice && params.notdownload != 1 && !isNewsapp && !isIos9){
- document.getElementById('link').click()
- }
- }, 1000)
- })(window,document);
雖然有一些外部的引用，和一些搞不懂是干什么用的方法和變量，但是基本邏輯還是能夠看明白。好像也沒(méi)有什么特別的地方。研究了許久，看到了一個(gè)jsonp請(qǐng)求很奇特。這是來(lái)干嘛用的?
于是費(fèi)盡千辛萬(wàn)苦，搜索了很多文章，最終鎖定了一個(gè)關(guān)鍵的名詞 Universal links。
如果我早知道這個(gè)名詞，那么問(wèn)題就不會(huì)變的那么束手無(wú)策。所以這個(gè)東西是什么呢?
Apple為iOS 9發(fā)布了一個(gè)所謂的通用鏈接的深層鏈接特性，即Universal links。雖然它并不***，但是這一發(fā)布，讓數(shù)以千計(jì)的應(yīng)用開(kāi)發(fā)人員突然意識(shí)到自己的應(yīng)用體驗(yàn)被打破。
Universal links，一種能夠方便的通過(guò)傳統(tǒng)的HTTP/HTTPS 鏈接來(lái)啟動(dòng)App，使用相同的網(wǎng)址打開(kāi)網(wǎng)站和App。
關(guān)于這個(gè)問(wèn)題的提問(wèn)與universal links的介紹(http://stackoverflow.com/questions/31891777/ios-9-safari-iframe-src-with-custom-url-scheme-not-working)
ios9推行的一個(gè)新的協(xié)議!
關(guān)于本文的這個(gè)問(wèn)題，國(guó)內(nèi)的論壇有許許多多的文章來(lái)解決，但是提到universal links的文章少之又少，而我想吐槽的是，我們的ios開(kāi)發(fā)也尼瑪不知道這個(gè)名詞，搞什么鬼。他改變了用戶體驗(yàn)的關(guān)鍵在于，微信沒(méi)有屏蔽這個(gè)協(xié)議。因此如果我們的app注冊(cè)了這個(gè)協(xié)議，那么我們就能夠從微信中直接喚起app。
這個(gè)時(shí)候我就發(fā)現(xiàn)，上面貼的網(wǎng)易新聞代碼中的jsonp請(qǐng)求的內(nèi)容，就是這個(gè)協(xié)議必須的一個(gè)叫做apple-app-site-association的JSON文件
- {
- "applinks": {
- "apps": [ ],
- "details": {
- "TEAM-IDENTIFIER.YOUR.BUNDLE.IDENTIFIER": {
- "paths": [
- "*"
- ]
- }
- }
- }
- }
大家可以直接訪問(wèn)這個(gè)鏈接，查看里面的內(nèi)容
http://active.163.com/service…
至于universal links具體如何實(shí)現(xiàn)，讓ios的同學(xué)去搞定吧，這里提供兩個(gè)參考文章
http://www.cocoachina.com/bbs…
https://blog.branch.io/how-to…
支持了這個(gè)協(xié)議之后，我們又可以通過(guò)iframe來(lái)喚起app了，因此基本邏輯就是這樣了。
但是!并不是就沒(méi)有坑了。
universal links還有一個(gè)大坑，就是如果想要通過(guò)universal links只在在微信中打開(kāi)app，同一個(gè)頁(yè)面我們還得使用不同的兩個(gè)域名。
這個(gè)特性雖然有點(diǎn)坑，但是通過(guò)這個(gè)特性卻能夠***判斷本地是否安裝了你們的app。
比如我們正常訪問(wèn)當(dāng)前頁(yè)面的域名為A，對(duì)應(yīng)的頁(yè)面url為A+，而當(dāng)我們點(diǎn)擊按鈕，需要打開(kāi)app用到的域名為B，，對(duì)應(yīng)的頁(yè)面url為B+。
A與B都被注冊(cè)成為了對(duì)應(yīng)app的universal links，A+ 與 B+ 都指向同一個(gè)頁(yè)面。
我們通過(guò)js判斷，如果是通過(guò)B+訪問(wèn)的該頁(yè)面，則直接跳去下載app。這樣，當(dāng)我們從A+通過(guò)點(diǎn)擊訪問(wèn)B+時(shí)，如果universal links生效并且本地安裝了對(duì)應(yīng)的app，app會(huì)直接被打開(kāi)。如果本地沒(méi)有安裝App，則會(huì)直接執(zhí)行剛才B+中跳去下載的設(shè)定。
OK，這個(gè)問(wèn)題，幾乎所有的坑我都在上面說(shuō)到了，如果想要做好兼容，就是一個(gè)針對(duì)每個(gè)坑做***選擇了，這是一個(gè)工作量的問(wèn)題。
不過(guò)最終的調(diào)研結(jié)果是
沒(méi)有***的解決方案
就算是網(wǎng)易新聞，這個(gè)按鈕在使用過(guò)程中也會(huì)有一些小bug，無(wú)法做到***的狀態(tài)。
因?yàn)槲覀兠媾R許多沒(méi)辦法解決的問(wèn)題，比如無(wú)法真正意義上的判斷本地是否安裝了app，pageshow，pagehide并不是所有的瀏覽器都支持等。很多其他博客里面，什么計(jì)算時(shí)間差等方案，我花了很久的時(shí)間去研究這個(gè)方案，結(jié)果是，根!本!沒(méi)!有!用!
老實(shí)說(shuō)，從微信中跳轉(zhuǎn)到外部瀏覽器，并不是一個(gè)好的解決方案，這樣會(huì)導(dǎo)致很多用戶流失，因此大家都在ios上實(shí)現(xiàn)了universal links。
網(wǎng)易新聞的邏輯是，點(diǎn)擊打開(kāi)會(huì)跳轉(zhuǎn)到一個(gè)下載頁(yè)面，這個(gè)下載頁(yè)面一加載完成就嘗試打開(kāi)app，如果打開(kāi)了就直接跑到app里面去了，如果沒(méi)有就在頁(yè)面上有一個(gè)立即下載的按鈕，按鈕行只有下載處理。
這個(gè)問(wèn)題就總結(jié)到這里，如果大家有更好的方案，歡迎與我溝通。
