H5喚起APP方法小結

背景

最近在做DeepLink的需求，DeepLink不算是一個新話題了，但是卻一直都沒間斷過討論。開始接觸之前了解並不是很多，但是接觸下來發現也就那幾種實現方式。

什麼是DeepLink呢？其實就是H5頁面提供一個按鈕，例如：「打開APP」或者「下載APP」等。在H5頁面中點擊這個按鈕，如果安裝了目標APP直接通過鏈接喚起，否則跳轉到下載頁面去下載APP。這種通過H5喚起APP的鏈接的方式就是DeepLink。

看起來很簡單的一個業務流程，但是實現起來還是有很多坑的，主要是因為設備、設備版本、瀏覽器等碎片差異嚴重，導致很多兼容需要處理。

最終實現的效果

用戶點擊H5頁面的打開App或者下載按鈕（這個按鈕可能在一個下載入口頁、各種分享頁面的吸頂或吸底的banner），如果用戶已經安裝了App，則根據業務跳轉到相應的Native頁面；如果用戶沒有安裝該應用，則跳到AppStore或者應用市場去下載App。

圖：各種實現方式

已安裝APP時的實現方式一、iOS中的實現

iOS中在IOS9.0前後是一個分界點，因為從iOS9.0之後蘋果開放universal link的方式代替schema的方式來喚起APP。下面我們就分別從iOS9.0前後分別來說：

1、iOS9.0之前

2、iOS9.0+

iOS9.0+後的版本的蘋果設備，開始支持universal link的實現方式，當然schema的方式也是被支持的，只不過在遇到未安裝的時候會彈出一個醜陋的錯誤提示框，即使安裝了也還是會彈窗詢問用戶是不是要打開APP，用戶體驗不好。

universal link的實現方式在網上有很多很詳盡的說明和示例，此處不做詳細說明。

當然，universal link的實現方式需要客戶端和服務端的配合。

對於跳轉方式iOS9.0+後選用a鏈接的方式最靠譜，iframe的方式已經無法使用了。a鏈接的示例代碼如下所示：

二、Android中的實現

安卓中的實現方式比起蘋果設備來看要更加複雜一點，因為有一些過長的瀏覽器總是奇葩的存在（如：UC）。但是在安卓中目前schema是實現的主要方式，跳轉方式通過測試，也是iframe的方式最靠譜。實現方式如上面iframe實現方式所示。

未安裝的實現方式

因為在H5中是無法獲取到設備中app的安裝情況，無法判斷是否安裝，只能採用嘗試打開的方式，如果已經安裝則直接打開，如果未安裝，通過時間差的方式來判斷做出跳轉到下載頁面的操作。

其實，這個過程中還是存在一些坑的，比如跳轉到app了，返回H5頁面後還是會跳轉到下載頁面，因為瀏覽器差異兼容情況不一，始終沒有完美的方案，只能通過如下方式盡量來兼容。

實現代碼如下所示：

通過上面的實現方式可以兼容大部分，但是有些還是有問題，iOS下的safari就有問題，可以再加上如下代碼，safari問題就可以解決了，代碼如下：

微信、QQ等的實現方式

目前所有的直接再微信裡面跳轉APP的方式都已經行不通了，只有兩種處理方式：1、提示在瀏覽器打開 2、通過應用寶來打開。

QQ、微博等，都是差不多的，具體沒有一一測試，但是騰訊系的都可以通過應用寶的方式解決，其他的就提示瀏覽器打開吧。

基本H5喚起APP的大概的實現方式已經做了簡單的介紹。

最後再吐槽一個莫名其妙的坑，就是ios中在safari中使用schema打開應用，應用沒有安裝的時候，會跳轉App Store，如果第一次提示打開App Store時，選擇「取消」，那麼再點擊的時候是無法跳轉到App Store的，具體不知道蘋果是怎麼想的。

每天進步一點點系列第004篇

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！