怎么使用網(wǎng)頁啟動(dòng)應(yīng)用？html5喚醒APP小記案例詳解！

猿友 2021-08-06 09:47:45 瀏覽數(shù) (5361)

反饋

在生活中我們?cè)诖蜷_一個(gè)網(wǎng)址鏈接之后，在網(wǎng)頁中會(huì)要求我們下載或者打開手機(jī)中已有的app。那么今天我們就來說說有關(guān)于：“怎么使用網(wǎng)頁啟動(dòng)應(yīng)用？”這個(gè)問題吧！下面是小編的個(gè)人經(jīng)歷和相關(guān)資料分享！

經(jīng)過一段時(shí)間的探索之旅發(fā)現(xiàn)里面的學(xué)問很多，要做一個(gè)兼容性很好的方案，就需要考慮各種情況，在不同的情況適配不同的方案，比方說用戶是在手機(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 —— 喚端媒介

來源

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

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

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

URL Schemes是什么

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

我們拿 https://www.baidu.com 來舉例，scheme 自然就是 https 了，后面拼接的是傳遞的參數(shù)。URL Schemes 沒有特別嚴(yán)格的規(guī)范，所以后面參數(shù)的具體定義是app開發(fā)者去自定義。

就像給服務(wù)器資源分配一個(gè) URL，以便我們?nèi)ピL問它一樣，我們同樣也可以給手機(jī)APP分配一個(gè)特殊格式的 URL，用來訪問這個(gè)APP或者這個(gè)APP中的某個(gè)功能(來實(shí)現(xiàn)通信)。APP得有一個(gè)標(biāo)識(shí)，好讓我們可以定位到它，它就是 URL 的 Scheme 部分。

但是，兩者還有幾個(gè)重要的區(qū)別：

所有網(wǎng)頁都一定有網(wǎng)址，不管是首頁還是子頁。但未必所有的應(yīng)用都有自己的 URL Schemes，更不是每個(gè)應(yīng)用的每個(gè)功能都有相應(yīng)的 URL Schemes。幾乎沒有所有功能都有對(duì)應(yīng) URL 的應(yīng)用。一個(gè) App 是否支持 URL Schemes 要看那個(gè) App 的作者是否在自己的作品里添加了 URL Schemes 相關(guān)的代碼。
一個(gè)網(wǎng)址只對(duì)應(yīng)一個(gè)網(wǎng)頁，但并非每個(gè) URL Schemes 都只對(duì)應(yīng)一款應(yīng)用。這點(diǎn)是因?yàn)樘O果沒有對(duì) URL Schemes 有不允許重復(fù)的硬性要求，所以曾經(jīng)出現(xiàn)過有 App 使用支付寶的 URL Schemes 攔截支付帳號(hào)和密碼的事件。
一般網(wǎng)頁的 URL 比較好預(yù)測(cè)，而URL Scheme 因?yàn)闆]有統(tǒng)一標(biāo)準(zhǔn)，所以非常難猜，通過猜來獲取應(yīng)用的 URL Schemes 是不現(xiàn)實(shí)的。

前面普及了一下URL Schemes的相關(guān)知識(shí)，作為個(gè)前端開發(fā)者，就不去深究其中的原理，都交給app開發(fā)者吧。接下來開始我們的正題。首先當(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頁面中的鏈接將會(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代碼中打開連接有以下幾種方式：

新建一個(gè)隱藏的 iframe ，地址指向需要打開的url
使用 window.location 或者 window.location.href 刷新當(dāng)前頁面
新建一個(gè)隱藏的 a 標(biāo)簽，地址指向打開的url，并觸發(fā)打開鏈接事件
動(dòng)態(tài)創(chuàng)建一個(gè)script腳本，在這個(gè)腳本中新建一個(gè)a標(biāo)簽并打開

// 打開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中判斷頁面是否進(jìn)入后臺(tái)來判斷打開成功。Html5提供了下列事件和屬性可以利用：

pagehide : 頁面隱藏時(shí)觸發(fā)
visibilitychange : 頁面隱藏沒有在當(dāng)前顯示時(shí)觸發(fā)(切換tab也會(huì)觸發(fā)該事件)
document.hidden ：當(dāng)頁面隱藏時(shí)，該值為true，顯示時(shí)為false

上面這些事件或者屬性并不是所有瀏覽器都支持。下面是一個(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 () {
        // 如果頁面隱藏，推測(cè)打開scheme成功，清除下載任務(wù)
        if (document.hidden || document.webkitHidden) {
            clearTimeout(downloader);
        }
    });
    window.addEventListener('pagehide', function() {
        clearTimeout(downloader);
    });

沒有完美的方案

微信中無法喚醒App，需要“用瀏覽器打開”是因?yàn)槲⑿艑?duì)所有的分享鏈接接做了scheme屏蔽，也就是說分享連接中所有對(duì)于scheme的調(diào)用都被微信封掉了。有些app是能在微信打開是因?yàn)槲⑿庞幸粋€(gè)白名單(有關(guān)系就是不錯(cuò))，對(duì)于在白名單中的分享鏈接是不會(huì)屏蔽掉scheme調(diào)用的。
本文中我們簡(jiǎn)單的講述了有關(guān)于：“怎么使用網(wǎng)頁啟動(dòng)應(yīng)用？”這個(gè)問題的相關(guān)內(nèi)容分享！如果我們要做出一個(gè)比較完美的方案還需要細(xì)細(xì)去鉆研，以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，大家也可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。

HTML5

0 人點(diǎn)贊

怎么使用網(wǎng)頁啟動(dòng)應(yīng)用？html5喚醒APP小記案例詳解！

怎么使用網(wǎng)頁啟動(dòng)應(yīng)用？html5喚醒APP小記案例詳解！