我只是互吾平臺(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ù)我钦讳,與我溝通。