H5頁面打開app的一些思考

1. 需求

前段時間開發項目，遇到了一個需求，簡單來講，就是咱們H5的頁面有一個「在App中打開」的按鈕，用戶點擊後，若是用戶已經安裝app，則直接打開app，若是用戶沒有安裝app，那就跳轉到下載app的頁面

首先，在個人認知中，H5應該是沒有能力檢測到某一款app是否有安裝的（若是有小夥伴知道如何檢測，歡迎評論區告訴我，感謝！），因此咱們須要一些技巧來完成判斷app是否安裝這一過程。

以後的步驟以安卓手機爲例子介紹，目前ios9版本以後的系統不須要咱們H5作這些判斷app是否安裝的流程（ios9以後能夠經過提供一個通用連接（Universal link），作到沒有安裝app提示打開蘋果應用商城,安裝了app則直接跳轉打開）

2. 關於scheme協議

scheme協議是一種頁面內跳轉協議，咱們能夠經過定製scheme協議，跳轉到app中的想要跳轉的各個頁面。scheme協議是經過url的形式進行跳轉的，因此咱們H5也能夠經過這個url去跳轉到app內指定頁面，這就是H5打開app的原理。

scheme的url格式相似：[scheme]://[host]/[path]?[query]

3. H5實如今App中打開的兩種方法

3.1 單純使用定時器判斷

這種的方法的思路是，首先把咱們要跳轉的地址設置爲與原生App同窗一塊兒定義好的scheme的url，以後，設置一個定時器，定時器裏執行的邏輯是跳轉到下載app頁面，這樣，若是用戶手機沒有安裝app，就會在一段時間後跳轉到下載頁面。

核心代碼以下：（可使用iframe完成跳轉，但須要考慮iframe是否在ios等設備中被容許）

const schemeUrl = 'xxx'
const downloadUrl = 'XXX'
const wait = 500
try {
    location = schemeUrl
    setTimeout(() => {
        location = downloadUrl
    }, wait)
} catch (e) {
    console.error(e)
}
複製代碼

存在的問題

上述實現方案的問題是，即便成功跳轉到App，原先的H5頁面也會在定時時間後，跳轉到下載頁面，這樣體驗很很差

3.2 使用window的hidden屬性判斷

這個方法的思路是，若是成功喚起了app，咱們的H5頁面被置於後臺，window.hidden屬性會變爲true,能夠經過這個屬性變化來判斷app有沒有打開，沒打開就跳轉到下載頁面，固然這裏也用到定時器

核心代碼以下：

function checkOutApp() {
    const schemeUrl = 'xxx'
    const downloadUrl = 'XXX'
    const wait = 1000
    // 是否進入後臺
    const hidden = false
    location = schemeUrl
    // 若是必定時間內，頁面沒有隱藏，則跳轉到下載頁
    setTimeout(() => {
        if (!hidden) {
            location = downloadUrl
        }
    }, wait)
    // 頁面可見性變化事件
    document.addEventListener("visibilitychange", function(){
        if (document.hidden) {
            hidden = true
        }
    });
}
複製代碼

存在的問題

目前一些安卓瀏覽器，在app存在時，會首先跳出一個確認框，詢問用戶是否打開app，只有用戶贊成時，纔會跳轉app，若是用戶始終沒有點擊確認，最後仍是會跳到下載頁面，體驗很差

4. 一些思考

鑑於上面說到的一些問題，我的以爲能夠在交互中增長一個「去下載頁面」的交互，若是用戶沒有安裝app，必定時間後，首先提示用戶「是否沒有安裝app，點擊去下載」相似的按鈕，用戶點擊跳轉到下載頁面，這樣會不會更好呢。