我只是互吾平臺(tái)中的一名小小的H5開發(fā)者

前段時(shí)間遇到一個(gè)小需求：當(dāng)我和平常一樣废睦，打開了互動(dòng)有吾公眾號(hào)堆缘，想要進(jìn)官網(wǎng)看下我的作品情況娶靡，畢竟要是又有人購買我的H5某抓，那就是一筆收入了漱凝，更重要的是疮蹦，自己的勞動(dòng)成果被人肯定。這時(shí)候茸炒，發(fā)現(xiàn)有個(gè)客戶愕乎，要求在分享出來的h5頁面中，有一個(gè)立即打開的按鈕壁公，如果本地安裝了我們的app感论，那么點(diǎn)擊就直接喚起本地app，如果沒有安裝紊册，則跳轉(zhuǎn)到下載比肄。

因?yàn)閺膩頉]有做過這個(gè)需求，因此這注定是一個(gè)苦逼的調(diào)研過程。

我最開始就面臨2個(gè)問題：一是如何喚起本地app薪前，二是如何判斷瀏覽器是否安裝了對(duì)應(yīng)app润努。（因?yàn)橛兄环數(shù)某涯軇艃海蚁胍坏┨剿鞒晒涂梢栽诨ノ衢_發(fā)者交流群示括，好好炫耀一番了铺浇。）

如何喚起本地app

首先，想要實(shí)現(xiàn)這個(gè)需求垛膝，肯定是必須要客戶端同學(xué)的配合才行鳍侣，因此我們不用知道所有的實(shí)現(xiàn)細(xì)節(jié)，我們從前端角度思考看這個(gè)問題吼拥，需要知道的一點(diǎn)是倚聚，ios與Android都支持一種叫做schema協(xié)議的鏈接。比如網(wǎng)易新聞客戶端的協(xié)議為

當(dāng)然凿可，這個(gè)協(xié)議不需要我們前端去實(shí)現(xiàn)惑折，我們只需要將協(xié)議放在a標(biāo)簽的href屬性里，或者使用location.href與iframe來實(shí)現(xiàn)激活這個(gè)鏈接枯跑。而location.href與iframe是解決這個(gè)需求的關(guān)鍵惨驶。
在ios中，還支持通過smart app banner來喚起app敛助，即通過一個(gè)meta標(biāo)簽粗卜，在標(biāo)簽里帶上app的信息，和打開后的行為纳击，代碼形如

我們還需要知道的一點(diǎn)是续扔，大部分H5的營銷推廣，都和微信有著千絲萬縷的關(guān)系焕数，而微信里屏蔽了schema協(xié)議纱昧。除非你是微信的好基友之類的，他們專門給你配置進(jìn)白名單百匆。否則我們就沒辦法通過這個(gè)協(xié)議在微信中直接喚起app砌些。因此我們會(huì)判斷頁面場(chǎng)景是否在微信中，如果在微信中加匈，則會(huì)提示用戶在瀏覽器中打開存璃。

如何判斷本地是否安裝了app

很無奈的是，在瀏覽器中無法明確的判斷本地是否安裝了app雕拼。因此我們必須采取一些取巧的思路來解決這個(gè)問題纵东。我們能夠很容易想到，采用設(shè)置一個(gè)延遲定時(shí)器setTimeout的方式啥寇，第一時(shí)間嘗試喚起app偎球，如果200ms沒有喚起成功洒扎，則默認(rèn)本地沒有安裝app，200ms以后衰絮，將會(huì)觸發(fā)下載行為袍冷。結(jié)合這個(gè)思路，我們來全局考慮一下這個(gè)需求應(yīng)該采用什么樣的方案來實(shí)現(xiàn)它猫牡。

使用location.href的同學(xué)可能會(huì)面臨一個(gè)擔(dān)憂胡诗，在有的瀏覽器中，當(dāng)我們嘗試激活schema link的時(shí)候淌友，若本地沒有安裝app煌恢，則會(huì)跳轉(zhuǎn)到一個(gè)瀏覽器默認(rèn)的錯(cuò)誤頁面去了。因此大多數(shù)人采用的解決方案都是使用iframe

測(cè)試了很多瀏覽器震庭，沒有發(fā)現(xiàn)過這種情況

后來觀察了網(wǎng)易新聞瑰抵，今日頭條，YY等的實(shí)現(xiàn)方案器联，發(fā)現(xiàn)大家都采用的是iframe來實(shí)現(xiàn)二汛。好吧，面對(duì)這種情況拨拓，只能屈服习贫。
整理一下目前的思路，得到下面的解決方案

