H5唤起APP指南(附开源唤端库)

前一段时间在作电流App H5页面，需求中落地页占比较大，落地页承担的职责就是引流。引流有两种形式，同时也是咱们对唤端的定义：引导已下载用户打开APP，引导未下载用户下载APP。

引导已下载用户打开APP，从数据上说用户停留在APP中的时间更多了，是在提升用户粘性；从体验上说，APP体验是要比H5好的。引导未下载用户下载APP，能够增长咱们的用户量。

上面其实分别解释了 什么是唤端 以及 为何要唤端，也就是 3W法则 中的 What 和 Why，那么接下来咱们就要聊一聊 How 了，也就是 如何唤端 。

咱们先来看看常见的唤端方式以及他们适用的场景：

唤端媒介

URL Scheme

来源

咱们的手机上有许多私密信息，联系方式、照片、银行卡信息...咱们不但愿这些信息能够被手机应用随意获取到，信息泄露的危害甚大。因此，如何保证我的信息在设备全部者知情并容许的状况下被使用，是智能设备的核心安全问题。

对此，苹果使用了名为 沙盒 的机制：应用只能访问它声明可能访问的资源。但沙盒也阻碍了应用间合理的信息共享，某种程度上限制了应用的能力。

所以，咱们急须要一个辅助工具来帮助咱们实现应用通讯， URL Scheme 就是这个工具。

URL Scheme 是什么

咱们来看一下 URL 的组成：

