一、前言

在Hybrid開發(fā)的旅程中，一種常見需求是實(shí)現(xiàn)在H5頁面喚起已安裝的APP或跳轉(zhuǎn)到APP的特定頁面。這種交互的背后技術(shù)被稱為deeplink技術(shù)，或者稱之為喚端技術(shù)。這種技術(shù)不僅優(yōu)化了用戶體驗(yàn)，還為廣告投放、用戶拉新和引流等提供了強(qiáng)有力的支持。那么，這項(xiàng)神奇的技術(shù)是如何實(shí)現(xiàn)的呢？讓我們一起探索。

二、喚端體驗(yàn)

想象一下，你在瀏覽器中打開一個(gè)H5頁面，點(diǎn)擊某個(gè)鏈接或按鈕后，系統(tǒng)會(huì)詢問你是否想要在當(dāng)前已安裝的APP中打開相關(guān)內(nèi)容。例如，在知乎APP中，當(dāng)你嘗試從外部鏈接打開知乎時(shí)，就會(huì)遇到這樣的體驗(yàn)。這就是喚端技術(shù)帶來的便捷體驗(yàn)。

三. 喚端技術(shù)解析

喚端技術(shù)，也稱為deeplink技術(shù)，是實(shí)現(xiàn)H5喚起APP的核心技術(shù)。不同平臺(tái)實(shí)現(xiàn)方式有所不同，常見的技術(shù)包括：

1. URLScheme（通用）

2. UniversalLink（iOS）

3. AppLink、ChromeIntents（Android）

其中，URLScheme是一種通用技術(shù)，兼容性好，由協(xié)議名、路徑、參數(shù)組成。Native開發(fā)同學(xué)提供這個(gè)scheme后，前端同學(xué)就可以用它來打開APP或APP內(nèi)的某個(gè)頁面。

四、URLScheme詳解及實(shí)現(xiàn)方式

