有很多产品都是同时具备 Web 端和 App 端的形态。比如简书，经常可以在朋友圈看到来自这里的分享，所以在传播方面就很倚重 Web，然后在页面上对 App 进行关联，提高导流转化率。

目标效果

最终实现的效果有以下三条：

1. 若用户未安装 App，则显示 App 信息，方便用户点击安装。
2. 若用户已安装 App，则自动调起并在 APP 中进行显示。
3. 若用户已安装 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，可能会对用户造成一点困扰。

---

1. iOS 9 之后请使用 application:openURL:options: ↩ ↩

2. 这个使用目前流行的 Let's Encrypt 可以很方便实现 ↩

3. 这款插件还同时支持 Windows Phone 以及 iOS 4/5，虽然没啥人用 ↩