H5頁面打開app的分析是什么樣的

1. 需求

前段時間開發(fā)項目，遇到了一個需求，簡單來說，就是我們 H5 的頁面有一個“在App中打開”的按鈕，用戶點擊后，如果用戶已經安裝app，則直接打開app，如果用戶沒有安裝app，那就跳轉到下載app的頁面

首先，在我的認知中，H5 應該是沒有能力檢測到某一款 app 是否有安裝的

之后的步驟以安卓手機為例子介紹，目前ios9版本之后的系統(tǒng)不需要我們H5做這些判斷app是否安裝的流程（ios9 之后可以通過提供一個通用鏈接（Universal link），做到沒有安裝 app 提示打開蘋果應用商城,安裝了 app 則直接跳轉打開）

2. 關于 scheme 協(xié)議

scheme 協(xié)議是一種頁面內跳轉協(xié)議，我們可以通過定制 scheme 協(xié)議，跳轉到 app 中的想要跳轉的各個頁面。scheme協(xié)議是通過url的形式進行跳轉的，所以我們H5也可以通過這個url去跳轉到app內指定頁面，這就是 H5 打開app的原理。

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

3. H5 實現(xiàn)在 App 中打開的兩種方法

3.1 單純使用定時器判斷

這種的方法的思路是，首先把我們要跳轉的地址設置為與原生App同學一起定義好的scheme的url，之后，設置一個定時器，定時器里執(zhí)行的邏輯是跳轉到下載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)
}

存在的問題

上述實現(xiàn)方案的問題是，即使成功跳轉到App，原先的H5頁面也會在定時時間后，跳轉到下載頁面，這樣體驗很不好

3.2 使用 window 的 hidden 屬性判斷

這個方法的思路是，如果成功喚起了app，我們的 H5 頁面被置于后臺，window.hidden屬性會變?yōu)?code>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，如果用戶始終沒有點擊確認，最后還是會跳到下載頁面，體驗不好。