想法很美好千元，現(xiàn)實(shí)很殘酷。一測(cè)試颤绕，就發(fā)現(xiàn)簡(jiǎn)單的這樣實(shí)現(xiàn)有許多的問題幸海。
第一個(gè)問題在于，當(dāng)頁面成功喚起app之后奥务，我們?cè)偾袚Q回來瀏覽器物独，發(fā)現(xiàn)跳轉(zhuǎn)到了下載頁面。為了解決這個(gè)問題氯葬，發(fā)現(xiàn)各個(gè)公司都進(jìn)行了不同方式的嘗試挡篓。也是歷經(jīng)的很多折磨，發(fā)現(xiàn)了幾個(gè)比較有用的事件帚称。

pageshow： 頁面顯示時(shí)觸發(fā)官研，在load事件之后觸發(fā)。需要將該事件綁定到window上才會(huì)觸發(fā)
pagehide: 頁面隱藏時(shí)觸發(fā)
visibilitychange： 頁面隱藏沒有在當(dāng)前顯示時(shí)觸發(fā)闯睹，比如切換tab戏羽，也會(huì)觸發(fā)該事件
document.hidden 當(dāng)頁面隱藏時(shí)，該值為true楼吃，顯示時(shí)為false

由于各個(gè)瀏覽器的支持情況不同始花，我們需要將這些事件都給綁定上妄讯，即使這樣，也不一定能夠保證所有的瀏覽器都能夠解決掉這個(gè)小問題酷宵，實(shí)在沒辦法的事情就不管了亥贸。（我就納悶了，互吾平臺(tái)的其他開發(fā)者浇垦，是怎么做到的呢炕置？要不改天問下？）

因此需要擴(kuò)充一下上面的方案溜族，當(dāng)本地app被喚起讹俊，則頁面會(huì)隱藏掉，就會(huì)觸發(fā)pagehide與visibilitychange事件

而另外一個(gè)問題就是IOS9+下面的問題了煌抒。ios9的Safari仍劈，根本不支持通過iframe跳轉(zhuǎn)到其他頁面去。也就是說寡壮，在safari下贩疙，我的整體方案被全盤否決！
于是我就只能嘗試使用location.href的方式况既，這個(gè)方式能夠喚起app这溅，但是有一個(gè)坑爹的問題，使用schema協(xié)議喚起app會(huì)有彈窗而不會(huì)直接跳轉(zhuǎn)去app棒仍！甚至當(dāng)本地沒有app時(shí)悲靴，會(huì)被判斷為鏈接無效，然后還有一個(gè)彈窗莫其。

這個(gè)彈窗會(huì)造成什么問題呢癞尚？

如果用戶不點(diǎn)確認(rèn)按鈕，根據(jù)上面的邏輯乱陡，這個(gè)時(shí)候就會(huì)發(fā)現(xiàn)頁面會(huì)自動(dòng)跳轉(zhuǎn)到下載去了浇揩。而且無效的彈窗提示在用戶體驗(yàn)上是不允許出現(xiàn)的。
好吧憨颠，繼續(xù)扒別人的代碼胳徽，看看別人是如何實(shí)現(xiàn)的。然后我又去觀摩了其他公司的實(shí)現(xiàn)結(jié)果爽彤，發(fā)現(xiàn)網(wǎng)易新聞养盗，今日頭條都可以在ios直接從微信中喚起app。真是神奇了淫茵，可是今日頭條在Android版微信上也沒辦法直接喚起的爪瓜，他們?cè)贏ndroid上都是直接到騰訊應(yīng)用寶的下載里去。所以按道理來說這不是添加了白名單匙瘪。
為了找到這個(gè)問題的解決方案铆铆，我在網(wǎng)易新聞的頁面中扒出了他們的代碼蝶缀，并整理如下，添加了部分注釋

雖然有一些外部的引用薄货，和一些搞不懂是干什么用的方法和變量翁都，但是基本邏輯還是能夠看明白。好像也沒有什么特別的地方谅猾。研究了許久柄慰，看到了一個(gè)jsonp請(qǐng)求很奇特。

這是來干嘛用的税娜？
于是費(fèi)盡千辛萬苦坐搔，搜索了很多文章，最終鎖定了一個(gè)關(guān)鍵的名詞 Universal links敬矩。如果我早知道這個(gè)名詞概行，那么問題就不會(huì)變的那么束手無策。所以這個(gè)東西是什么呢弧岳？

