HTML5 call native app
背景
為了提升app的曝光和app的用戶新增泛鸟，添加H5分享頁的應(yīng)用場景是必不可少的，但是各種平臺環(huán)境不一础锐，要如何兼容和策略處理拘荡。下面會一一說明
1. 頁面調(diào)起原生app
- 調(diào)起原生 app胖翰，然后下載APP
- 不同平臺的兼容和策略處理接剩，比如微信,微博，QQ萨咳，QQ空間懊缺，瀏覽器
2. HTML5頁面調(diào)起原生APP
android、ios調(diào)起的方式
Schame + Android Itent
Schema ＋ Universal links（IOS9+）
3.調(diào)用的方式
- <a href="ftnn:login">拉起app</a>
- <iframe src="ftnn:login"></iframe>
- window.location.href= "ftnn:login";
- 說明：由于無法確定是否安裝了客戶端培他，因此通過window.location = schema的方式可能導(dǎo)致瀏覽器跳轉(zhuǎn)到錯誤頁鹃两；所以通過iframe.src或a.href載入schema是目前比較常見的方法；
- 代碼實現(xiàn)
export const locationCallAPP = (url, downloadUrl, ios9Type) => {
location.href = url
var timeout
var t = Date.now()
var interval = ios9Type ? 2500 : 1000
timeout && clearTimeout(timeout)
timeout = setTimeout(function() {
if (Date.now() - t < interval + 1000) {
location.href = downloadUrl
}
}, interval)
}
export const iframeCallAPP = (url, downloadUrl, ios9Type) => {
console.log('[iframeCallAPP1]'+url)
var timeout
var t = Date.now()
var interval = ios9Type ? 2500 : 2000
timeout && clearTimeout(timeout)
timeout = setTimeout(function () {
if (Date.now() - t < interval+1000) {
console.log('[iframeCallAPP2]'+downloadUrl)
location.href = downloadUrl
}
}, interval)
if (ios9Type) {
location.href = url
}
var docNode = document
var iframe = docNode.createElement('iframe')
iframe.setAttribute('src', url)
// iframe.setAttribute('target', '_self');
iframe.setAttribute('style', 'display:none')
docNode.body.appendChild(iframe)
setTimeout(function () {
docNode.body.removeChild(iframe)
}, 200)
}
4. 特殊場景說明
微信
- 應(yīng)用寶deeplink
微博
- 中間提示頁
- 類似于“請在瀏覽器打開”
5. 遇到的問題：不知道手機有沒有安裝app
嘗試調(diào)起APP舀凛，如果不能俊扳，使用setTimeout進行下載，所以需要進行處理猛遍，如下圖：
$(document).on('visibilitychange webkitvisibilitychange', function() {
var tag = document.hidden || document.webkitHidden;
if (tag) {
clearTimeout(timer);
}
})
$(window).on('pagehide', function() {
clearTimeout(timer);
})
當手機安裝了App馋记，能調(diào)起app后就不進行下載
沒有安裝App,過了一段時間，進行下載
6.H5 page call native
H5 page call native這個庫兼容了常見的平臺調(diào)起app懊烤。
