H5喚起APP指南(附開源喚端庫)

前一段時間在作電流App H5頁面，需求中落地頁佔比較大，落地頁承擔的職責就是引流。引流有兩種形式，同時也是咱們對喚端的定義：引導已下載用戶打開APP，引導未下載用戶下載APP。

引導已下載用戶打開APP，從數據上說用戶停留在APP中的時間更多了，是在提升用戶粘性；從體驗上說，APP體驗是要比H5好的。引導未下載用戶下載APP，能夠增長咱們的用戶量。

上面其實分別解釋了 什麼是喚端 以及 爲何要喚端，也就是 3W法則 中的 What 和 Why，那麼接下來咱們就要聊一聊 How 了，也就是 如何喚端 。

咱們先來看看常見的喚端方式以及他們適用的場景：

喚端媒介

URL Scheme

來源

咱們的手機上有許多私密信息，聯繫方式、照片、銀行卡信息...咱們不但願這些信息能夠被手機應用隨意獲取到，信息泄露的危害甚大。因此，如何保證我的信息在設備全部者知情並容許的狀況下被使用，是智能設備的核心安全問題。

對此，蘋果使用了名爲 沙盒 的機制：應用只能訪問它聲明可能訪問的資源。但沙盒也阻礙了應用間合理的信息共享，某種程度上限制了應用的能力。

所以，咱們急須要一個輔助工具來幫助咱們實現應用通訊， URL Scheme 就是這個工具。

URL Scheme 是什麼

咱們來看一下 URL 的組成：

