H5 唤起 APP 及下载

一般 H5 常见的引导页，为已安装 app 的用户唤起 app，未安装 app 的用户引导下载 app

一、简介

1.1 功能

运营常见的功能，通过短信投放短链接，引导流量。

1.2 基本流程

（1）点击短链接，在默认浏览器打开 H5 页面
（2）页面初始化时，唤起 app
（3）如果用户未安装 app，此时有两种做法，一种是自动为用户跳转 app 下载地址，一种是在页面提供点击按钮，引动用户点击触发下载。

PS：
自动跳转下载方案：未找到，可以去怼产品了
提供点击按钮方案：天猫、淘宝、美团外卖

二、实现

首先简单罗列一下美团、淘宝等引导页的实现方式。

2.1 唤起 app

IOS端
统一使用 location.href 来跳转 scheme 协议地址

Android端
美团
1、如果是 chrome 浏览器，使用 a标签以及 intent 协议地址
2、如果是其他情况下，使用 iframe 标签以及 scheme 协议地址

天猫淘宝
1、在 Android 下也使用 location.href

PS：
微信 webview 环境下，可以直接去下载了，目前不支持唤起外部 app

2.2 下载 app

自动跳转下载：
由于无法监听是否已安装 app，也无法监听是否成功唤起 app。
目前的做法是在唤起 app 后的一定时间（一般是3s），进行下载跳转。

按钮点击下载：
大家都懂，不废话了

2.3 下载企业版 app

某些情况下，我们 IOS 被下架了，这时为了不影响用户（或者说运营的KPI），需要引导用户去下载企业版的 app。

下载链接：itms-services://?action=download-manifest&url= + plist文件地址

用于企业版 IOS 需要用户在手机系统设置中添加信任，因此最好有一个单独的引导安装教程页面对用户进行指导。

demo.png

PS：
企业版IOS，每个包允许的下载安装数量上限为 10000，因此如果是流量较大的活动，需要客户端的同学多上传一些包。

另外，线上在运行的企业版IOS偶尔会被苹果强制过期，需要更换新的包供用户下载。如果需要，可以找服务端的同学，做一下自动更新包地址的功能。

三、自己的代码实现以及遇到的一些问题

3.1 代码实现

模仿淘宝天猫的方式，统一使用 location.href

// 自动唤起 app
handleAutoWakeApp() {
    // 微信直接去下载
    if (isWx()) {
      this.download();
      return;
    }

    let scheme = '';
       
    if (isIos()) { scheme = this.scheme_IOS; }

    if (isAndroid()) { scheme = this.scheme_Adr; }

    setTimeout(() => {
      window.location.href = scheme;
    }, 100);
},

3.2 遇到的问题

（1）初始化唤起 app，在部分安卓机上会出现没有唤起弹窗或者唤起弹窗瞬间出现消失的情况。
原因：暂未找到
解决方案：setTimeout 100 毫米后进行 app 唤起，对用户体验的影响也不大。

（2）跳转 appstore 失败，提示“Safari 浏览器打不开该网页，因为网址无效”
原因：在调用 location.href = appstore 前使用了 async await 方法调用接口并耗时 1s以上。
解决方案：分离接口

参考文献，H5唤起APP指南(附开源唤端库)

参考文献，H5唤醒APP