聲明：本文由入駐搜狐公眾平台的作者撰寫，除搜狐官方賬號外，觀點僅代表作者本人，不代表搜狐立場。舉報
新春佳節即將到來，北京的上地&西二旗、望京&國貿、五道口&中關村地區等程序員的聚集地開始放假，路上車國內明顯變少，地鐵也不那么擁擠。或許你可能已經在路上或已回到家鄉和親人團聚。雖然如此，佳節要過，技術還是要學習。今天社區就給大家附送一篇前端頁面打開App的技術實踐。
概述
在一些情景下,我們需要滿足以下之情形。請看如下圖：
用戶在H5頁面，點擊某個按鈕調用APP。如果用戶本地已安裝，則打開該APP，並且能夠讓它顯示指定的頁面；若沒有安裝，則跳轉到App下載頁面。下載前根據用戶代理的機型做判斷，Android機型轉向到Google Play（或騰訊應用寶、豌豆莢、華為應用市場）或 App Store。
還有一些場景，比如用戶在使用微信公眾號查看H5的落地頁或文章時，不論是體驗角度，還是運營角度，都需要把用戶導到APP上，使其安裝和用App繼續瀏覽。
在H5端還可以跟蹤下載，安裝，以及將用戶導流的數據處理。
HTML是在瀏覽器中運行的，它無法了解外面的操作系統層面安裝了什么應用的。在APP層，想知道用戶系統里安裝了哪些應用，亦要經過用戶安裝時許可才能取到相應權限。
因此，想用H5檢測用戶端是否安裝了某個App應用，是無法做到的，需要我們通過其它方法來處理。
本文中，我們要討論以以下兩個主要問題：
第一，檢測客戶端環境中是否安裝了某個App
第二，使用iOS或Android調起APP
自定義協議Scheme
在App開發同學一側，可以注冊一個自定義協議（Custom Scheme）。如：goto://wahaha。
一些常見應用的scheme已被人們總結，如下列表：
淘寶 taobao://http://s.taobao.com/?q=
QQ mqq://
微信 weixin://
淘寶 taobao://
今日頭條 localsdk://
微博 sinaweibo://
支付寶 alipay://
網易新聞 newsapp://
美團 imeituan://
京東 openapp.jdmoble://
知乎 zhihu://
優酷 youku://
ZAKER zakeripad://
你也可以通過itools，pledit這些工具來查看App的scheme。可以看到這些應用大多數與自家域名有關，有的也是別出心裁，你能發現更有趣的，可以告訴我？
當知道了Aapp的Sheme，前端同學就可以在H5中就可以加入如下的鏈接：
<a href="ibooks://">iBooks鏈接</a>
<a href="21cto://21cto.com/article/2929">自定義schema鏈接</a>
推薦各位使用location.href與iframe來實現激活這個鏈接。
Smart App Banners
從iOS 6 開始 Safari 帶來了一個新功能：SmartApp Banners，這個功能對於同時擁有網站和 App 的開發者來說特別實用。蘋果開發這個功能的目的就是讓 App 開發者更容易的把訪問移動端網站的用戶導入到他們的 App 中，而不用去寫復雜笨拙的彈出窗。
上面就是在 App每日推送網站上實現 Smart App Banners 的效果，我們可以看到在最上面有一個 Banner 條，上面顯示了 App每日推送 iPhone 客戶端的圖標，標題，公司名稱，評分和價格。最右邊是一個點擊會跳到 App Store 下載頁的按鈕，如果用戶已經安裝了，點擊就會自動打開 App。
添加 Smart App Banners
在網站上添加 Smart App Banners 是非常簡單，只需要在網站的 head 區域添加如下的 meta 代碼：
<meta name="apple-itunes-app"content="app-id=765692044"/>
我們把 app-id 替換成自己的 App ID 即可。
Smart App Banners 實踐
請大家先看如下一段代碼：
<metaname="apple-itunes-app" content="app-id=211885773,affiliate-data="PartnerId=21&SiteId=9383761"/>
其實這是一個自定義的meta標簽。可以在這個meta中加入網站聯盟代碼，上面的affiliate就是用來跟蹤聯盟代碼，這對運營同學來說也有很大益處。
如果用戶安裝了網站，這時 Smart App Banners 每次都是簡單的打開 App，這樣體驗並不好，比如 App每日推送這個網站是推薦各種好玩好用的 App，在具體某個 App 頁面的時候，如果能打開 App每日推送客戶端對應的頁面，這樣的體驗是最好的。所以 Smart App Banners 又提供了一個叫做 app-argument 的參數，讓我們進行各種自定義。
比如在 App每日推送書籍的網址在打開時，直接轉到某個書籍的頁面。
<metaname="apple-itunes-app" content="app-id=311507490,app-argument=http://bookID/1234"/>
app-argument 這個參數的值傳遞給程序，作為UIApplication 委托方法的 url 參數， 在iOS App 中需要添加如下代碼：
-(BOOL)application:(UIApplication*)application
openURL:(NSURL*)url
sourceApplication:(NSString*)sourceApplication
annotation:(id)annotation
以上就是在iOS中通過smart app banner來喚起app，通過一個meta標簽，在標簽里帶上app的信息，和打開后的行為，
在Android一側，可以使用一款jquery插件。還有一些產品叫做Deep Links(網址：https://github.com/BranchMetrics/android-branch-deep-linking)，原理與iOS類同，后面我們會再詳細討論。
判斷本地是否安裝了App
可以確定的是，在瀏覽器中無法明確的判斷本地是否安裝了應用。我們采用的解決方案是，在JS中設置一個延遲定時器setTimeout，第一時間嘗試喚起app，如果500ms沒有喚起成功，則默認本地沒有安裝app，500ms以后，將會觸發App下載行為。
這種方案從理論上可以，但在嘗試激活scheme的時候，若本地沒有安裝app，則會跳轉到一個瀏覽器默認的錯誤頁面。因此采用的解決方案是新建一個iframe。
我們來看網易新聞，今日頭條，YY等應用的實現，得到下面的解決方案:
varurl = {
open: 'ssdk://news_Article',
down:'http://www.okapp.com/download'
};
var iframe =document.('iframe');
var body = document.body;
iframe.style.cssText='display:none;width=0;height=0';
var timer = null; // 立即打開的按鈕
var openapp =document.getElementById('openapp');
openapp.addEventListener('click', function()
{
if(/MicroMessenger/gi.test(navigator.userAgent){
//引導用戶在手機瀏覽器中打開
})else{
body.(iframe);
iframe.src = url.open;
timer= setTimeout(function() {
window.location.href= url.down;
},500);
}
},false)
當頁面成功喚起app后，我們再切換回來瀏覽器，會發現跳轉到了下載頁面。為了避免用戶疑惑，我們可以把下載頁面定向到騰訊寶的下載頁面，應用寶會根據用戶代碼再做一次檢測。
Universal Links 技術
Apple的工程師們繼續為iOS 9發布了一個所謂的通用鏈接的深層鏈接特性，叫做Universal links。一種能夠方便的通過傳統的HTTP或HTTPS鏈接來啟動App，使用一致的網址來打開網站與應用。
來看網易新聞，一點資訊，今日頭條這些應用，它們是可以在iOS直接從微信中喚起app。但是在Android版的微信上也沒辦法直接喚起的，是直接到騰訊應用寶。
來看網易新聞代碼中的jsonp的請求內容，有一個名叫apple-app-site-association的JSON文件。代碼清單如下：
{
"applinks": {
"apps": [ ],
"details": {
"TEAM-IDENTIFIER.YOUR.BUNDLE.IDENTIFIER": {
"paths": [
"*"
]
}
}
}
}
這段JSON內容在如下鏈接可以看到：
http://active.163.com/service/form/v1/5847/view/1047.jsonp
網易新聞處理點擊時，先轉向到一個下載頁面，這個頁面加載完畢嘗試打開app，如果打開了就直接就到App里，如果沒有就在頁面上有一個立即下載的按鈕，按鈕處只有下載邏輯處理。
大家都在iOS上實現了universal links，Android生態大多數轉向到了騰訊應用寶，也有一些其它解決方案，比如采用兩個按鈕，一個下載，一個喚起的方式。
另外值得一提的是，微信里屏蔽了schema協議。如果想打開，我們需要先成為微信的合作伙伴，請張小龍的同事們幫我們配置進白名單，否則就沒辦法通過這個協議在微信中直接喚起App。
因此，前端同學需要判斷頁面場景是否在微信中，如果在微信中，則會提示用戶在瀏覽器中打開。
目前在微信中沒有屏蔽Unversal Links協議，如果App注冊了此協議，那么就能夠從微信中直接喚起app。
小結
以上是我們對App喚起的一些粗淺總結，一些方案也未必完美，甚至是錯漏。在條件允許的情況，建議大家多實踐，當你用自己的思想解決問題后，會有能力面對和處理更困難的問題。
后面我們會繼續討論這一話題，同時會進一步深入實踐。如果您有更好的解決方案，歡迎留言給社區。