H5頁檢測手機是否安裝app 相關流程

近期公司需要針對分享流程進行優化，其中一點就是前端H5檢測是否安裝應用，來進行不同的判斷（下載或直接跳轉到app中）。原理很簡單：建立一個iframe去開啟uri。如果開啟app成功網頁進入後臺，再切換回來時間會超過2.5s。利用時間去檢測。下面來看具體實現過程：

你可能會遇到的問題

• 什麼是uri，獲取uri需要哪些幫助？
• 安卓中應用切換到後臺， 計時器仍會不斷執行有什麼解決方法？
• 微信中不支援第三方uri,下載應用。怎麼解決來完成跳轉到自身app。

都會在文中找到答案。

uri獲取

這裡的uri,指得就是通過 Url scheme 來實現的H5與安卓、蘋果應用之間的跳轉連結。

我們需要找到客戶端的同事，來獲取如下格式的連結。

這裡給大家簡單解釋下url scheme。

url 就是我們平常理解的連結。
scheme 是指url連結中的最初位置，就是上邊連結中 ‘xx’的位置。
詳細介紹可以看這裡：使用url scheme詳解

用這個連結我們可以跳轉到 應用中的某個頁面,並可以攜帶一定的引數。這個是我們實現這個功能的前提喲。

具體實現

第一步：通過iframe開啟App

Android平臺則各個app廠商差異很大，比如Chrome從25及以後就不再支援通過js觸發（非使用者點選），所以這裡使用iframe src地址等來觸發scheme。

第二步： 判斷是否安裝某應用

原理：若通過url scheme 開啟app成功，那麼當前h5會進入後臺，通過計時器會有明顯延遲。利用時間來判斷。

注意：

• 由於安卓手機,頁面進入後臺，定時器setTimeout仍會不斷執行，所以這裡使用setInterval,較小間隔時間重複多次。來根據累計時間判斷。
• cb為回撥函式，根據返回0 or 1來判斷是否安裝。
• document.hidden對大於4.4webview支援很好，為頁面可見性api。

第三步：微信中實現開啟or下載應用效果

這裡使用的是應用寶微連結實現。

注意點：

• 微連結是應用寶提供的，可以在後臺獲取。
• 使用微連結必須做encodeURIComponent轉義。
• 連結地址在微連結後拼接一個android_schema引數加你的uri。

完整函式

其他

函式中呼叫的BrowserInfo是一個簡單的客戶端檢測。具體如下：

回撥函式的使用

頁面中可以通過傳遞迴調函式，來獲取返回值；並通過是否傳這個引數來做進入頁面檢測。