有很多產品都是同時具備 Web 端和 App 端的形態(tài)遗座。比如簡書舀凛，經常可以在朋友圈看到來自這里的分享途蒋，所以在傳播方面就很倚重 Web猛遍，然后在頁面上對 App 進行關聯，提高導流轉化率。
目標效果
最終實現的效果有以下三條：
- 若用戶未安裝 App螃壤，則顯示 App 信息抗果，方便用戶點擊安裝。
- 若用戶已安裝 App奸晴，則自動調起并在 APP 中進行顯示冤馏。
- 若用戶已安裝 App，但仍然切換到瀏覽器閱覽寄啼，則提供手動點擊打開 App 的方式逮光。
本文將介紹如何在自己的產品中達到上述效果。
由于 Web 頁面是在瀏覽器中顯示的墩划，所以能否實現功能和用戶所用具體瀏覽器相關涕刚。
本文以 iOS Safari 及 Android Chrome 為主，會提及微信的內置瀏覽器乙帮，但不再不包含其他杜漠。
先來看效果圖
效果 2 的自動打開 App 在上圖中并未體現
iOS
Smart App Banners
這是 iOS 6 之后 Safari 默認支持的功能，可以實現效果 1 和 3察净，請參見上圖前兩幅驾茴。
具體實現方法很簡單，只需要在 Web 中加入一條 meta 信息指定 App ID 和 URL即可氢卡。
<meta name="apple-itunes-app" content="app-id=888237539, app-argument=http://jianshu.com/p/d7ae65ccac3e">
點擊打開后具體行為（顯示文章）及數據（文章 ID）可以通過 app-argument 指定锈至，然后在此方法中處理 application:openURL:sourceApplication:annotation:[1]
推薦一個第三方庫 HHRouter，很方便即可將 URL 映射至 View Controller
具體過程及原理可參考官方文檔說明译秦，此處不再詳述峡捡。
要注意此功能在模擬器中無法生效
另外如果 App 是首次要實現此功能，實機也無法觸發(fā)第二幅圖的效果
等包含此功能的版本在 Apple Store 發(fā)布之后筑悴，才能看到第二幅圖的效果
Universal Links
這是從 iOS 9 之后才支持的功能们拙，可以實現效果 2，各位自己分享本文到微信中雷猪，然后選擇在 Safari 中打開即可看到睛竣。
實現上，首先在 Server 創(chuàng)建『apple-app-site-association』文件（需支持 HTTPS[2] 訪問）求摇，記載哪些 Web 路徑應該在 App 中打開射沟，例如簡書的 https://jianshu.com/apple-app-site-association，可見支持文章与境、專題验夯、用戶信息、文集這四種頁面摔刁。
{
"applinks": {
"apps": [],
"details": [
{
"appID": "KS7QAPBMXA.com.jianshu.Hugo",
"paths": [ "/p/*", "/collection/*", "/users/*", "/notebooks/*" ]
}
]
}
}
接下來在設置 App 中支持域名
啟用 Associated Domains 服務
登錄開發(fā)者中心挥转，在 Identifiers -> App IDs 下找到對應 ID enable 即可。關聯域名
用 Xcode 打開項目，在 TARGETS -> Capabilities 下找到 Associated Domains 項目绑谣，填入域名即可党窜。
最后，App 中實現 application:continueUserActivity:restorationHandler: 就好借宵。
詳情可參考官方文檔說明幌衣，另外提供一個官方工具可以檢測某網址是否支持 Universal Links 等功能。
自定義 URL Schemes
也可以利用來打開 App壤玫，例如簡書點擊 打開應用 按鈕就會調用 jianshu:// 來嘗試打開自己的 App豁护，請參見上圖第三幅。
和 Universal Links 區(qū)別是欲间，這個不能自動打開 App楚里，會給用戶彈出一個確認框，經用戶同意才可以猎贴。
實現上也很簡單班缎，在 Info.plist -> URL types 創(chuàng)建 item 定義 CFBundleURLName 及 CFBundleURLSchemes 即可。前者不重要她渴，一般用域名的反序吝梅，后者即是自定義的 Schemes。
接下來 App 里實現此方法 application:openURL:sourceApplication:annotation:[1]
Android
Smart App Banner
很遺憾官方并沒有提供類似于 iOS 的同等功能做瞪，不過這款 jQuery 插件[3] 大致可以模擬出該效果对粪。
當然也需要在 Web 中加入 meta 來標志 App 的包名
<meta name="google-play-app" content="app-id=com.jianshu.haruki">
雖然 name 是 google-play-app，不過當用戶點擊查看 App 的按鈕后装蓬，各種商店 App 都可以響應著拭，所以只要 App 在各大商店上架就可以正常使用。
該插件沒法判斷用戶是否已經安裝了 App牍帚，無法實現圖中第 2 幅的效果
Intent Filters
已安裝 App 的狀態(tài)自動打開的功能儡遮，需要 App 自己響應自家域名的 http/https。
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="http" android:host="jianshu.com" />
</intent-filter>
這里推薦一個開原庫 ActivityRouter暗赶，可以用注解的方式配置 Activity 自動響應 Web URL鄙币。
@Router("http://jianshu.com/p/:postId")
public class PostActivity extends Activity {
...
}
當訪問自家的網頁時，系統會提示用戶是否用 App 打開蹂随，如果用戶選擇了『總是』的話十嘿，以后就可以實現自動打開了。
自定義 URL Schemes
手動點擊打開打開 App 的話岳锁，觸發(fā) intent:// 的調用即可（例如放在 a 標簽中）绩衷。不過要注意必須由用戶手勢觸發(fā)，否則調用無效。
實現方式類似上方的自動打開咳燕，不過 intent 調用需要遵循一定格式勿决，詳見官方文檔
window.location = "intent://notes/d7ae65ccac3e/#Intent;scheme=jianshu;package=com.jianshu.haruki;end"
App 側首先配置響應自定義 scheme
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="jianshu" />
</intent-filter>
邏輯仍然可以用 ActivityRouter 很方便的實現。
如果用戶沒有安裝 App 時招盲，Chrome 會嘗試打開 Google Play低缩，可能會對用戶造成一點困擾。
-
iOS 9 之后請使用 application:openURL:options: ? ?
-
這個使用目前流行的 Let's Encrypt 可以很方便實現 ?
-
這款插件還同時支持 Windows Phone 以及 iOS 4/5宪肖，雖然沒啥人用 ?
