浅谈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.0新属性效果在ie下的解决方案
May 10 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
第七节--类的静态成员
2006/11/16 PHP
谈谈新手如何学习PHP
2006/12/23 PHP
joomla组件开发入门教程
2016/05/04 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
pycharm安装图文教程
2017/05/02 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python实现IOU计算案例
2020/04/12 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
化工专业推荐信范文
2013/11/28 职场文书
《三峡》教学反思
2014/03/01 职场文书
《春笋》教学反思
2014/04/15 职场文书
任命书格式
2014/06/05 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
神秘岛读书笔记
2015/07/01 职场文书
创业计划书之酒吧
2019/12/02 职场文书
Python使用openpyxl模块处理Excel文件
2022/06/05 Python