H5 喚醒APP

端開發

H5 喚醒APP功能

最近遇到一個需求，需要在從APP分享出去的H5頁面中，帶有一個立即打開的按鈕，如果本地安裝了app，那么就直接喚起本地的app，如果沒有安裝，則跳轉到下載。這是一個很正常的推廣和導流量的策略。前端小白從來沒有做過這個需求，只能開始哼唧哼唧地開啟自己的度娘和谷歌之旅。

經過一段時間的探索之旅發現里面的學問很多，要做一個兼容性很好的方案，就需要考慮各種情況，在不同的情況適配不同的方案，比方說用戶是在手機瀏覽器打開還是微信中打開，或者是在pc中打開，universal騰訊應用寶直接打開 APP link是否被關閉等，這就使代碼實現變得復雜，且容易出錯，且還有安卓平臺機型眾多、瀏覽器眾多等導致的兼容問題。由于時間有限，這次主要先介紹一個比較普遍的使用URL Scheme進行App跳轉的方法。

URL Scheme —— 喚端媒介

來源

一般來說，我們使用的智能設備上有許多我們的個人信息。比如：聯系方式、銀行卡/信用卡信息、支付寶/Paypal/各大商城的賬戶密碼、照片甚至行程與位置信息等。

如果說，你設備上的每一個應用，不管是官方的還是你從任何商城安裝的應用都可以隨意地獲取這些信息，那么你輕則收到騷擾信息和郵件、重則后果不堪設想。如何讓這些信息不被其它應用隨意使用，或者說，如何讓這些信息僅在設備所有者本人知情并允許的情況下被使用，是所有智能設備與操作系統所要在乎的核心安全問題。針對這個問題，蘋果使用了名為「沙盒」的機制：應用只能訪問它聲明可能訪問的資源。一切提交到 App Store 的應用都必須遵守這個機制。

在安全方面沙盒是個很好的解決辦法，但是有些矯枉過正。敏感的個人信息我們不愿意透露，卻不代表所有的信息我們都不想與其它應用共享。因此，我們急需要一個輔助工具來幫助我們實現應用通信， URL Schemes 就是這個工具。

URL Schemes是什么

[scheme]://[host]/[path]?[query]

我們拿 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調用的。
本文只是小小地拋個磚，介紹了一種比較常用簡單的方法去喚醒app，該方案兼容性不是特別好吧。要做出一個比較完美的方案還需要細細去鉆研，還需要不停地去搬磚~不說了，搬磚去了~

起喚醒是目前非常流行的一款智能亮屏息屏app，根據用戶的手勢及使用習慣來決定屏幕的光亮及解鎖程度，實現自動化操作的目的，并且此軟件的耗電量與內存占比都非常小，不會影響手機的正常使用，能夠適配于不同的機型，并且通過精準的傳感系統防止出現誤觸的情況。

軟件功能

放下關屏

亮屏但未解鎖時，放下手機可自動關屏

輕拍亮/關屏

鎖屏狀態下，輕拍放在桌上的手機頂部，自動亮屏

若有新通知點亮屏幕，不想理會，也可輕拍關屏

翻轉鎖屏

任何狀態下，手機屏幕朝下放置自動鎖屏

后臺隱藏

在后臺任務界面中隱藏本軟件（強迫癥福音）

兼容鎖屏模式

適用于三星、索尼等機型，解鎖時可使用指紋

支持無障礙，視障人士也可在軟件內順利操作

由于抬手喚醒功能的特殊性，加上各家系統差異較大（包括刷非官方ROM的），初期無法保證適配率。

來源：http://www.3h3.com/az/201589.html

者：suan_suanhttps://segmentfault.com/a/1190000018661914

H5 喚醒APP功能

最近遇到一個需求，需要在從APP分享出去的H5頁面中，帶有一個立即打開的按鈕，如果本地安裝了app，那么就直接喚起本地的app，如果沒有安裝，則跳轉到下載。

這是一個很正常的推廣和導流量的策略。前端小白從來沒有做過這個需求，只能開始哼唧哼唧地開啟自己的度娘和谷歌之旅。

經過一段時間的探索之旅發現里面的學問很多，要做一個兼容性很好的方案，就需要考慮各種情況，在不同的情況適配不同的方案。

比方說用戶是在手機瀏覽器打開還是微信中打開，或者是在pc中打開，universal騰訊應用寶直接打開 APP link是否被關閉等，這就使代碼實現變得復雜，且容易出錯，且還有安卓平臺機型眾多、瀏覽器眾多等導致的兼容問題。

由于時間有限，這次主要先介紹一個比較普遍的使用URL Scheme進行App跳轉的方法。

URL Scheme —— 喚端媒介

來源

一般來說，我們使用的智能設備上有許多我們的個人信息。

比如：聯系方式、銀行卡/信用卡信息、支付寶/Paypal/各大商城的賬戶密碼、照片甚至行程與位置信息等。

如果說，你設備上的每一個應用，不管是官方的還是你從任何商城安裝的應用都可以隨意地獲取這些信息，那么你輕則收到騷擾信息和郵件、重則后果不堪設想。

如何讓這些信息不被其它應用隨意使用，或者說，如何讓這些信息僅在設備所有者本人知情并允許的情況下被使用，是所有智能設備與操作系統所要在乎的核心安全問題。

針對這個問題，蘋果使用了名為「沙盒」的機制：應用只能訪問它聲明可能訪問的資源。一切提交到 App Store 的應用都必須遵守這個機制。

在安全方面沙盒是個很好的解決辦法，但是有些矯枉過正。敏感的個人信息我們不愿意透露，卻不代表所有的信息我們都不想與其它應用共享。

因此，我們急需要一個輔助工具來幫助我們實現應用通信， URL Schemes 就是這個工具。

URL Schemes是什么

[scheme]://[host]/[path]?[query]

我們拿 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>

<head>

<title>打開App</title>

</head>

<body>

</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

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調用的。

本文只是小小地拋個磚，介紹了一種比較常用簡單的方法去喚醒app，該方案兼容性不是特別好吧。要做出一個比較完美的方案還需要細細去鉆研，還需要不停地去搬磚~不說了，搬磚去了~

以上就是今天的知識分享啦~

如果大家有問題或者想了解更多的

技術干貨可以私信發送【微信】添加朗妹兒微信喲~

在線咨詢

上一篇：vue的兩種服務器端渲染方案
下一篇：詳解JavaScript事件循環機制

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商