H5页面跳转App方式以及判断是否唤起成功

H5页面跳转或者唤起APP是一种比较常见的需求

我们平时最常见的场景就是，在浏览器里看见广告，点击了广告，他判断你你手机装了对应APP，那他就会打开那个APP，如果没安装，他会帮你跳转到应用商店去下载

今天介绍一下唤端技术的其中一种实现方式：URL schema

这是一种比较通用的技术，各平台的兼容性也很好，他一般由协议名、路径、参数组成。这个一般是由ios或者andriod开发的同学提供，我们前端同学拿到这个schema就可以来打开app或app内的某个页面了。

使用方式：

window.location.href = 'schema url地址'

就是这么简单，但是也有一个缺陷，未提供回调方法，我们无法判断是否成功唤起了app

目前使用比较普遍判断的是否成功的方法是监听页面的可见属性‘visibilitychange’

如果跳转成功，那么h5页面也就被隐藏了

window.addEventListener('visibilitychange', () => {
    if (document.hidden) {
       // 成功唤起APP
    }
})

然后添加一个定时器判断在一定时间内是否页面隐藏了，如果超过一定时间未隐藏，则重新跳转到指定的应用商店地址

// 先判断是否能唤起app
      this.timer = setTimeout(() => {
        const phoneBrand = getPhoneBrand()
        switch (phoneBrand) {
          case 'iphone':
            window.location.href = 
            break
          case 'huawei':
            window.location.href = 
            break
          case 'xiaomi':
            window.location.href = 
            break
          case 'oppo':
            window.location.href = 
            break
          case 'vivo':
            window.location.href = 
            break
          default:
            window.location.href = 
            break
        }
      }, 1000)