記得凳忙，互動(dòng)有吾微信公眾號(hào)之前有發(fā)過了一篇文章，里面有說到：Apple為iOS 9發(fā)布了一個(gè)所謂的通用鏈接的深層鏈接特性禽炬，即Universal links涧卵。雖然它并不完美，但是這一發(fā)布腹尖，讓數(shù)以千計(jì)的應(yīng)用開發(fā)人員突然意識(shí)到自己的應(yīng)用體驗(yàn)被打破柳恐。

Universal links，一種能夠方便的通過傳統(tǒng)的HTTP/HTTPS 鏈接來啟動(dòng)App热幔，使用相同的網(wǎng)址打開網(wǎng)站和App胎撤。

關(guān)于本文的這個(gè)問題，國內(nèi)的論壇有許許多多的文章來解決断凶，但是提到universal links的文章少之又少，而我想吐槽的是巫俺，我們的ios開發(fā)也尼瑪不知道這個(gè)名詞认烁，搞什么鬼。他改變了用戶體驗(yàn)的關(guān)鍵在于介汹，微信沒有屏蔽這個(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文件

支持了這個(gè)協(xié)議之后叹卷，我們又可以通過iframe來喚起app了撼港，因此基本邏輯就是這樣了坪它。

但是！并不是就沒有坑了帝牡。

universal links還有一個(gè)大坑往毡，就是如果想要通過universal links只在在微信中打開app，同一個(gè)頁面我們還得使用不同的兩個(gè)域名靶溜。這個(gè)特性雖然有點(diǎn)坑开瞭，但是通過這個(gè)特性卻能夠完美判斷本地是否安裝了你們的app。

比如我們正常訪問當(dāng)前頁面的域名為A罩息，對(duì)應(yīng)的頁面url為A+嗤详，而當(dāng)我們點(diǎn)擊按鈕，需要打開app用到的域名為B瓷炮，葱色，對(duì)應(yīng)的頁面url為B+。A與B都被注冊(cè)成為了對(duì)應(yīng)app的universal links崭别，A+ 與 B+ 都指向同一個(gè)頁面冬筒。我們通過js判斷，如果是通過B+訪問的該頁面茅主，則直接跳去下載app舞痰。這樣，當(dāng)我們從A+通過點(diǎn)擊訪問B+時(shí)诀姚，如果universal links生效并且本地安裝了對(duì)應(yīng)的app响牛，app會(huì)直接被打開。如果本地沒有安裝App赫段，則會(huì)直接執(zhí)行剛才B+中跳去下載的設(shè)定呀打。

OK，這個(gè)問題糯笙，幾乎所有的坑我都在上面說到了贬丛，如果想要做好兼容，就是一個(gè)針對(duì)每個(gè)坑做最優(yōu)選擇了给涕，這是一個(gè)工作量的問題豺憔。

不過最終的調(diào)研結(jié)果是：沒有完美的解決方案

就算是網(wǎng)易新聞，這個(gè)按鈕在使用過程中也會(huì)有一些小bug够庙，無法做到完美的狀態(tài)恭应。因?yàn)槲覀兠媾R許多沒辦法解決的問題，比如無法真正意義上的判斷本地是否安裝了app耘眨，pageshow昼榛，pagehide并不是所有的瀏覽器都支持等。很多其他博客里面剔难，什么計(jì)算時(shí)間差等方案胆屿，我花了很久的時(shí)間去研究這個(gè)方案奥喻，結(jié)果是：

根！本莺掠！沒衫嵌！有！用彻秆！

老實(shí)說楔绞，從微信中跳轉(zhuǎn)到外部瀏覽器，并不是一個(gè)好的解決方案唇兑，這樣會(huì)導(dǎo)致很多用戶流失酒朵，每天在互吾找H5的商家那么多吗坚，相信他們也是不愿意看到這局面的疯搅，因此大部分互吾開發(fā)者都在ios上實(shí)現(xiàn)了universal links。
網(wǎng)易新聞的邏輯是外永，點(diǎn)擊打開會(huì)跳轉(zhuǎn)到一個(gè)下載頁面留夜，這個(gè)下載頁面一加載完成就嘗試打開app匙铡，如果打開了就直接跑到app里面去了，如果沒有就在頁面上有一個(gè)立即下載的按鈕碍粥，按鈕行只有下載處理鳖眼。

這個(gè)問題就總結(jié)到這里，如果大家有更好的方案嚼摩，歡迎回復(fù)我钦讳，與我溝通。