應用場景
H5喚醒APP常見的應用場景是在一些活動頁面引導用戶進行下載或打開APP以達到推廣引流的作用。一般有以下兩種情況：
- 引導已下載APP用戶打開APP，提升用戶體驗，用戶粘性
- 引導未下載APP用戶去下載APP，推廣引流，增加用戶量
方案介紹
1、URL Scheme
簡介
相信大家都知道 URL，例如https://www.baidu.com就是一個URL。
在 😕/ 之前的部分就稱為 URL Scheme。
也就是說https://www.baidu.com的 URL Scheme 就是 https。
簡單來說，URL Scheme 就是一個可以讓 app 相互之間可以跳轉的協議。
就像給服務器資源分配一個 URL，以便我們去訪問它一樣，我們同樣也可以給手機APP分配一個特殊格式的 URL，用來訪問這個APP或者這個APP中的某個功能(來實現通信)。APP得有一個標識，好讓我們可以定位到它，它就是 URL 的 Scheme 部分。
語法
URI = scheme:[//authority]path[?query][#fragment]
// 其中授權信息包含以下部分，具體查看[wiki](https://en.wikipedia.org/wiki/URL)
authority = [userinfo@]host[:port]
例子
- 微信：weixin://
- 支付寶：alipay://
- 淘寶：taobao://
- 其他自定義Scheme：yxstock://yx.stock.app/pathname?key1=value1&key2=value2
2、Intent
安卓原生Chrome瀏覽器在18之前的版本支持URL Scheme，25之后版本功能做了變化，不再支持通過設置iframe src屬性來喚醒APP。例如，即使安裝了APP，設置
<iframe src="paulsawesomeapp://page1"> </iframe>
也無法打開APP。需要實現谷歌官方提供的 intent: 語法，或者實現讓用戶通過自定義手勢來打開APP。
語法
intent:
HOST/URI-path // Optional host
#Intent;
package=\[string\];
action=\[string\];
category=\[string\];
component=\[string\];
scheme=\[string\];
end;
具體的解析詳情可以查看源碼。
同樣地，可以在end;字符串前面添加一個跳轉失敗后的地址：
S.browser_fallback_url=[encoded_full_url]
當APP無法喚起的時候，將會跳轉到上面給到的地址。
例子
下面是打開 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;end"> Take a QR code </a>
3、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
簡單概述配置方法，具體詳細配置可以查看官方文檔。
- 擁有一個支持 https 的域名
- 在 開發者中心 ，Identifiers 下 AppIDs 找到自己的 App ID，編輯打開 Associated Domains 服務。打開工程配置中的 Associated Domains ，在其中的 Domains 中填入你想支持的域名，必須以
applinks:為前綴 - 配置
apple-app-site-association文件，文件名必須為apple-app-site-association，不帶任何后綴 - 上傳該文件到你的 HTTPS 服務器的 根目錄 或者
.well-known目錄下
喚起方式
通過前面的介紹，我們可以發現，無論是 URL Scheme 還是 Intent 或者 Universal Link ，他們都算是 URL ，只是 URL Scheme 和 Intent 算是特殊的 URL。所以我們可以拿使用 URL 的方法來使用它們。
1、iframe
<iframe src="weixin://qrcode">
優點：支持URL Scheme情況下，在未安裝 app 的情況下，不會去跳轉錯誤頁面。
缺點：部分系統兼容性問題，不支持URL Scheme。例如，安卓系統原生瀏覽器25版本后則不支持iframe喚醒APP。
2、a標簽
<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"> Take a QR code </a>
3、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。Android Intent 和Universal Link 自身機制允許它們喚端失敗后直接導航至相應的頁面，但URL Scheme則無法做到，需要通過hack手段來判斷喚醒狀態來做處理：
const handleClickOpenApp = () => {
let isWakeApp = false
// if viewport is changed, that means app have been waked up.
document.addEventListener('visibilitychange', () => {
isWakeApp = true
})
// if app is installed then wake up.
go('usmart-global://stock.app')
// if app fails to wake up,then go to download page.
setTimeout(() => {
if (!isWakeApp) {
handleClickDownloadApp()
}
}, 2000)
}
const go = (url: string) => {
if (!url) return
window.location.href = url
}
APP 如果被喚起的話，頁面就會進入后台運行，會觸發頁面的 visibilitychange 事件。如果觸發了，則表明頁面被成功喚起。沒有喚醒則定時器2秒后跳轉到相應的落地頁作為兜底處理。
最佳實踐
為了兼容不同終端，建議url Scheme、Intent、Universal Link 一起使用😄。