[scheme:][//authority][path][?query][#fragment]

咱們拿 https://www.baidu.com 來舉例，scheme 天然就是 https 了。

就像給服務器資源分配一個 URL，以便咱們去訪問它同樣，咱們一樣也能夠給手機APP分配一個特殊格式的 URL，用來訪問這個APP或者這個APP中的某個功能(來實現通訊)。APP得有一個標識，好讓咱們能夠定位到它，它就是 URL 的 Scheme 部分。

經常使用APP的 URL Scheme

APP	微信	支付寶	淘寶	微博	QQ	知乎	短信
URL Scheme	weixin://	alipay://	taobao://	sinaweibo://	mqq://	zhihu://	sms://

URL Scheme 語法

上面表格中都是最簡單的用於打開 APP 的 URL Scheme，下面纔是咱們經常使用的 URL Scheme 格式：

行爲(應用的某個功能)    
            |
scheme://[path][?query]
   |               |
應用標識       功能須要的參數

Intent

安卓的原生谷歌瀏覽器自從 chrome25 版本開始對於喚端功能作了一些變化，URL Scheme 沒法再啓動Android應用。 例如，經過 iframe 指向 weixin://，即便用戶安裝了微信也沒法打開。因此，APP須要實現谷歌官方提供的 intent: 語法，或者實現讓用戶經過自定義手勢來打開APP，固然這就是題外話了。

Intent 語法

intent:
   HOST/URI-path // Optional host 
   #Intent; 
      package=[string]; 
      action=[string]; 
      category=[string]; 
      component=[string]; 
      scheme=[string]; 
   end;

若是用戶未安裝 APP，則會跳轉到系統默認商店。固然，若是你想要指定一個喚起失敗的跳轉地址，添加下面的字符串在 end; 前就能夠了:

S.browser_fallback_url=[encoded_full_url]

示例

下面是打開 Zxing 二維碼掃描 APP 的 intent。

intent:
   //scan/
   #Intent; 
      package=com.google.zxing.client.android; 
      scheme=zxing; 
   end;

打開這個 APP ，能夠經過以下的方式：

<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end"> Take a QR code </a>

Universal Link

Universal Link 是什麼

Universal Link 是蘋果在 WWDC2015 上爲 iOS9 引入的新功能，經過傳統的 HTTP 連接便可打開 APP。若是用戶未安裝 APP，則會跳轉到該連接所對應的頁面。

爲何要使用 Universal Link

傳統的 Scheme 連接有如下幾個痛點：

• 在 ios 上會有確認彈窗提示用戶是否打開，對於用戶來講喚端，多出了一步操做。若用戶未安裝 APP ，也會有一個提示窗，告知咱們 「打不開該網頁，由於網址無效」
• 傳統 Scheme 跳轉沒法得知喚端是否成功，Universal Link 喚端失敗能夠直接打開此連接對應的頁面
• Scheme 在微信、微博、QQ瀏覽器、手百中都已經被禁止使用，使用 Universal Link 能夠避開它們的屏蔽（ 截止到 18年8月21日，微信和QQ瀏覽器已經禁止了 Universal Link，其餘主流APP未發現有禁止 ）

如何讓 APP 支持 Universal Link

有大量的文章會詳細的告訴咱們如何配置，你也能夠去看官方文檔，我這裏簡單的寫一個12345。

1. 擁有一個支持 https 的域名
2. 在 開發者中心 ，Identifiers 下 AppIDs 找到本身的 App ID，編輯打開 Associated Domains 服務。
3. 打開工程配置中的 Associated Domains ，在其中的 Domains 中填入你想支持的域名，必須以 applinks: 爲前綴
4. 配置 apple-app-site-association 文件，文件名必須爲 apple-app-site-association ，不帶任何後綴
5. 上傳該文件到你的 HTTPS 服務器的 根目錄 或者 .well-known 目錄下

Universal Link 配置中的坑

這裏放一下咱們在配置過程當中遇到的坑，固然首先你在配置過程當中必須得嚴格按照上面的要求去作，尤爲是加粗的地方。

1. 域名問題

   Universal Link 支持的域名最多隻能支持到二級域名，若是你用到了三級域名，Universal Link 喚端是不會生效的。

2. 跨域問題

   IOS 9.2 之後，必需要觸發跨域才能支持 Universal Link 喚端。

   IOS 那邊有這樣一個判斷，若是你要打開的 Universal Link 和 當前頁面是同一域名，ios 尊重用戶最可能的意圖，直接打開連接所對應的頁面。若是不在同一域名下，則在你的 APP 中打開連接，也就是執行具體的喚端操做。

3. Universal Link 是空頁面

   Universal Link 本質上是個空頁面，若是未安裝 APP，Universal Link 被當作普通的頁面連接，天然會跳到 404 頁面，因此咱們須要將它綁定到咱們的中轉頁或者下載頁。

如何調用三種喚端媒介

經過前面的介紹，咱們能夠發現，不管是 URL Scheme 仍是 Intent 或者 Universal Link ，他們都算是 URL ，只是 URL Scheme 和 Intent 算是特殊的 URL。因此咱們能夠拿使用 URL 的方法來使用它們。

iframe

<iframe src="sinaweibo://qrcode">

在只有 URL Scheme 的日子裏，iframe 是使用最多的了。由於在未安裝 app 的狀況下，不會去跳轉錯誤頁面。可是 iframe 在各個系統以及各個應用中的兼容問題仍是挺多的，不能所有使用 URL Scheme。

a 標籤

<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"">掃一掃</a>

前面咱們提到 Intent 協議，官方給出的用例使用的就是使用的 a 標籤，因此咱們跟着一塊兒用就能夠了。

window.location

URL Scheme 在 ios 9+ 上諸如 safari、UC、QQ瀏覽器中， iframe 均沒法成功喚起 APP，只能經過 window.location 才能成功喚端。

固然，若是咱們的 app 支持 Universal Link，ios 9+ 就用不到 URL Scheme 了。而 Universal Link 在使用過程當中，我發如今 qq 中，不管是 iframe 導航 仍是 a 標籤打開 又或者 window.location 都沒法成功喚端，一開始我覺得是 qq 和微信同樣禁止了 Universal Link 喚端的功能，其實否則，百般試驗下，經過 top.location 喚端成功了。

判斷喚端是否成功

若是喚端失敗（APP 未安裝），咱們老是要作一些處理的，能夠是跳轉下載頁，能夠是 ios 下跳轉 App Store... 可是Js 並不能提供給咱們獲取 APP 喚起狀態的能力，Android Intent 以及 Universal Link 卻是不用擔憂，它們倆的自身機制容許它們喚端失敗後直接導航至相應的頁面，可是 URL Scheme 並不具有這樣的能力，因此咱們只能經過一些很 hack 的方式來實現 APP 喚起檢測功能。

const initialTime = new Date();
let counter = 0;
let waitTime = 0;

const checkOpen = setInterval(() => {
    count++;
    waitTime = new Date() - initialTime;

    if (waitTime > 2500) {
        clearInterval(checkOpen);
        cb();
    }

    if (counter < 100) return;

    const hide = document.hidden || document.webkitHidden;

    if (!hide) {
        cb(); // 喚端失敗的回調函數
    }
}, 20);

APP 若是被喚起的話，頁面就會進入後臺運行，setInterval 在 ios 中不會中止運行，在 android 中中止運行。

每 20ms 執行一次，執行 100次 在頁面中實際耗費與 2000 ms 不會相差多少。

咱們的判斷條件比預期時間多設置了 500ms，因此若是安卓中 setInterval 內的函數執行 100 次之內所費時間超過 2500ms，則說明 APP 喚起成功，反之則表明失敗。

咱們經過 document.hidden 和 document.webkitHidden 屬性來判斷 APP 在 ios 中是否被正常喚起，2000ms 內，頁面轉入後臺運行，document.hidden 會返回 true，表明喚端成功，反之則表明失敗。

沒有完美的方案

透過上面的幾個點，咱們能夠發現，不管是 喚端媒介 、 調用喚端媒介 仍是 判斷喚端結果 都沒有一個十全十美的方法，咱們在代碼層上能作的只是在確保最經常使用的場景（好比 微信、微博、手百 等）喚端無誤的狀況下，最大化的兼容剩餘的場景。

好的，咱們接下來扯一些代碼之外的，讓咱們的 APP 可以在更多的平臺喚起。

• 微信、微博、手百、QQ瀏覽器等。

  這些應用能阻止喚端是由於它們直接屏蔽掉了 URL Scheme 。接下來可能就有看官疑惑了，微信中是能夠打開大衆點評的呀，微博裏面能夠打開優酷呀，那是如何實現的呢？

  它們都各自維護着一個白名單，若是你的域名在白名單內，那這個域名下全部的頁面發起的 URL Scheme 就都會被容許。就像微信，若是你是騰訊的「家眷」，你就能夠加入白名單了，微信的白名單通常只包含着「家眷」，除此外很難申請到白名單資質。可是微博之類的都是能夠聯繫他們的渠道童鞋進行申請的，只是條件各不相同，好比微博的就是在你的 APP 中添加打開微博的入口，三個月內喚起超過 100w 次，就能夠加入白名單了。

• 騰訊應用寶直接打開 APP 的某個功能

  剛剛咱們說到，若是你不是微信的家眷，那你是很難進入白名單的，因此在安卓中咱們通常都是直接打開騰訊應用寶，ios 中 直接打開 App Store。點擊騰訊應用寶中的「打開」按鈕，能夠直接喚起咱們的 APP，可是沒法打開 APP 中的某個功能（就是沒法打開指定頁面）。

  騰訊應用寶對外開放了一個叫作 APP Link 的申請，只要你申請了 APP Link，就能夠經過在打開應用寶的時候在應用寶地址後面添加上 &android_schema={your_scheme} ，來打開指定的頁面了。

開箱即用的callapp-lib

信息量很大！各類問題得本身趟坑驗證！心裏很崩潰！

不用愁，已經爲你準備好了藥方，只需照方抓藥便可😏 —— npm 包 callapp-lib

它能在大部分的環境中成功喚端，並且炒雞簡單啊，拿過去就能夠用啊，還支持不少擴展功能啊，快來瞅瞅它的 文檔 啊~~~

參考文章

1. 瀏覽器中喚起 native app，不然跳轉到應用商城下載
2. h5喚起app
3. URL Schemes 使用詳解
4. Android Intents with Chrome
5. 經常使用URL Scheme
6. Universal Link 前端部署採坑記
7. Support Universal Links
8. Universal Link是個騙子

本文首發於：https://suanmei.github.io/2018/08/23/h5_call_app/