欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈Html5页面打开app的一些思考

程序员文章站 2022-09-26 22:08:25
这篇文章主要介绍了浅谈Html5页面打开app的一些思考,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 20-03-30...

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,点击去下载”类似的按钮,用户点击跳转到下载页面,这样会不会更好呢。

到此这篇关于浅谈html5页面打开app的一些思考的文章就介绍到这了,更多相关html5打开app内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!