URLScheme的組成包括：[scheme:][//authority][path][?query][fragment]。對于常用APP如微信、支付寶、淘寶、QQ、知乎等，都有對應(yīng)的URLScheme。

實(shí)現(xiàn)方式主要有以下幾種：

1. 直接通過window.location.href跳轉(zhuǎn)，例如：window.location.href = 'zhihu://';

2. 通過iframe跳轉(zhuǎn)，例如：創(chuàng)建一個(gè)隱藏的iframe，設(shè)置其src為指定的URLScheme；

3. 使用a標(biāo)簽進(jìn)行跳轉(zhuǎn)；

4. 通過jsbridge來打開，例如：window.miduBridge.call('openAppByRouter', {url: 'zhihu://'})。

五、如何判斷APP喚起是否成功

在實(shí)際應(yīng)用中，我們通常需要判斷用戶是否成功喚起了APP。這可以通過在前端進(jìn)行一些邏輯判斷來實(shí)現(xiàn)。例如，可以嘗試使用iframe方式打開URLScheme，然后通過監(jiān)聽iframe的加載來判斷是否成功喚起APP。如果沒有成功喚起，則可以引導(dǎo)用戶前往對應(yīng)頁面或應(yīng)用商店進(jìn)行下載。這種設(shè)計(jì)能夠提升用戶體驗(yàn)，使得H5與Native之間的交互更加流暢和人性化。

一、頁面可見性變化監(jiān)聽與喚端邏輯

我們可以捕捉當(dāng)前頁面的visibilitychange，借此判斷頁面是否處于可見狀態(tài)。如果頁面被隱藏，我們可以理解為已成功喚起目標(biāo)應(yīng)用；反之，則引導(dǎo)用戶跳轉(zhuǎn)到應(yīng)用商店進(jìn)行下載。這一機(jī)制為我們的前端應(yīng)用提供了一個(gè)與后端交互的重要接口。

二、前端實(shí)現(xiàn)細(xì)節(jié)

假設(shè)我們有一個(gè)名為“前端南玖喚端測試Demo”的應(yīng)用界面，界面上有一個(gè)“打開騰訊微博”的按鈕。當(dāng)用戶點(diǎn)擊這個(gè)按鈕時(shí)，我們會(huì)嘗試喚起已安裝的騰訊微博應(yīng)用。若未能成功喚起，則通過定時(shí)器引導(dǎo)用戶跳轉(zhuǎn)到應(yīng)用商店的下載頁面。這里以淘寶的下載頁作為示例。

三、代碼邏輯解讀

在腳本部分，我們定義了一個(gè)名為“openApp”的模塊，其中包含了監(jiān)聽頁面可見性變化和打開應(yīng)用的邏輯。`watchVisibility`方法用于添加監(jiān)聽器，判斷頁面是否隱藏；`open`方法則嘗試喚起目標(biāo)應(yīng)用，若失敗則通過定時(shí)器跳轉(zhuǎn)至應(yīng)用商店。這里的定時(shí)器設(shè)定為3000毫秒，但實(shí)際操作中需要根據(jù)不同手機(jī)和應(yīng)用的表現(xiàn)進(jìn)行調(diào)整。

四、樣式設(shè)計(jì)

在樣式方面，我們對打開應(yīng)用的標(biāo)題和按鈕進(jìn)行了設(shè)計(jì)。標(biāo)題采用較大的字體，按鈕則設(shè)置了特定的樣式，包括邊距、內(nèi)填充、邊框半徑、背景顏色和文字顏色等，以提升用戶體驗(yàn)。

五、URLScheme方式的適用性及其缺陷

URLScheme是一種兼容性較好的方式，無論是安卓還是iOS都能支持。它通過注冊特定的scheme來打開對應(yīng)的應(yīng)用。這種方式也存在一些明顯的缺點(diǎn)。無法準(zhǔn)確判斷應(yīng)用是否成功喚起，如果用戶未安裝對應(yīng)APP，嘗試跳轉(zhuǎn)后可能無反應(yīng)。會(huì)有彈窗提示是否在對應(yīng)APP中打開，可能導(dǎo)致用戶流失。還存在URLScheme劫持風(fēng)險(xiǎn)，即其他APP也可能注冊相同的scheme，導(dǎo)致流量被劫持。這種方式容易被屏蔽，應(yīng)用可以輕松攔截通過URLScheme發(fā)起的跳轉(zhuǎn)。

六、UniversalLink（iOS）的特點(diǎn)

一、UniversalLink的優(yōu)勢

UniversalLink相較于傳統(tǒng)的URLScheme，其顯著優(yōu)勢在于使用了https協(xié)議。當(dāng)嘗試喚起應(yīng)用失敗時(shí)，用戶會(huì)被直接引導(dǎo)至相關(guān)網(wǎng)頁，而無需額外的判斷過程。這一改進(jìn)不僅提高了用戶體驗(yàn)，還解決了URLScheme在判斷喚端成功與否時(shí)可能出現(xiàn)的問題。更重要的是，UniversalLink實(shí)現(xiàn)了無縫跳轉(zhuǎn)，避免了彈出窗口的干擾，大大提高了喚端的效率。

二、UniversalLink的實(shí)現(xiàn)原理

UniversalLink的實(shí)現(xiàn)相對簡單。需要在APP中注冊要支持的域名。接著，在域名的根目錄下配置一個(gè)apple-app-site-association文件。前端開發(fā)人員無需關(guān)注具體的配置細(xì)節(jié)，只需與iOS開發(fā)團(tuán)隊(duì)確認(rèn)好需要支持的域名即可。

三、UniversalLink的適用性分析

UniversalLink相較于URLScheme，在用戶體驗(yàn)上有了顯著的提升。它不僅能避免彈窗提示是否打開，減少了用戶流失，還解決了URLScheme無法準(zhǔn)確判斷喚端失敗的問題。它不受用戶是否安裝對應(yīng)APP的影響，點(diǎn)擊鏈接即可直接打開相關(guān)頁面。但需要注意的是，UniversalLink只能在iOS系統(tǒng)上使用，且只能由用戶主動(dòng)觸發(fā)。

四、AppLink與ChromeIntents（Android）

AppLink是Android系統(tǒng)在2015年的Google I/O大會(huì)上宣布的一項(xiàng)功能。它允許用戶在點(diǎn)擊web鏈接時(shí)，直接打開已安裝并經(jīng)過驗(yàn)證的APP的特定頁面。AppLink在國內(nèi)的支持并不廣泛，部分安卓瀏覽器并不支持這一功能。ChromeIntents則是Android設(shè)備上Chrome瀏覽器的URI方案的深層鏈接替代品。如果APP已安裝，它會(huì)通過配置的URISCHEME打開APP；若未安裝，則會(huì)跳轉(zhuǎn)至指定的fallbackurl或應(yīng)用市場。

五、方案對比

在對比URLScheme、UniversalLink、AppLink等方案時(shí)，我們可以發(fā)現(xiàn)各自的優(yōu)缺點(diǎn)。URLScheme雖然兼容性最高，但使用體驗(yàn)較差，當(dāng)目標(biāo)APP未安裝或存在多個(gè)相同scheme時(shí)，會(huì)出現(xiàn)問題。而UniversalLink在iOS系統(tǒng)上提供了更好的用戶體驗(yàn)。AppLink和ChromeIntents則為Android設(shè)備提供了類似的深層鏈接功能。綜合考慮各種因素，選擇最適合的方案將取決于具體的應(yīng)用場景和用戶群體。

以上內(nèi)容在保留了原文核心概念和原理的基礎(chǔ)上，進(jìn)行了更加生動(dòng)、豐富的表述，希望能夠幫助讀者更好地理解這些概念和應(yīng)用場景。UniversalLink與Applink的技術(shù)解析及對比

一、UniversalLink技術(shù)特點(diǎn)

已經(jīng)安裝APP的用戶，點(diǎn)擊鏈接會(huì)直接喚起該APP；若APP尚未安裝，用戶則會(huì)被引導(dǎo)至對應(yīng)的weblink。UniversalLink的技術(shù)核心在于，它能夠從服務(wù)器查詢并確定應(yīng)打開的APP，因此不存在沖突問題。它還能支持從其他app中的UIWebView跳轉(zhuǎn)到目標(biāo)app，提供了無縫的導(dǎo)航體驗(yàn)。

UniversalLink有一個(gè)用戶選擇記憶功能，一旦用戶選擇了通過Safari打開網(wǎng)站，iOS系統(tǒng)會(huì)記住這一選擇。之后的操作中，系統(tǒng)默認(rèn)延續(xù)這一選擇，除非用戶從webpage上通過點(diǎn)擊SmartAppBanner上的OPEN按鈕進(jìn)行更改。

二、Applink技術(shù)特點(diǎn)

Applink與UniversalLink在部分優(yōu)點(diǎn)上相似，但在國內(nèi)的支持情況相對較差。在某些瀏覽器或手機(jī)ROM中，Applink可能無法直接鏈接至APP，而是在瀏覽器中打開對應(yīng)鏈接。當(dāng)用戶被詢問是否要用APP打開鏈接時(shí)，如果選擇了“取消”并勾選了“記住選擇”，那么下次再嘗試鏈接到APP時(shí)可能不會(huì)有任何反應(yīng)。

三、h5開發(fā)app的相關(guān)探討

1. h5開發(fā)app的模式

現(xiàn)在用h5開發(fā)app主要有三種模式：webapp、混合式app和RNapp。webapp主要是將網(wǎng)頁版進(jìn)行打包，不能調(diào)用原生功能；混合式app能調(diào)用一些原生功能，體驗(yàn)較webapp有所提升；而RNapp則能使用大部分原生功能，與原生app幾乎沒有區(qū)別。

2. h5做app與原生app的對比

h5做的app與原生app在性能上存在顯著區(qū)別。h5的性能較差，適合用于經(jīng)常需要改版的模塊，如論壇、咨詢等。對于這類應(yīng)用，h5開發(fā)能方便地進(jìn)行熱更新。在APP需要頻繁改版或需要跨平臺(tái)（安卓與iOS）時(shí)，使用h5開發(fā)的部分模塊能更容易地實(shí)現(xiàn)共用，簡化開發(fā)流程。但需要注意的是，如果整個(gè)APP都用h5來做，可能會(huì)面臨性能問題，甚至有送審被拒的風(fēng)險(xiǎn)。

推薦閱讀

性能優(yōu)化之html、css、js三者的加載順序

Vue異步更新機(jī)制以及$nextTick原理

超全面總結(jié)Vue面試知識點(diǎn)，助力求職季

前端常見的排序算法

CSS性能優(yōu)化的幾個(gè)技巧

前端常見的安全問題及防范措施

大廠前端監(jiān)控中使用GIF埋點(diǎn)的原因解析

前端開發(fā)人員必須了解的布局概念（如KFC、BFC、IFC等）

更多技術(shù)干貨，歡迎關(guān)注公眾號「前端南玖」，并加入前端交流群一起學(xué)習(xí)交流。

結(jié)語

以上是對UniversalLink、Applink以及h5開發(fā)app的相關(guān)技術(shù)與區(qū)別的詳細(xì)解析。隨著移動(dòng)技術(shù)的發(fā)展，這些技術(shù)將持續(xù)演進(jìn)并豐富我們的移動(dòng)應(yīng)用體驗(yàn)。期待下一次的技術(shù)分享，讓我們繼續(xù)探討前端技術(shù)的深度與廣度。我是南玖，我們下期再見！

原文首發(fā)地址：[鏈接地址]，歡迎大家關(guān)注與交流。