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


Posted in HTML / CSS onMarch 30, 2020

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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 #HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 #HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 #HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 #HTML / CSS
html2canvas截图空白问题的解决
Mar 24 #HTML / CSS
html5视频常用API接口的实战示例
Mar 20 #HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 #HTML / CSS
You might like
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Python操作Jira库常用方法解析
2020/04/10 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
新学期标语
2014/06/30 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python