您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

H5页面一键拉起App,并直达指定页面

时间:2019-12-02 13:09:10  来源:  作者:

在这个流量为王的互联网背景下,移动端的H5页面显然在导流上承担着重要作用,在H5页面上,我们对引流的需求有两种:

  • 一是引导已下载用户从H5页面唤醒App并直达指定场景
  • 二是引导未下载用户从H5页面下载App,首次打开App时直达指定场景

从运营角度来看,引导已下载用户打开App,能提高用户粘性和活跃度,而用户在App内的产品体验自然也比H5页面要好;引导未下载用户下载App并进入指定页面,显然能给用户更好的产品初体验。

H5页面一键拉起App,并直达指定页面

 

这里其实就解释了我们做H5唤醒App并直达指定页面的必要性。

涉及哪些要素?

唤醒App这件事,在不同平台要采用不同的方法,主要是这三个:

  • URL Scheme
  • Universal Link
  • Android App Links

1、URL Scheme

URL Scheme是IOS、Android都兼容的机制,只需要原生App开发时注册Scheme即可,用户点击此类链接时,会自动唤醒App,并借助URL Router机制跳转到指定页面。

  • <scheme name> : <hierarchical part> [ ? <query> ] [ # <fragment> ]
  • <scheme name>:是scheme的名称,代表着协议名称。
  • <hierarchical part>:它包含 authority 和 path。
  • <query>:可选项目,隔开或&隔开的键值对<key>=<value>
  • <fragmentg> :可选项目包,其它额外的标识信息
H5页面一键拉起App,并直达指定页面

 

尽管URL Scheme兼容性高,但却存在许多限制,比如:

  • 国内各个厂商浏览器差异很大,当要被唤醒的目标App未安装时,这个链接很容易出错。
  • 当注册有多个Scheme相同的时候,目前是没有办法区分的。
  • 不支持从其他App中的UIWebView中跳转到目标App。
  • 被部分主流平台禁止,微信、微博、QQ浏览器、手机百度中都已经被禁止使用。

正是由于这些限制的存在,苹果和安卓都不约而同发布了自己的第二套方案:iOS的Universal Link、Android的App Links。

2、Universal Link

Universal Link是iOS9后苹果推出的通用链接技术,能够方便的通过一个https链接来打开App指定页面,不需要额外的判断,如果没有安装App,可以跳转到自定义地址。

相对Scheme的优势在于,Universal Link是一个Web Link,因此少了很多麻烦:

  • 当用户已安装该App时,不需要加载任何页面,能够立即唤醒App,用户未安装App,则跳去对应的web link(自定义页面)。
  • Universal Links支持从其他App中的UIWebView中跳转到目标app。
  • 提供Universal Link给别的App进行App间的交流,然而对方并不能够用这个方法去检测你的App是否被安装,具有比较好的隐私性。
  • 绝大多数平台都支持Universal Link,微信7.0.5版本也解除了对Universal Link的限制,同时也能被搜索引擎索引。

3、App Links

Android M以上版本可以通过App Links,让用户在点击一个链接时跳转到App的指定页面,前提是这个App已经安装并经过验证。App Links的最大的作用,就是可以避免从页面唤醒App时出现的选择浏览器选项框,前提是必须注册相应的Scheme,就可以实现直接打开关联的App。

实际上App Links和Universal Links差异不大,但相对来说有不同的限制:

  • App links在国内的支持还不够,部分安卓浏览器并不支持跳转至App,而是直接在浏览器上打开对应页面。
  • 系统询问是否打开对应App时,假如用户选择“取消”并且选中了“记住此操作”,那么用户以后就无法再跳转App。

几个方案的缺陷

这几种方式无论哪种都无法解决这几个问题:

  • 当用户未安装目标App时,无法保留用户停留的上下文,也就是说,用户下载完App后,无法在首次打开App时还原指定页面。
  • Web目前无法监听App是否已安装,因此这几个方案都需要一些其他方法兼容唤醒App,或者跳转下载页面。

那么怎样实现用户安装App后进入指定页面呢?

众所周知,苹果出于用户隐私的保护,设置了名为沙盒的机制:应用只能访问它声明可以访问的资源,但沙盒也阻碍了应用间合理的信息共享。

但也不是完全没办法,比如使用模糊匹配,尽可能收集设备的特征,将Web和App上的信息点配合算法做一个匹配是可以做到的,但准确率和成功率就取决于算法本身。如果App本身业务需求不高,那么低精度的方案也可以满足,但如果业务上需要一个能做到一对一精准匹配的方案,那么精准度不够高显然会影响业务的开展。

第三方服务

如果嫌精准度不够高或者实现难度太大的话,可以交给专业的第三方去做,毕竟这几项技术是基于系统平台的,Android 及 iOS 每个系统版本的迭代后,配置方式都会有新的变化,且安卓机型众多,浏览器众多等也会导致出现兼容问题,开发者自行研发的话,资源配置以及系统更新后的维护成本是比较高的,还要考虑各种各样的跳转场景问题。

直接采用第三方SDK的好处就是,资源配置、兼容方面的适配这些事情都可以交给它们去做,毕竟这些供应商本身就是专业做这项服务的,它们提供的服务在稳定性和精准度方面也是经受过市场检验的,至少在精准匹配方面,有些已经能在邀请分享方面做到一对一匹配,集成SDK也花不了多少时间,十几分钟就可以搞定。

国内外提供这项技术的第三方服务商:

国内有:openinstall

国外有:Branch



Tags:H5   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  Tags: H5  点击:(90)  评论:(0)  加入收藏
首先明确几个概念1. W3C:指万维网联盟(World Wide Web Consortium),是一个国际的标准的制定机构。2. H5(HTML5,HyperText Markup Language 5的缩写),HTML5 是由W3C制定的新HTML标...【详细内容】
2021-07-06  Tags: H5  点击:(153)  评论:(0)  加入收藏
Hybrid APP指的是半原生半Web的混合类App。需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。 原生是Native APP,H5就是Web App在Hybrid 当中,如...【详细内容】
2021-04-28  Tags: H5  点击:(289)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18  Tags: H5  点击:(229)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29  Tags: H5  点击:(165)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12  Tags: H5  点击:(393)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10  Tags: H5  点击:(109)  评论:(0)  加入收藏
上一篇主要是对新项目的一些介绍和对技术栈升级的思考,之前也提到,既然是新项目,从0开始,没有历史包袱,应该可以放手玩了。但考虑到如何能让老项目受益,并且从技术架构的普适性去...【详细内容】
2020-10-23  Tags: H5  点击:(87)  评论:(0)  加入收藏
本文主要讲述的是采用浏览器来识别二维码 / 条形码等,并对其解析得到相应的结果。还有一个目的就是为了验证 iPhone 是否无法自动开启摄像头进行扫描。需求也非常简单,就是用...【详细内容】
2020-10-20  Tags: H5  点击:(1189)  评论:(0)  加入收藏
一、说明1. JSMpeg简介JSMpeg是一个JavaScript编写的视频解码器,支持MPEG1视频、MP2音频解码,WebGL&Canvas2D渲染、WebAudio音频输出。 JSMpeg可以通过Ajax加载静态视频、或...【详细内容】
2020-09-02  Tags: H5  点击:(160)  评论:(0)  加入收藏
▌简易百科推荐
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  鳌拜的表哥熬夜    Tags:HTML5   点击:(343)  评论:(0)  加入收藏
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  趣谈前端    Tags:H5编辑器   点击:(90)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18      Tags:H5   点击:(229)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19      Tags:HTML5   点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20      Tags:HTML5   点击:(179)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29      Tags:H5应用   点击:(165)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24      Tags:XGPlayer   点击:(199)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12      Tags:H5DS   点击:(393)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12      Tags:HTML5   点击:(113)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10      Tags:app开发   点击:(109)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条