H5页面打开app的一些思考

1. 需求

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

首先，在个人认知中，H5应该是没有能力检测到某一款app是否有安装的（若是有小伙伴知道如何检测，欢迎评论区告诉我，感谢！），因此咱们须要一些技巧来完成判断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，若是用户始终没有点击确认，最后仍是会跳到下载页面，体验很差

4. 一些思考

鉴于上面说到的一些问题，我的以为能够在交互中增长一个“去下载页面”的交互，若是用户没有安装app，必定时间后，首先提示用户“是否没有安装app，点击去下载”相似的按钮，用户点击跳转到下载页面，这样会不会更好呢。