手機瀏覽器跳轉APP

 

背景

對於APP來講，迴流分享頁是最好的最便宜的也是最病毒式的拉新方式。讓新用戶去下載APP是重要的。對老用戶來講，能夠直接調起APP也是提高用戶體驗和讓用戶有侵入式體驗的重要手段。因此咱們一塊兒來看看有哪些方式能夠喚起APP的

概念敘述

調起APP在不一樣平臺用不一樣的方式，主要就分3個 * URI Scheme * universal Link * Android App Links 如今仍是有不少第三方來協助你處理這個事情，經過接入他們的SDK和客戶端代碼來處理，可是萬變不離其宗，全部的第三方也離不開這3種方式。

1. URI Scheme:
   • URI Scheme 是iOS，Android平臺都支持，只須要原生APP開發時註冊 scheme ， 用戶點擊到此類連接時，會自動喚醒APP，藉助於 URL Router 機制，則還能夠跳轉至指定頁面。
   • <scheme name> : <hierarchical part> [ ? <query> ] [ # <fragment> ]
     • ：是scheme的名稱，表明着協議名稱。
     • ：它包含 authority 和 path。
     • ：可選項目，隔開或&隔開的鍵值對=
     • ：可選項目包，其它額外的標識信息 例如： git://github.com/user/project-name.git ftp://user1:1234@地址 musically://musical?id=xxxx&key=xxxx
2. universal Link:
   • iOS9 後推出的一項功能，通用連接，對於前端即訪問一個https的url,若是這個url帶有你提交給開發平臺的配置文件中匹配規則的內容，iOS系統會去嘗試打開你的app，若是打不開，系統就會在瀏覽器中轉向你要訪問的連接。
   • universal Link 工做方式以下：
     1. 訪問web link
     2. iOS訪問 https://xxxxxxx/apple-app-site-association 並解析，獲取文件中的信息(App的Team ID和Bundle ID)
     3. 經過Bundle ID 檢查本地是否存在對應app，和檢查PATH信息等，若是有app打開app，若是沒有則跳轉對應web link(可經過代碼實現跳去app Stroe)
3. Android App Links:
   • 在2015年的Google I/O大會上，Android M宣佈了一個新特性：App Links讓用戶在點擊一個普通web連接的時候能夠打開指定APP的指定頁面，前提是這個APP已經安裝而且通過了驗證，不然會顯示一個打開確認選項的彈出框，只支持Android M以上系統。
   • 簡單的說就是創建APP和某個連接的關聯，避免系統在處理該類型連接時彈出選擇框。彈框最多見的就是瀏覽器打開時的選擇框。彈出選擇框是應用註冊了相應scheme，applinks的做用是避免在打開本身域名的連接時彈出選擇（前提是註冊了相應scheme），能夠實現直接打開本身關聯的app。

對比/優劣

1. URI Scheme: 根據圖片能夠看到URI Scheme的兼容性是最高，在使用的過程當中，會發現有不少限制:
   • 當要被喚起的app沒有安裝時，這個連接就會出錯。在國內很是雜亂的瀏覽器中，會出錯的現象會不少種類型。
   • 當註冊有多個scheme相同的時候，目前沒有辦法區分。
   • 不支持從其餘app中的UIWebView中跳轉到目標app 也就由於會有這些緣由，apple和android都出現了本身第二套解決方案。
2. universal Link 從連接上看來，是一個web link，因此也就解決了當沒有app時，跳轉也不會出現報錯，因此相對Scheme優點就提現出來了.
   • 當已經安裝app，不須要加載任何web頁面，app就會當即啓動；app沒有安裝，就會跳去對應的web link。
   • universal Link 是從服務器上查詢是哪一個app須要被打開，因此不會存在衝突問題
   • universal Link 支持從其餘app中的UIWebView中跳轉到目標app
   • 隱私性，提供universal Link給別的app進行app間的交流，然而對方並不可以用這個方法去檢測你的app是否被安裝。 固然universal Link也不是十全十美的,缺陷也是存在的:
   • 會記住用戶的選擇：在用戶點擊了Universal link以後，iOS會去檢測用戶最近一次是選擇了直接打開app仍是打開網站。一旦用戶點擊了這個選項，他就會經過safiri打開你的網站。而且在以後的操做中，默認一直延續這個選擇，除非用戶從你的webpage上經過點擊Smart App Banner上的OPEN按鈕來打開。 
3. app link 和 universal Link 差別不大。也是爲了更好的提供調起app出現的google的方案。優勢與 universal Link 差很少，缺點主要以下：
   • 國內的支持相對較差，在有的瀏覽器或者手機ROM中並不能連接至APP，而是在瀏覽器中打開了對應的連接。
   • 在詢問是否用APP打開對應的連接時，若是選擇了「取消」而且「記住選擇」被勾上，那麼下次你再次想連接至APP時就不會有任何反應 

不管哪種方式目前都沒有解決幾個問題： * 若是設備上沒有安裝這個app的時候，安裝完畢後，沒法保留住此時用戶停留的上下文。 * 由於web沒有辦法監聽到APP是否安裝，因此都須要經過一些手段來兼容調起app或者是去下載頁

使用 & 須要注意的內容

1. URI Scheme：
   • 使用: 這種方式是當期使用最普遍，也是最簡單的，可是須要手機，APP支持 URI Scheme 。
   • 須要注意的內容 & 遇到的問題： 其實使用URI Scheme 部分前端沒有太多能夠排查的問題，會遇到的問題主要是兩個部分。1. 在android的兼容性處理（國內的瀏覽器無力吐槽ing），2. 當沒有安裝app的狀況，URI Scheme 會有各類報錯，也須要處理…

<!-- 喚醒APP並跳轉至指定的path頁面 -->
<a href="<scheme>://<path>?<params>=<value>">打開APP</a>

<!-- JS設置iframe src跳轉至指定的path頁面 -->
//建立一個隱藏的iframe
var ifr = document.createElement('iframe');
ifr.src = '<scheme>://<path>?<params>=<value>';
ifr.style.display = 'none';
document.body.appendChild(ifr);
//記錄喚醒時間
var openTime = +new Date();
window.setTimeout(function(){
    document.body.removeChild(ifr);
    //若是setTimeout 回調超過2500ms，則彈出下載
    if( (+new Date()) - openTime > 2500 ){
        window.location = '指定的下載頁面';
    }
},2000)

2. universal Link & app Links
   • 使用：對於有app的用戶，只是打開一個鏈接，可是須要注意的是須要考慮到沒有APP的用戶。(我的的解決方案：針對域名來判斷，當域名爲特定的universal Link 的域名，則跳轉去下載頁面）
   • 須要注意的內容 & 遇到的問題：
     1. apple-app-site-association 和 assetlinks.json 的配置
     2. 須要保證使用的連接跨域(universal Link)
     3. 直接將universal Link 貼入瀏覽器的url中不會生效
     4. window.onload 或者用戶沒有任何事件觸發的狀況下，universal Link也不會生效

兩大平臺的特殊處理(facebook & twitter)

facebook 和 twitter 做爲國外的兩大信息聚合平臺，對於在他們app中調起app也有本身的一套方式。 根據要求經過添加META頭來處理打開APP facebook:

<meta property="fb:app_id" content="xxxxxx" />
<meta property="og:type" content="xxxx"/>
<meta property="og:title" content="xxx" />
<meta property="al:ios:url" content="{{ uri scheme }}" />
<meta property="al:android:url" content="{{ uri scheme }}" />
<meta property="al:ios:app_store_id" content="{{app_store_id}}" />
<meta property="al:ios:app_name" content="{{xxx}}" />
<meta property="al:android:app_name" content="{{xxx}}" />
<meta property="al:android:package" content="{{android:package}}" />

twitter:

<meta name="twitter:card" content="app" />
<meta name="twitter:site" content="xxxxx" />
<meta name="twitter:title" content="xxxxx" />
<meta name="twitter:description" content="xxxxxxx" />
<meta name="twitter:image" content="xxxx" />
<meta name="twitter:app:name:iphone" content="xxx">
<meta name="twitter:app:id:iphone" content="xxx">
<meta name="twitter:app:url:iphone" content="{{Scheme}}">
<meta name="twitter:app:name:ipad" content="xxx">
<meta name="twitter:app:id:ipad" content="xxx">
<meta name="twitter:app:url:ipad" content="{{Scheme}}">
<meta name="twitter:app:name:googleplay" content="xxx">
<meta name="twitter:app:id:googleplay" content="xxx">
<meta name="twitter:app:url:googleplay" content="{{Scheme}}">

使用 checkList(前端)

1. scheme

   • iOS 和 android 是否已經支持 此scheme
   • js處理兼容代碼

2. universal Link (apple-app-site-association 官方文檔)

   • HTTPS的域名
   • iOS9 以上
   • universal Link 是否跨域
   • universal Link的落地頁是不是下載頁面
   • apple-app-site-association 配置在 host的根目錄和.well-known下
     • 官方檢測: apple-app-site-association 檢測
   • apple-app-site-association會在第一次打開app或者更新app時候會去拉去,因此確認是否更新了apple-app-site-association後沒有更新過app
   • 檢查apple-app-site-association paths 大小寫敏感 支持通配符
   • 該設備的用戶選擇了直接打開app仍是打開網站，若是選擇打開網站，須要經過smart banner 從新啓用
   • 跳轉處理是不是在用戶事件中觸發，而不是進入頁面後直接觸發

3. app links (android app links官方文檔)

   • HTTPS的域名
   • 跳轉後的落地頁是不是下載頁面
   • assetlinks.json 配置在 host的.well-known下
     • 官方生成/檢測: android app links檢測

4. facebook (facebook app link官方文檔)

   • 將須要的meta頭信息填充完畢
   • 檢測連接 分享調試器 - Facebook for Developers , 確認分享連接中獲取到了所須要的meta頭
   • 分享過的連接會有緩存，在檢測中清楚緩存
   • 若是web和wap連接一致，確認在web中也添加了相同的meta頭，facebook會默認從web中獲取

5. twitter (Twitter app card官方文檔)

   • 將須要的meta頭信息填充完畢
   • 檢測連接 Twitter app card 檢測
   • 若是web和wap連接一致，確認在web中也添加了相同的meta頭，facebook會默認從web中獲取

連接

1. webview如何屏蔽universal Link
2. apple-app-site-association 官方文檔
3. apple-app-site-association 檢測
4. android app links官方文檔
5. android app links檢測
6. facebook app link官方文檔
7. 分享調試器 - Facebook for Developers
8. Twitter app card官方文檔
9. Twitter app card 檢測