有很多产品都是同时具备 Web 端和 App 端的形态。比如简书，经常可以在朋友圈看到来自这里的分享，所以在传播方面就很倚重 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 是首次要实现此功能，实机也无法触发第二幅图的效果
等包含此功能的版本在 Apple Store 发布之后，才能看到第二幅图的效果
Universal Links
这是从 iOS 9 之后才支持的功能，可以实现效果 2，各位自己分享本文到微信中，然后选择在 Safari 中打开即可看到。
实现上，首先在 Server 创建『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 服务
登录开发者中心，在 Identifiers -> App IDs 下找到对应 ID enable 即可。关联域名
用 Xcode 打开项目，在 TARGETS -> Capabilities 下找到 Associated Domains 项目，填入域名即可。
最后，App 中实现 application:continueUserActivity:restorationHandler: 就好。
详情可参考官方文档说明，另外提供一个官方工具可以检测某网址是否支持 Universal Links 等功能。
自定义 URL Schemes
也可以利用来打开 App，例如简书点击 打开应用 按钮就会调用 jianshu:// 来尝试打开自己的 App，请参见上图第三幅。
和 Universal Links 区别是，这个不能自动打开 App，会给用户弹出一个确认框，经用户同意才可以。
实现上也很简单，在 Info.plist -> URL types 创建 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 的状态自动打开的功能，需要 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 的话，触发 intent:// 的调用即可（例如放在 a 标签中）。不过要注意必须由用户手势触发，否则调用无效。
实现方式类似上方的自动打开，不过 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，虽然没啥人用 ↩
