網頁調起App之應用實踐

聲明：本文由入駐搜狐公衆平臺的做者撰寫，除搜狐官方帳號外，觀點僅表明做者本人，不表明搜狐立場。舉報

　　

　　新春佳節即將到來，北京的上地&西二旗、望京&國貿、五道口&中關村地區等程序員的彙集地開始放假，路上車國內明顯變少，地鐵也不那麼擁擠。或許你可能已經在路上或已回到家鄉和親人團聚。雖然如此，佳節要過，技術仍是要學習。今天社區就給你們附送一篇前端頁面打開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喚起的一些粗淺總結，一些方案也未必完美，甚至是錯漏。在條件容許的狀況，建議你們多實踐，當你用本身的思想解決問題後，會有能力面對和處理更困難的問題。

　　後面咱們會繼續討論這一話題，同時會進一步深刻實踐。若是您有更好的解決方案，歡迎留言給社區。