1. 需求
前段時間開發(fā)項目，遇到了一個需求，簡單來說，就是我們H5的頁面有一個“在App中打開”的按鈕，用戶點擊后，如果用戶已經(jīng)安裝app，則直接打開app，如果用戶沒有安裝app，那就跳轉(zhuǎn)到下載app的頁面
首先，在我的認知中，H5應(yīng)該是沒有能力檢測到某一款app是否有安裝的（如果有小伙伴知道如何檢測，歡迎評論區(qū)告訴我，感謝！），所以我們需要一些技巧來完成判斷app是否安裝這一過程。
之后的步驟以安卓手機為例子介紹，目前ios9版本之后的系統(tǒng)不需要我們H5做這些判斷app是否安裝的流程（ios9之后可以通過提供一個通用鏈接（Universal link），做到?jīng)]有安裝app提示打開蘋果應(yīng)用商城,安裝了app則直接跳轉(zhuǎn)打開）
2. 關(guān)于scheme協(xié)議
scheme協(xié)議是一種頁面內(nèi)跳轉(zhuǎn)協(xié)議，我們可以通過定制scheme協(xié)議，跳轉(zhuǎn)到app中的想要跳轉(zhuǎn)的各個頁面。scheme協(xié)議是通過url的形式進行跳轉(zhuǎn)的，所以我們H5也可以通過這個url去跳轉(zhuǎn)到app內(nèi)指定頁面，這就是H5打開app的原理。
scheme的url格式類似： [scheme]://[host]/[path]?[query]
3. H5實現(xiàn)在App中打開的兩種方法
3.1 單純使用定時器判斷
這種的方法的思路是，首先把我們要跳轉(zhuǎn)的地址設(shè)置為與原生App同學(xué)一起定義好的scheme的url，之后，設(shè)置一個定時器，定時器里執(zhí)行的邏輯是跳轉(zhuǎn)到下載app頁面，這樣，如果用戶手機沒有安裝app，就會在一段時間后跳轉(zhuǎn)到下載頁面。
核心代碼如下：（可以使用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)
}
存在的問題
上述實現(xiàn)方案的問題是，即使成功跳轉(zhuǎn)到App，原先的H5頁面也會在定時時間后，跳轉(zhuǎn)到下載頁面，這樣體驗很不好
3.2 使用window的hidden屬性判斷
這個方法的思路是，如果成功喚起了app，我們的H5頁面被置于后臺，window.hidden屬性會變?yōu)閠rue,可以通過這個屬性變化來判斷app有沒有打開，沒打開就跳轉(zhuǎn)到下載頁面，當(dāng)然這里也用到定時器
核心代碼如下：
function checkOutApp() {
const schemeUrl = 'xxx'
const downloadUrl = 'XXX'
const wait = 1000
// 是否進入后臺
const hidden = false
location = schemeUrl
// 如果一定時間內(nèi)，頁面沒有隱藏，則跳轉(zhuǎn)到下載頁
setTimeout(() => {
if (!hidden) {
location = downloadUrl
}
}, wait)
// 頁面可見性變化事件
document.addEventListener("visibilitychange", function(){
if (document.hidden) {
hidden = true
}
});
}
存在的問題
目前一些安卓瀏覽器，在app存在時，會首先跳出一個確認框，詢問用戶是否打開app，只有用戶同意時，才會跳轉(zhuǎn)app，如果用戶始終沒有點擊確認，最后還是會跳到下載頁面，體驗不好
4. 一些思考
鑒于上面說到的一些問題，個人覺得可以在交互中增加一個“去下載頁面”的交互，如果用戶沒有安裝app，一定時間后，首先提示用戶“是否沒有安裝app，點擊去下載”類似的按鈕，用戶點擊跳轉(zhuǎn)到下載頁面，這樣會不會更好呢。
到此這篇關(guān)于淺談Html5頁面打開app的一些思考的文章就介紹到這了,更多相關(guān)Html5打開app內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