[scheme:][//authority][path][?query][#fragment]
复制代码

咱们拿 https://www.baidu.com 来举例，scheme 天然就是 https 了。

就像给服务器资源分配一个 URL，以便咱们去访问它同样，咱们一样也能够给手机APP分配一个特殊格式的 URL，用来访问这个APP或者这个APP中的某个功能(来实现通讯)。APP得有一个标识，好让咱们能够定位到它，它就是 URL 的 Scheme 部分。

经常使用APP的 URL Scheme

APP	微信	支付宝	淘宝	微博	QQ	知乎	短信
URL Scheme	weixin://	alipay://	taobao://	sinaweibo://	mqq://	zhihu://	sms://

URL Scheme 语法

上面表格中都是最简单的用于打开 APP 的 URL Scheme，下面才是咱们经常使用的 URL Scheme 格式：

行为(应用的某个功能)    
            |
scheme://[path][?query]
   |               |
应用标识       功能须要的参数
复制代码

Intent

安卓的原生谷歌浏览器自从 chrome25 版本开始对于唤端功能作了一些变化，URL Scheme 没法再启动Android应用。 例如，经过 iframe 指向 weixin://，即便用户安装了微信也没法打开。因此，APP须要实现谷歌官方提供的 intent: 语法，或者实现让用户经过自定义手势来打开APP，固然这就是题外话了。

Intent 语法

intent:
   HOST/URI-path // Optional host 
   #Intent; 
      package=[string]; 
      action=[string]; 
      category=[string]; 
      component=[string]; 
      scheme=[string]; 
   end;
复制代码

若是用户未安装 APP，则会跳转到系统默认商店。固然，若是你想要指定一个唤起失败的跳转地址，添加下面的字符串在 end; 前就能够了:

S.browser_fallback_url=[encoded_full_url]
复制代码

示例

下面是打开 Zxing 二维码扫描 APP 的 intent。

intent:
   //scan/
   #Intent; 
      package=com.google.zxing.client.android; 
      scheme=zxing; 
   end; 
复制代码

打开这个 APP ，能够经过以下的方式：

<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end"> Take a QR code </a>
复制代码

Universal Link

Universal Link 是什么

Universal Link 是苹果在 WWDC2015 上为 iOS9 引入的新功能，经过传统的 HTTP 连接便可打开 APP。若是用户未安装 APP，则会跳转到该连接所对应的页面。

为何要使用 Universal Link

传统的 Scheme 连接有如下几个痛点：

• 在 ios 上会有确认弹窗提示用户是否打开，对于用户来讲唤端，多出了一步操做。若用户未安装 APP ，也会有一个提示窗，告知咱们 “打不开该网页，由于网址无效”
• 传统 Scheme 跳转没法得知唤端是否成功，Universal Link 唤端失败能够直接打开此连接对应的页面
• Scheme 在微信、微博、QQ浏览器、手百中都已经被禁止使用，使用 Universal Link 能够避开它们的屏蔽（ 截止到 18年8月21日，微信和QQ浏览器已经禁止了 Universal Link，其余主流APP未发现有禁止 ）

如何让 APP 支持 Universal Link

有大量的文章会详细的告诉咱们如何配置，你也能够去看官方文档，我这里简单的写一个12345。

1. 拥有一个支持 https 的域名
2. 在 开发者中心 ，Identifiers 下 AppIDs 找到本身的 App ID，编辑打开 Associated Domains 服务。
3. 打开工程配置中的 Associated Domains ，在其中的 Domains 中填入你想支持的域名，必须以 applinks: 为前缀
4. 配置 apple-app-site-association 文件，文件名必须为 apple-app-site-association ，不带任何后缀
5. 上传该文件到你的 HTTPS 服务器的 根目录 或者 .well-known 目录下

Universal Link 配置中的坑

这里放一下咱们在配置过程当中遇到的坑，固然首先你在配置过程当中必须得严格按照上面的要求去作，尤为是加粗的地方。

1. 跨域问题

   IOS 9.2 之后，必需要触发跨域才能支持 Universal Link 唤端。

   IOS 那边有这样一个判断，若是你要打开的 Universal Link 和 当前页面是同一域名，ios 尊重用户最可能的意图，直接打开连接所对应的页面。若是不在同一域名下，则在你的 APP 中打开连接，也就是执行具体的唤端操做。

2. Universal Link 是空页面

   Universal Link 本质上是个空页面，若是未安装 APP，Universal Link 被当作普通的页面连接，天然会跳到 404 页面，因此咱们须要将它绑定到咱们的中转页或者下载页。

如何调用三种唤端媒介

经过前面的介绍，咱们能够发现，不管是 URL Scheme 仍是 Intent 或者 Universal Link ，他们都算是 URL ，只是 URL Scheme 和 Intent 算是特殊的 URL。因此咱们能够拿使用 URL 的方法来使用它们。

iframe

<iframe src="sinaweibo://qrcode">
复制代码

在只有 URL Scheme 的日子里，iframe 是使用最多的了。由于在未安装 app 的状况下，不会去跳转错误页面。可是 iframe 在各个系统以及各个应用中的兼容问题仍是挺多的，不能所有使用 URL Scheme。

a 标签

<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"">扫一扫</a>
复制代码

前面咱们提到 Intent 协议，官方给出的用例使用的就是使用的 a 标签，因此咱们跟着一块儿用就能够了。

使用过程当中，对于动态生成的 a 标签，使用 dispatch 来模拟触发点击事件，发现不少种 event 传递过去都无效；使用 click() 来模拟触发，部分场景下存在这样的状况，第一次点击事后，回到原先页面，再次点击，点击位置和页面所识别位置有不小的偏移，因此 Intent 协议从 a 标签换成了 window.location。

window.location

URL Scheme 在 ios 9+ 上诸如 safari、UC、QQ浏览器中， iframe 均没法成功唤起 APP，只能经过 window.location 才能成功唤端。

固然，若是咱们的 app 支持 Universal Link，ios 9+ 就用不到 URL Scheme 了。而 Universal Link 在使用过程当中，我发如今 qq 中，不管是 iframe 导航 仍是 a 标签打开 又或者 window.location 都没法成功唤端，一开始我觉得是 qq 和微信同样禁止了 Universal Link 唤端的功能，其实否则，百般试验下，经过 top.location 唤端成功了。

判断唤端是否成功

若是唤端失败（APP 未安装），咱们老是要作一些处理的，能够是跳转下载页，能够是 ios 下跳转 App Store... 可是Js 并不能提供给咱们获取 APP 唤起状态的能力，Android Intent 以及 Universal Link 却是不用担忧，它们俩的自身机制容许它们唤端失败后直接导航至相应的页面，可是 URL Scheme 并不具有这样的能力，因此咱们只能经过一些很 hack 的方式来实现 APP 唤起检测功能。

// 通常状况下是 visibilitychange 
const visibilityChangeProperty = getVisibilityChangeProperty();
const timer = setTimeout(() => {
  const hidden = isPageHidden();
  if (!hidden) {
    cb();
  }
}, timeout);

if (visibilityChangeProperty) {
  document.addEventListener(visibilityChangeProperty, () => {
    clearTimeout(timer);
  });

  return;
}

window.addEventListener('pagehide', () => {
  clearTimeout(timer);
});
复制代码

APP 若是被唤起的话，页面就会进入后台运行，会触发页面的 visibilitychange 事件。若是触发了，则代表页面被成功唤起，及时调用 clearTimeout ，清除页面未隐藏时的失败函数（callback）回调。

固然这个事件是有兼容性的，具体的代码实现时作了事件是否须要添加前缀（好比 -webkit- ）的校验。若是都不兼容，咱们将使用 pagehide 事件来作兜底处理。

没有完美的方案

透过上面的几个点，咱们能够发现，不管是 唤端媒介 、 调用唤端媒介 仍是 判断唤端结果 都没有一个十全十美的方法，咱们在代码层上能作的只是在确保最经常使用的场景（好比 微信、微博、手百 等）唤端无误的状况下，最大化的兼容剩余的场景。

好的，咱们接下来扯一些代码之外的，让咱们的 APP 可以在更多的平台唤起。

• 微信、微博、手百、QQ浏览器等。

  这些应用能阻止唤端是由于它们直接屏蔽掉了 URL Scheme 。接下来可能就有看官疑惑了，微信中是能够打开大众点评的呀，微博里面能够打开优酷呀，那是如何实现的呢？

  它们都各自维护着一个白名单，若是你的域名在白名单内，那这个域名下全部的页面发起的 URL Scheme 就都会被容许。就像微信，若是你是腾讯的“家眷”，你就能够加入白名单了，微信的白名单通常只包含着“家眷”，除此外很难申请到白名单资质。可是微博之类的都是能够联系他们的渠道童鞋进行申请的，只是条件各不相同，好比微博的就是在你的 APP 中添加打开微博的入口，三个月内唤起超过 100w 次，就能够加入白名单了。

• 腾讯应用宝直接打开 APP 的某个功能

  刚刚咱们说到，若是你不是微信的家眷，那你是很难进入白名单的，因此在安卓中咱们通常都是直接打开腾讯应用宝，ios 中 直接打开 App Store。点击腾讯应用宝中的“打开”按钮，能够直接唤起咱们的 APP，可是没法打开 APP 中的某个功能（就是没法打开指定页面）。

  腾讯应用宝对外开放了一个叫作 APP Link 的申请，只要你申请了 APP Link，就能够经过在打开应用宝的时候在应用宝地址后面添加上 &android_schema={your_scheme} ，来打开指定的页面了。

开箱即用的callapp-lib

信息量很大！各类问题得本身趟坑验证！心里很崩溃！

不用愁，已经为你准备好了药方，只需照方抓药便可😏 —— npm 包 callapp-lib

你也能够经过 script 直接加载 cdn 文件：

<script src="https://unpkg.com/callapp-lib"></script>
复制代码

它能在大部分的环境中成功唤端，并且炒鸡简单啊，拿过去就能够用啊，还支持不少扩展功能啊，快来瞅瞅它的 文档 啊~~~

参考文章

1. 浏览器中唤起 native app，不然跳转到应用商城下载
2. h5唤起app
3. URL Schemes 使用详解
4. Android Intents with Chrome
5. 经常使用URL Scheme
6. Universal Link 前端部署采坑记
7. Support Universal Links
8. Universal Link是个骗子

本文首发于：suanmei.github.io/2018/08/23/…