1. 需求

前段時(shí)間開(kāi)發(fā)項(xiàng)目，遇到了一個(gè)需求，簡(jiǎn)單來(lái)說(shuō)，就是我們 H5 的頁(yè)面有一個(gè)“在App中打開(kāi)”的按鈕，用戶點(diǎn)擊后，如果用戶已經(jīng)安裝app，則直接打開(kāi)app，如果用戶沒(méi)有安裝app，那就跳轉(zhuǎn)到下載app的頁(yè)面

首先，在我的認(rèn)知中，H5 應(yīng)該是沒(méi)有能力檢測(cè)到某一款 app 是否有安裝的

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

2. 關(guān)于 scheme 協(xié)議

scheme 協(xié)議是一種頁(yè)面內(nèi)跳轉(zhuǎn)協(xié)議，我們可以通過(guò)定制 scheme 協(xié)議，跳轉(zhuǎn)到 app 中的想要跳轉(zhuǎn)的各個(gè)頁(yè)面。scheme協(xié)議是通過(guò)url的形式進(jìn)行跳轉(zhuǎn)的，所以我們H5也可以通過(guò)這個(gè)url去跳轉(zhuǎn)到app內(nèi)指定頁(yè)面，這就是 H5 打開(kāi)app的原理。

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

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

3.1 單純使用定時(shí)器判斷

這種的方法的思路是，首先把我們要跳轉(zhuǎn)的地址設(shè)置為與原生App同學(xué)一起定義好的scheme的url，之后，設(shè)置一個(gè)定時(shí)器，定時(shí)器里執(zhí)行的邏輯是跳轉(zhuǎn)到下載app頁(yè)面，這樣，如果用戶手機(jī)沒(méi)有安裝app，就會(huì)在一段時(shí)間后跳轉(zhuǎn)到下載頁(yè)面。

核心代碼如下：（可以使用iframe完成跳轉(zhuǎn)，但需要考慮iframe是否在ios等設(shè)備中被允許）

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

存在的問(wèn)題

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

3.2 使用 window 的 hidden 屬性判斷

這個(gè)方法的思路是，如果成功喚起了app，我們的 H5 頁(yè)面被置于后臺(tái)，window.hidden屬性會(huì)變?yōu)?code>true,可以通過(guò)這個(gè)屬性變化來(lái)判斷app有沒(méi)有打開(kāi)，沒(méi)打開(kāi)就跳轉(zhuǎn)到下載頁(yè)面，當(dāng)然這里也用到定時(shí)器

核心代碼如下：

function checkOutApp() {
   const schemeUrl = 'xxx'
   const downloadUrl = 'XXX'
   const wait = 1000
   // 是否進(jìn)入后臺(tái)
   const hidden = false
   location = schemeUrl
   // 如果一定時(shí)間內(nèi)，頁(yè)面沒(méi)有隱藏，則跳轉(zhuǎn)到下載頁(yè)
   setTimeout(() => {
       if (!hidden) {
           location = downloadUrl
       }
   }, wait)
   // 頁(yè)面可見(jiàn)性變化事件
   document.addEventListener("visibilitychange", function(){
       if (document.hidden) {
           hidden = true
       }
   });
}

目前一些安卓瀏覽器，在 app 存在時(shí)，會(huì)首先跳出一個(gè)確認(rèn)框，詢問(wèn)用戶是否打開(kāi) app，只有用戶同意時(shí)，才會(huì)跳轉(zhuǎn) app，如果用戶始終沒(méi)有點(diǎn)擊確認(rèn)，最后還是會(huì)跳到下載頁(yè)面，體驗(yàn)不好。