最近遇到一個(gè)需求,需要在從APP分享出去的H5頁(yè)面中,帶有一個(gè)立即打開的按鈕,如果本地安裝了app,那么就直接喚起本地的app,如果沒有安裝,則跳轉(zhuǎn)到下載。這是一個(gè)很正常的推廣和導(dǎo)流量的策略。前端小白從來(lái)沒有做過(guò)這個(gè)需求,只能開始哼唧哼唧地開啟自己的度娘和谷歌之旅。
經(jīng)過(guò)一段時(shí)間的探索之旅發(fā)現(xiàn)里面的學(xué)問很多,要做一個(gè)兼容性很好的方案,就需要考慮各種情況,在不同的情況適配不同的方案,比方說(shuō)用戶是在手機(jī)瀏覽器打開還是微信中打開,或者是在pc中打開,universal騰訊應(yīng)用寶直接打開 APP link是否被關(guān)閉等,這就使代碼實(shí)現(xiàn)變得復(fù)雜,且容易出錯(cuò),且還有安卓平臺(tái)機(jī)型眾多、瀏覽器眾多等導(dǎo)致的兼容問題。由于時(shí)間有限,這次主要先介紹一個(gè)比較普遍的使用URL Scheme進(jìn)行App跳轉(zhuǎn)的方法。
URL Scheme —— 喚端媒介
來(lái)源
一般來(lái)說(shuō),我們使用的智能設(shè)備上有許多我們的個(gè)人信息。比如:聯(lián)系方式、銀行卡/信用卡信息、支付寶/Paypal/各大商城的賬戶密碼、照片甚至行程與位置信息等。
如果說(shuō),你設(shè)備上的每一個(gè)應(yīng)用,不管是官方的還是你從任何商城安裝的應(yīng)用都可以隨意地獲取這些信息,那么你輕則收到騷擾信息和郵件、重則后果不堪設(shè)想。如何讓這些信息不被其它應(yīng)用隨意使用,或者說(shuō),如何讓這些信息僅在設(shè)備所有者本人知情并允許的情況下被使用,是所有智能設(shè)備與操作系統(tǒng)所要在乎的核心安全問題。針對(duì)這個(gè)問題,蘋果使用了名為「沙盒」的機(jī)制:應(yīng)用只能訪問它聲明可能訪問的資源。一切提交到 App Store 的應(yīng)用都必須遵守這個(gè)機(jī)制。
在安全方面沙盒是個(gè)很好的解決辦法,但是有些矯枉過(guò)正。敏感的個(gè)人信息我們不愿意透露,卻不代表所有的信息我們都不想與其它應(yīng)用共享。因此,我們急需要一個(gè)輔助工具來(lái)幫助我們實(shí)現(xiàn)應(yīng)用通信, URL Schemes 就是這個(gè)工具。
URL Schemes是什么
[scheme]://[host]/[path]?[query]
我們拿 https://www.baidu.com 來(lái)舉例,scheme 自然就是 https 了,后面拼接的是傳遞的參數(shù)。URL Schemes 沒有特別嚴(yán)格的規(guī)范,所以后面參數(shù)的具體定義是app開發(fā)者去自定義。
就像給服務(wù)器資源分配一個(gè) URL,以便我們?nèi)ピL問它一樣,我們同樣也可以給手機(jī)APP分配一個(gè)特殊格式的 URL,用來(lái)訪問這個(gè)APP或者這個(gè)APP中的某個(gè)功能(來(lái)實(shí)現(xiàn)通信)。APP得有一個(gè)標(biāo)識(shí),好讓我們可以定位到它,它就是 URL 的 Scheme 部分。
但是,兩者還有幾個(gè)重要的區(qū)別:
前面普及了一下URL Schemes的相關(guān)知識(shí),作為個(gè)前端開發(fā)者,就不去深究其中的原理,都交給app開發(fā)者吧。接下來(lái)開始我們的正題。首先當(dāng)然是要客戶端提供App的Url Schemes。
用瀏覽器去打開scheme
在瀏覽器中打開 scheme 就像打開一個(gè)不同的http地址一樣。可以在一個(gè) a 標(biāo)簽中打開。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打開App</title> </head> <body> <a href="luwei://" id="open">打開應(yīng)用</a> </body> </html>
點(diǎn)擊上面的H5頁(yè)面中的鏈接將會(huì)嘗試喚醒對(duì)應(yīng)app,在一些瀏覽器中,可能會(huì)彈出一個(gè)提示框,詢問用戶是否允許打開應(yīng)用。
如果打開的 scheme 在本地沒有對(duì)應(yīng)的 app,則點(diǎn)擊不會(huì)反應(yīng)。
當(dāng)然還可以使用 JavaScript 代碼打開,只需要添加相應(yīng)的事件觸發(fā)和處理即可。
在JavaScript代碼中打開連接有以下幾種方式:
// 打開url的方式 var urlOpen = { // 在ios支持不好 'iframe' : function(url) { var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = url; document.body.appendChild(iframe); }, 'location' : function(url) { window.location.href = url; }, 'href' : function(url) { var a = document.createElement('a'); a.style.display = 'none'; a.href = url; document.body.appendChild(a); a.click(); }, 'script' : function(url) { var script = document.createElement('script'); script.setAttribute('type', 'test/javascript'); script.innerHTML = '(function(){' + 'var a = document.createElement("a");' + 'a.style.display = "none";' + 'a.href = "' + url.replace(/"/g, '\\"') + '";' + 'document.body.appendChild(a);' + 'a.click();' + '})()'; document.body.appendChild(script); }, 'open' : function(url) { window.open(url); } };
以上方法是只是解決了在已安裝App設(shè)備喚醒App的功能,并不能判斷是否已安裝App,沒有安裝即跳轉(zhuǎn)至下載鏈接。
瀏覽器判斷是否安裝應(yīng)用
在瀏覽器實(shí)際上是沒有能力判斷手機(jī)里是否安裝了某個(gè)App的,所以只能夠采取一種投機(jī)取巧的方式。
在JavaScript中判斷頁(yè)面是否進(jìn)入后臺(tái)來(lái)判斷打開成功。Html5提供了下列事件和屬性可以利用:
上面這些事件或者屬性并不是所有瀏覽器都支持。下面是一個(gè)給出為id為openBtn 的按鈕添加打開scheme或者下載事件的例子,但對(duì)于Android 4.4版本以下則不支持
var downloader, scheme = 'luwei://', // 需要打開的app scheme 地址 iosDownload='http://xxx.com'; // 如果打開scheme失效的app下載地址 andDownload = 'http://xxx.com'; var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 // 給 id 為 openBtn 的按鈕添加點(diǎn)擊事件處理函數(shù) document.getElementById('openBtn').onclick = function () { window.location.href = scheme; // 嘗試打開 scheme // 設(shè)置3秒的定時(shí)下載任務(wù),3秒之后下載app downloader = setTimeout(function(){ if(isAndroid) { window.location.href = andDownload; } if(isIOS) { window.location.href = iosDownload; } }, 3000); }; document.addEventListener('visibilitychange webkitvisibilitychange', function () { // 如果頁(yè)面隱藏,推測(cè)打開scheme成功,清除下載任務(wù) if (document.hidden || document.webkitHidden) { clearTimeout(downloader); } }); window.addEventListener('pagehide', function() { clearTimeout(downloader); });
沒有完美的方案
微信中無(wú)法喚醒App,需要“用瀏覽器打開”是因?yàn)槲⑿艑?duì)所有的分享鏈接接做了scheme屏蔽,也就是說(shuō)分享連接中所有對(duì)于scheme的調(diào)用都被微信封掉了。有些app是能在微信打開是因?yàn)槲⑿庞幸粋€(gè)白名單(有關(guān)系就是不錯(cuò)),對(duì)于在白名單中的分享鏈接是不會(huì)屏蔽掉scheme調(diào)用的。
本文只是小小地拋個(gè)磚,介紹了一種比較常用簡(jiǎn)單的方法去喚醒a(bǔ)pp,該方案兼容性不是特別好吧。要做出一個(gè)比較完美的方案還需要細(xì)細(xì)去鉆研,還需要不停地去搬磚~不說(shuō)了,搬磚去了~
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
標(biāo)簽:金昌 赤峰 中山 綏化 聊城 盤錦 阿壩 萍鄉(xiāng)
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《html5喚醒APP小記》,本文關(guān)鍵詞 html5,喚醒,APP,小記,html5,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。