H5页面打开app的分析是什么样的

1. 需求

前段时间开发项目，遇到了一个需求，简单来说，就是我们 H5 的页面有一个“在App中打开”的按钮，用户点击后，如果用户已经安装app，则直接打开app，如果用户没有安装app，那就跳转到下载app的页面

首先，在我的认知中，H5 应该是没有能力检测到某一款 app 是否有安装的

之后的步骤以安卓手机为例子介绍，目前ios9版本之后的系统不需要我们H5做这些判断app是否安装的流程（ios9 之后可以通过提供一个通用链接（Universal link），做到没有安装 app 提示打开苹果应用商城,安装了 app 则直接跳转打开）

2. 关于 scheme 协议

scheme 协议是一种页面内跳转协议，我们可以通过定制 scheme 协议，跳转到 app 中的想要跳转的各个页面。scheme协议是通过url的形式进行跳转的，所以我们H5也可以通过这个url去跳转到app内指定页面，这就是 H5 打开app的原理。

scheme 的 url 格式类似：[scheme]://[host]/[path]?[query]

3. H5 实现在 App 中打开的两种方法

3.1 单纯使用定时器判断

这种的方法的思路是，首先把我们要跳转的地址设置为与原生App同学一起定义好的scheme的url，之后，设置一个定时器，定时器里执行的逻辑是跳转到下载app页面，这样，如果用户手机没有安装app，就会在一段时间后跳转到下载页面。

核心代码如下：（可以使用iframe完成跳转，但需要考虑iframe是否在ios等设备中被允许）

const schemeUrl = 'xxx'
const downloadUrl = 'XXX'
const wait = 500
try {
   location = schemeUrl
   setTimeout(() => {
       location = downloadUrl
   }, wait)
} catch (e) {
   console.error(e)
}

存在的问题

上述实现方案的问题是，即使成功跳转到App，原先的H5页面也会在定时时间后，跳转到下载页面，这样体验很不好

3.2 使用 window 的 hidden 属性判断

这个方法的思路是，如果成功唤起了app，我们的 H5 页面被置于后台，window.hidden属性会变为true,可以通过这个属性变化来判断app有没有打开，没打开就跳转到下载页面，当然这里也用到定时器

核心代码如下：

function checkOutApp() {
   const schemeUrl = 'xxx'
   const downloadUrl = 'XXX'
   const wait = 1000
   // 是否进入后台
   const hidden = false
   location = schemeUrl
   // 如果一定时间内，页面没有隐藏，则跳转到下载页
   setTimeout(() => {
       if (!hidden) {
           location = downloadUrl
       }
   }, wait)
   // 页面可见性变化事件
   document.addEventListener("visibilitychange", function(){
       if (document.hidden) {
           hidden = true
       }
   });
}

目前一些安卓浏览器，在 app 存在时，会首先跳出一个确认框，询问用户是否打开 app，只有用户同意时，才会跳转 app，如果用户始终没有点击确认，最后还是会跳到下载页面，体验不好。