h5网页唤醒app的方案

背景

我支撑的业务线主要是做广告引流业务的，经常会需要将用户从 h5 落地页内引流到 app 内部，这种行为在广告营销里对用户增长十分重要。关于这种场景的实现跟我们安卓和 ios 开发也讨论了一下，整理了一下常见的解决方案。

自实现

URL Scheme

URL Scheme这种方式较为主流，各平台兼容性也很好，URL Scheme一般由协议名、路径、参数组成。我们可以从安卓和 ios 开发那里得到对应 app 的 scheme。URL Scheme其实就是一个 url，我们通过这种方式唤醒 app 的话和在 h5 内打开一个 url 是一样的，location.href、a标签、iframe的方式都可以。

[协议名]://[路径]?[参数] 

class openApp {
  constructor(opt) {
    this.URLScheme = opt.URLScheme;
    this.downLoadUrl = opt.downLoadUrl;
  }
  open() {
    window.location.href = this.URLScheme;
  }
} 

我们还需要在用户未下载时打开 app 的下载页，而这种方式我们获取不到用户是否真的打开了 app,但是我们可以发现，如果打开 app 成功的话当前页面就被隐藏了，所以我们可以通过监听页面可见属性，来判断有没有唤醒 app。而唤醒 app 也不是实时的，会有一个启动过程，所以需要大概 3s 后跳转到下载页面。