h5喚起app解決方案

最近遇到一個(gè)需求:點(diǎn)擊一個(gè)按鈕,如果本機(jī)裝有則喚起app,沒有的話則跳下載頁。

剛一接到需求,覺得很熟悉,實(shí)際上這個(gè)功能也確實(shí)很常見,頁能搜索到一大堆方案,但是實(shí)際應(yīng)用中,卻發(fā)現(xiàn)總是很難做到100%的完美。這個(gè)大概有兩個(gè)點(diǎn),以微信為主的騰訊瀏覽器系列和其他瀏覽器。(因?yàn)轵v訊系列會(huì)攔截scheme,手百似乎也會(huì),不知道百度在想什么= =,至于引導(dǎo)用戶在Safari中打開之類的方案,本文不再描述)解決方案大致有以下這么幾個(gè):

1.url scheme

這個(gè)方案基本上就是針對(duì)微信、qq內(nèi)置瀏覽器,qq瀏覽器等之外的其余瀏覽器,從native那邊要一個(gè)scheme ,然后放在a標(biāo)簽里或者location.href跳一下就行了,但是現(xiàn)在主要問提來了,前端不知道本地到底有沒有安裝app,這就比較尷尬,只能繞過去,最終選取了這種方案:

1

實(shí)際上也很容易看出來,就是用一個(gè)iframe去做的一個(gè)跳頁,有的話喚起scheme沒有的話,會(huì)觸發(fā)定時(shí)器跳到下載地址。但是這個(gè)方式在ios里面,在沒有app的時(shí)候會(huì)遇到兩次提示,非常討厭。

2.Universal Link(ios)

用這個(gè)方法,主要是因?yàn)槟愕腻X沖的還不夠= =(據(jù)說有些可以騰訊兄弟直接給跳),既然大家都很難做軟妹幣戰(zhàn)士,那么就只能想辦法。

這邊在微信為主的騰訊兄弟內(nèi)置瀏覽器里面,還是比較推薦使用應(yīng)用寶的,它會(huì)自動(dòng)判斷是否本地有app,安卓會(huì)自動(dòng)喚起,只需在尾部拼上參數(shù)&android_schema="你的scheme"他便會(huì)自動(dòng)喚起app,ios就不行咯,必須跳app store,(╯‵□′)╯︵┴─┴

終于到了本段主角Universal Link,以下是這貨的介紹:

這是iOS9推出的一項(xiàng)功能,如果你的應(yīng)用支持Universal Links(通用鏈接),那么就能夠方便的通過傳統(tǒng)的HTTP鏈接來啟動(dòng)APP(如果iOS設(shè)備上已經(jīng)安裝了你的app,不需要額外做任何判斷等),或者打開網(wǎng)頁(iOS設(shè)備上沒有安裝你的app)?;蛟S可以更簡(jiǎn)單點(diǎn)來說明,在iOS9之前,對(duì)于從各種從瀏覽器,Safari、UIWebView或者 WKWebView中喚醒APP的需求,我們通常只能使用scheme。

其實(shí)這貨實(shí)際上就是一個(gè)特殊的https請(qǐng)求,注意,必須是https(幫ios的同學(xué)劃重點(diǎn) ~~),看起來好屌,似乎有很復(fù)雜,對(duì)于前端來說,我們有太多的工作要做了:

window.location.href ="native端戰(zhàn)友給的Universal Link"

wtf?嗯,就是這樣,(╯‵□′)╯︵┴─┴

實(shí)際上我們要做的就這么多= =,其他的配置就需要native協(xié)調(diào)服務(wù)端兄弟去做了:準(zhǔn)備好與主站不同的域名,比如主站www.xxxx.com,你們可以準(zhǔn)備好open.xxxx.com的域名作為重定向用。好吧!實(shí)際上通用鏈接有一個(gè)很坑的屬性,必須是異域打開,而且如果你提交的是你主站的鏈接,你打開你的主站你會(huì)發(fā)現(xiàn)網(wǎng)站上方會(huì)掛著一個(gè)難看的灰條轉(zhuǎn)向appstore中你們的app,沒錯(cuò),就是ios系統(tǒng)干的這個(gè)事,具體的其他注意事項(xiàng)可以參考這篇文章IOS9通用鏈接(universal link)。

最終實(shí)現(xiàn)是這樣的:

2

是不是很簡(jiǎn)單~,但是也不是很完美,總感覺差點(diǎn)什么,算了反正也大致實(shí)現(xiàn)了,就以后慢慢琢磨吧,ps,這貨只不過暫時(shí)沒有被管制,沒準(zhǔn)哪天就發(fā)現(xiàn)gg了,畢竟你的錢沖的還不夠~( ̄▽ ̄~)(~ ̄▽ ̄)~嘿嘿嘿嘿

最后,送上旺仔兒童大禮包(環(huán)境判斷方法,雖然也是百度的,但是省的找了,請(qǐng)叫我雷鋒\(^o^)/~)

傳送門

最后的最后,不當(dāng)之處還請(qǐng)各路大牛多多指正~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在移動(dòng)互聯(lián)網(wǎng),鏈接是比較重要的傳播媒質(zhì),但很多時(shí)候我們又希望用戶能夠回到APP中,這就要求APP可以通過瀏覽器或在...
    魔窗magicwindow閱讀 2,535評(píng)論 2 5
  • 在移動(dòng)互聯(lián)網(wǎng),鏈接是比較重要的傳播媒質(zhì),但很多時(shí)候我們又希望用戶能夠回到APP中,這就要求APP可以通過瀏覽器或在...
    魚雨魚閱讀 3,361評(píng)論 3 17
  • 引言 最近在做客戶端開發(fā)的工作中,需要解決一些渠道流量監(jiān)控的問題。發(fā)現(xiàn)在喚醒a(bǔ)pp的時(shí)候涉及到很多這樣那樣的lin...
    Edie小哪吒閱讀 25,117評(píng)論 15 45
  • 移動(dòng)互聯(lián)時(shí)代,很多互聯(lián)網(wǎng)服務(wù)都會(huì)同時(shí)具備網(wǎng)站以及移動(dòng)客戶端,很多人認(rèn)為APP的能幫助建立更穩(wěn)固的用戶關(guān)系,于是經(jīng)常...
    zyl04401閱讀 44,483評(píng)論 17 72
  • 細(xì)雨綿綿何時(shí)休,青山常在人難留; 流云消逝已是雨,愛恨情愁亦沉浮。
    康辰閱讀 262評(píng)論 1 0

友情鏈接更多精彩內(nèi)容