溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“html5喚醒APP案例分析”，在日常操作中，相信很多人在html5喚醒APP案例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html5喚醒APP案例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
URL Scheme —— 喚端媒介
來源
一般來說，我們使用的智能設備上有許多我們的個人信息。比如：聯系方式、銀行卡/信用卡信息、支付寶/Paypal/各大商城的賬戶密碼、照片甚至行程與位置信息等。
如果說，你設備上的每一個應用，不管是官方的還是你從任何商城安裝的應用都可以隨意地獲取這些信息，那么你輕則收到騷擾信息和郵件、重則后果不堪設想。如何讓這些信息不被其它應用隨意使用，或者說，如何讓這些信息僅在設備所有者本人知情并允許的情況下被使用，是所有智能設備與操作系統所要在乎的核心安全問題。針對這個問題，蘋果使用了名為「沙盒」的機制：應用只能訪問它聲明可能訪問的資源。一切提交到 App Store 的應用都必須遵守這個機制。
在安全方面沙盒是個很好的解決辦法，但是有些矯枉過正。敏感的個人信息我們不愿意透露，卻不代表所有的信息我們都不想與其它應用共享。因此，我們急需要一個輔助工具來幫助我們實現應用通信， URL Schemes 就是這個工具。
URL Schemes是什么
我們拿 https://www.baidu.com 來舉例，scheme 自然就是 https 了，后面拼接的是傳遞的參數。URL Schemes 沒有特別嚴格的規范，所以后面參數的具體定義是app開發者去自定義。
就像給服務器資源分配一個 URL，以便我們去訪問它一樣，我們同樣也可以給手機APP分配一個特殊格式的 URL，用來訪問這個APP或者這個APP中的某個功能(來實現通信)。APP得有一個標識，好讓我們可以定位到它，它就是 URL 的 Scheme 部分。
但是，兩者還有幾個重要的區別：
所有網頁都一定有網址，不管是首頁還是子頁。但未必所有的應用都有自己的 URL Schemes，更不是每個應用的每個功能都有相應的 URL Schemes。幾乎沒有所有功能都有對應 URL 的應用。一個 App 是否支持 URL Schemes 要看那個 App 的作者是否在自己的作品里添加了 URL Schemes 相關的代碼。
一個網址只對應一個網頁，但并非每個 URL Schemes 都只對應一款應用。這點是因為蘋果沒有對 URL Schemes 有不允許重復的硬性要求，所以曾經出現過有 App 使用支付寶的 URL Schemes 攔截支付帳號和密碼的事件。
一般網頁的 URL 比較好預測，而URL Scheme 因為沒有統一標準，所以非常難猜，通過猜來獲取 應用的 URL Schemes 是不現實的。
前面普及了一下URL Schemes的相關知識，作為個前端開發者，就不去深究其中的原理，都交給app開發者吧。接下來開始我們的正題。首先當然是要客戶端提供App的Url Schemes。
用瀏覽器去打開scheme
在瀏覽器中打開 scheme 就像打開一個不同的http地址一樣。可以在一個 a 標簽中打開。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打開App</title>
</head>
<body>
<a href="luwei://" id="open">打開應用</a>
</body>
</html>點擊上面的H5頁面中的鏈接將會嘗試喚醒對應app，在一些瀏覽器中，可能會彈出一個提示框，詢問用戶是否允許打開應用。
如果打開的 scheme 在本地沒有對應的 app，則點擊不會反應。
當然還可以使用 JavaScript 代碼打開，只需要添加相應的事件觸發和處理即可。
在JavaScript代碼中打開連接有以下幾種方式：
新建一個隱藏的 iframe ，地址指向需要打開的url
使用 window.location 或者 window.location.href 刷新當前頁面
新建一個隱藏的 a 標簽，地址指向打開的url，并觸發打開鏈接事件
動態創建一個script腳本，在這個腳本中新建一個a標簽并打開
// 打開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設備喚醒App的功能，并不能判斷是否已安裝App，沒有安裝即跳轉至下載鏈接。
瀏覽器判斷是否安裝應用
在瀏覽器實際上是沒有能力判斷手機里是否安裝了某個App的，所以只能夠采取一種投機取巧的方式。
在JavaScript中判斷頁面是否進入后臺來判斷打開成功。Html5提供了下列事件和屬性可以利用：
pagehide : 頁面隱藏時觸發
visibilitychange : 頁面隱藏沒有在當前顯示時觸發(切換tab也會觸發該事件)
document.hidden ： 當頁面隱藏時，該值為true，顯示時為false
上面這些事件或者屬性并不是所有瀏覽器都支持。下面是一個給出為id為openBtn 的按鈕添加打開scheme或者下載事件的例子，但對于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 的按鈕添加點擊事件處理函數
document.getElementById('openBtn').onclick = function () {
window.location.href = scheme; // 嘗試打開 scheme
// 設置3秒的定時下載任務，3秒之后下載app
downloader = setTimeout(function(){
if(isAndroid) {
window.location.href = andDownload;
}
if(isIOS) {
window.location.href = iosDownload;
}
}, 3000);
};
document.addEventListener('visibilitychange webkitvisibilitychange', function () {
// 如果頁面隱藏，推測打開scheme成功，清除下載任務
if (document.hidden || document.webkitHidden) {
clearTimeout(downloader);
}
});
window.addEventListener('pagehide', function() {
clearTimeout(downloader);
});沒有完美的方案
微信中無法喚醒App，需要“用瀏覽器打開”是因為微信對所有的分享鏈接接做了scheme屏蔽，也就是說分享連接中所有對于scheme的調用都被微信封掉了。有些app是能在微信打開是因為微信有一個白名單(有關系就是不錯)，對于在白名單中的分享鏈接是不會屏蔽掉scheme調用的。
到此，關于“html5喚醒APP案例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
