h5网页唤醒app的方案

最新推荐文章于 2025-11-11 14:00:03 发布

原创

最新推荐文章于 2025-11-11 14:00:03 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html5

本文介绍了在H5页面中唤醒APP的常见方法，包括URL Scheme、Universal Link（iOS）、App Link（Android）和Intent（Android）。在实现过程中，面临微信等平台的限制，需要采取特定策略如使用应用宝链接或微信开放标签。此外，对于不同浏览器的兼容性问题，如华为浏览器，可能需要使用特定唤醒方式。文章推荐了一个开源解决方案：npm包'wakeup-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 后跳转到下载页面。

class openApp {
  constructor(opt) {
    this.URLScheme = opt.URLScheme;
    this.downLoad

最低0.47元/天解锁文章