H5打开/下载APP方法汇总

H5 打开/下载 APP 方法汇总

总结了一些在移动端 Web 环境下打开/下载 APP 的常用方法，在做运营活动的时候很有用处。（注：本文讨论的内容不包括使用第三方产品实现）

打开/下载 APP

不论是打开还是下载 APP，其底层实现方案是固定的几种，根据其特性设计相应的交互跳转逻辑是提高用户体验和转化率的主要手段。

打开 APP

scheme URL

最常见的打开 APP 的方式， 当应用安装在设备上之后可以注册一个自定义的“协议”， Web 端通过访问带有这个特殊的协议的 URL 就可以直接跳转到 APP 内，例如在苹果手机上访问 itms-appss://apps.apple.com/au/app/idxxx 就可以打开应用商店。

限制条件：

  1. 一般只可以用在原生浏览器和一些第三方浏览器上唤起 APP，或者在自身 APP 内部唤起原生的功能页面，在第三方应用上可能会被限制而无法打开 APP。（例如微信）
  2. 安卓部分设备/浏览器上第一次触发无法直接打开 APP，会弹窗提示用户确认，用户确认了之后后续可以直接唤起 APP。
  3. 安卓设备上如果没有安装相应的 APP，只会在控制台抛出错误，而 iOS 上会有错误弹窗，这一点非常不友好。

iOS 独占，为了弥补 iOS 上打开没有安装的 APP 报错问题，往往采用该方案来打开 APP。

具体方式是在指定域名下放置一个固定的配置文件，然后 APP 内也需要作相应的配置，往上有许多教程，这里不再过多描述。

主要特点：

  1. 链接形式和一般的 URL 没有区别，如果没有安装 APP 就相当于打开一个正常的网址，不会抛错或者白屏，用户体验较好。
  2. 不仅在原生浏览器中有效，在原生应用中都也能生效，例如短信，记事本。
  3. 在第三方应用中也能生效，但仅限于在 webview 中，例如微信内置浏览器。注意，在微信聊天界面无法直接触发，只能打开一个 webview 之后再次跳转触发。
  4. 经测试该方案有一定几率失效，具体原因不明，猜测可能是由于网络问题导致系统没有获取到对应域名的配置，重装 APP 或者过段时间就会恢复，出现概率不大。
  5. 不支持同域名下服务端的 301 跳转（不同域名不确定能不能跳转），建议使用 js 跳转，例如 location.href = xxx 或者 window.open 方法才能生效。

微信开放平台跳转

运营需求中如果需要在微信场景下打开 APP，由于微信屏蔽了 scheme，在 iOS 设备中可以使用 universal link 的方式进行跳转，而安卓没有很好地原生方法进行跳转。

此时就可以选择使用微信开放平台的能力：https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html

下载 APP

除了第三方例如应用宝/友盟之类的平台，原生实现下载的方式中，安卓可以直接使用 apk 安装包的链接，用户点击后可以直接下载，而 iOS 可以使用 itunes 的链接进行下载。

在 iOS 中，当打开 https://apps.apple.com/au/app/idxxx 应用商店链接时，会自动重定向到 itms-appss://apps.apple.com/au/app/idxxx 然后打开 App Store。

综合解决方案

一键适配打开/下载 APP

要求

用户只需要点击一个按钮，如果用户安装了 APP 则直接打开 APP，没有则下载 APP。

该需求难点在于前端如何判断用户是否安装了 APP 从而实现同一个按钮不同的逻辑。

准备

站点 A：运营活动落地页面

站点 B：universal link

站点 C：运营活动短链

downloadUrl：下载地址，安卓为 apk，iOS 为应用商店

scheme://：APP 自定义协议，可用于直接打开 APP

实现

iOS

iOS 可以使用 universal link 实现一键判断是否安装 APP。

在运营落地页面 A 打开按钮上绑定跳转事件。

1
2
3
button.bind("click", () => {
  location.href = "https://www.b.com/download";
});

B 路由直接配置 302 跳转到下载链接上：

1
2
3
4
5
6
7
app.get("/download", (req, res, next) => {
  const downloadUrl = req.query.downloadUrl;
  res.redirect(
    302,
    downloadUrl || "https://apps.apple.com/au/app/id1030675668"
  );
});

原理是当 universal link 生效时，浏览器是不会实际访问这个 URL 的，一旦访问了这个 URL 这说明系统中没有安装 APP，那么就可以直接走下载流程。

android

安卓没有 universal link，但可以利用其不安装 APP 调用 scheme 也不会报错的特性实现类似的效果。

在运营落地页面 A 打开按钮上绑定跳转事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
button.bind("click", () => {
  var hasApp = true;
  var t = 1000;
  timer = setTimeout(function () {
    if (!hasApp) {
      window.location.href = downloadUrl;
    }
  }, 2000);
  var t1 = Date.now();
  setTimeout(function () {
    // t的时间就是 APP 启动的时间，若 APP 启动了，再次返回页面时 t2 这行代码执行，hasApp 即为 true。反之若APP没有启动即为 false
    var t2 = Date.now();
    hasApp = !(!t1 || t2 - t1 < t + 150);
  }, t);
  window.location.href = "scheme://";
});

原理：利用浏览器在后台时 js 计时器会被暂停的原理，先尝试使用 scheme 唤起 APP，此时若安装了 APP 则会打开 APP，浏览器进入后台，计时器停止。当用户再次回到浏览器时，计时器重新开始计算，由于此时已经跳转过一次 APP，t2 - t1 的时间一定会大于设定的时间间隔。如果用户没有安装 APP，那么浏览器不会进入后台， t2 - t1 的时间应该与延时一致。

注：150ms 用于弥补误差以及异步代码执行顺序。此方案的缺点是如果用户未安装 APP 点击后会有一个 2s 的延迟才会触发下载。

前端
#移动端
H5打开/下载APP方法汇总
https://www.wobushi.top/2022/H5打开-下载APP方法汇总/
作者
Pride Su
发布于
2022年1月4日
许可协议