[贝聊科技]网页端「应用跳转」技术实现演变

本文作者：Mr.Luo ，贝聊前端经理。本文同时发布于作者 个人博客 。

由于网页传播的便捷性，从网页向APP导流几乎是所有APP厂商都会采用的推广手段，具体来说就是在网页上提供一些触发点（例如按钮、链接），用于跳转到APP。

应用跳转

01.URL Scheme

早期的应用跳转只能通过「URL Scheme」实现。例如通过下面这个「URL Scheme」，就可以跳转到「贝聊APP」：

ibeiliao://

在网页中调用「URL Scheme」也有多种方法：

<!-- 方案一：链接跳转 -->
<a href="ibeiliao://">打开贝聊</a><!-- 方案二：JS跳转 -->
<a href="javascript:location.href='ibeiliao://'">打开贝聊</a><!-- 方案三：iframe调用 -->
<span id="open-ibeiliao">打开贝聊</span>
<script>
document.getElementById('open-ibeiliao').onclick = function() {var iframe = document.createElement('iframe');iframe.src = 'ibeiliao://';iframe.style.display = 'none';document.body.appendChild(iframe);setTimeout(function(){document.body.removeChild(iframe);}, 3000);
};
</script>

原本「方案三」是最受欢迎的，因为在没有安装对应APP的情况下，另外两个方案在iOS Safari下都会出现「浏览器无法打开网页」的弹框。

没有安装APP时的弹框

然而，「方案三」是最先“阵亡”的，最早是在iOS 9中的Safari失效，后来在某些安卓机的浏览器也不行了，所以目前只能用「方案一」和「方案二」，而iOS Safari下的那个弹框也就无法避免了。

理论上，「URL Scheme」可以在任何浏览器以及APP中的WebView使用，但实际上却是被大量APP封杀，几乎是只能在浏览器类的APP中使用。因为大部分厂商都不希望用户离开自己的APP。

02.打开还是下载？

前文提到了一个问题，万一设备上没有安装要跳转的APP，那怎么办呢？正常来说，应该要跳到该APP的下载页。然而，这里面最大的难题是：网页端基本上无法获知当前设备是否已安装某个APP（之所以加上“基本”二字，是因为网页在微信内运行时，可通过调用微信内部的JS API实现此功能，但该API只对腾讯的“关系户”开放）。

后来，人们想出了一种解决方案：在使用「URL Scheme」跳转的同时，通过定时器在一定时间之后跳转到下载页。倘若设备上有安装APP，就会跳到APP，否则在一定时间后就会跳到下载页。

<span id="open-ibeiliao">打开贝聊</span>
<script>
document.getElementById('open-ibeiliao').onclick = function() {window.location.href = 'ibeiliao://';setTimeout(function() {window.location.href = 'https://mobile.ibeiliao.com/download';}, 1000);
};
</script>

这么做基本上是达到了目的，但是有两处体验问题仍然无法解决：

  • 即便已经安装APP，浏览器也会跳到下载页。用户从APP返回浏览器时会发现莫名其妙地出现了下载页。
  • 在没有安装APP的情况下，iOS Safari的弹框还是无法避免，但是跳到下载页之后会消失。

03.应对封杀

前文有提及，「URL Scheme」被大量APP封杀，其中就包括常用的QQ和微信，但是没有谁会放弃这两个重要渠道，所以还是得想辙。

最无奈的解决方案就是提示用户「用浏览器打开网页」，继而让用户在浏览器中打开APP。然而，这对非IT人士来说，操作起来还是有一点繁杂的。

提示用户用浏览器打开

另一种好一点的做法是，先跳转到腾讯的「应用宝」，「应用宝」会根据设备是否已装APP去执行打开或者下载操作。当然，这种做法需要把APP传到「应用宝」，而且只对腾讯系的APP有效；对于其他APP，仍然只能提示「用浏览器打开网页」。

应用宝

最后一个解决方案就是下文要讲述的「Universal Links」。

04.Universal Links

「Universal links」，中文翻译为「通用链接」，从iOS 9开始支持，仅通过普通的https请求就能跳转到指定的应用。

开发者可以把应用的下载页地址配置为一条通用链接，这样，用户在进入下载页时：

  • 如果设备上已安装APP，则进入APP；
  • 如果设备上没有安装APP，则进入下载页，再也没有那个烦人的弹框了。

最重要的是，通过「通用链接」，即使在微信、QQ内，也能如丝般顺滑地跳到自家APP。大家都以为这是系统级别的处理，无法被任何APP封杀，直到不久前的一天，它在微信下跪了。。。根据某大神的分析，苹果还是给「通用链接」留下了“后门”可以让其失效。

而在Android系统下，也有类似的技术，即App Links，从Android M开始支持。但由于国内安卓版本碎片化比较严重，所以应用还不怎么广泛。

05.小结

讲到这，先小结一下应用跳转的实现方案。

  • Android:
    • 微信、QQ：「URL Scheme」不可用，可通过「应用宝」中转。
    • 浏览器：「URL Scheme」可用。
    • 其他APP：提示用浏览器打开。
  • iOS>=9（支持「Universal Links」）：
    • 微信：「URL Scheme」和「Universal Links」均不可用，通过「应用宝」中转。
    • QQ：「Universal Links」尚且可用。
    • QQ浏览器：「Universal Links」不可用，但「URL Scheme」可用。
    • 其他APP：「Universal Links」可用。
  • iOS<9（不支持「Universal Links」）：
    • 微信、QQ：「URL Scheme」不可用，提示用浏览器打开。
    • 各浏览器：「URL Scheme」可用。
    • 其他APP：提示用浏览器打开。

要注意的是，所谓的「其他APP」是无法准确检测的，只能根据APP在User Agent中增加的特殊关键字（例如新浪微博的「Weibo」）逐个判断。

06.打开APP的指定页

需求是无止境的，能从网页进入APP只是开始，下一步就是跳转到指定页面。这里所说的指定页面，可能是原生的页面，也可能是某个网页。这个过程的关键在于打开APP时如何把页面路径传过去。

先从「URL Scheme」说起。我们可以给「URL Scheme」加上路径和参数，例如：

my-app://open?url=https:/%2Fcn.bing.com/

APP端只要解析参数，继而打开对应的页面即可。对于「Universal Links」来说，也是同理：

https://my-app.com/download?url=https://cn.bing.com/

正如上文所说，「URL Scheme」和「Universal Links」都被微信封杀了。如果通过「应用宝」中转，上述url参数是无法传到APP的。在这种情况下，就得寻找一个微信WebView和APP都可以共同读写的空间来传递数据，例如剪贴板。下面这个JS函数可以实现对剪贴板的写入：

function copyToClipboard(content) {var textarea = document.createElement('textarea');textarea.style.position = 'absolute';textarea.style.left = '-1000px';textarea.style.top = '-1000px';textarea.value = content;textarea.readOnly = true;document.body.appendChild(textarea);textarea.select();textarea.setSelectionRange(0, textarea.value.length);var result = false;try {result = document.execCommand('copy');} catch (e) {}document.body.removeChild(textarea);textarea = null;return result;
}

跳转到APP的应用宝地址之前，把要打开的页面地址以约定好的格式写入剪贴板：

copyToClipboard('my-app:open?url=https://cn.bing.com/');
location.href = 'my-app的应用宝地址';

通过「应用宝」打开APP后，APP端按照约定格式解析剪贴板内容打开对应的页面即可。

这里有一个细节：为什么不直接以完整的「my-app://open?url=」写入剪贴板，而要特意去掉「//」？这是因为在Android系统下，某些浏览器APP会把剪贴板中的「URL Scheme」识别为网址，然后提示用户是否打开。对于用户来说，点击「打开APP」出现这个提示，就有点莫名其妙了。

当然，「剪贴板方案」也存在一些问题：

  • 会覆盖用户的剪贴板内容。
  • 部分Android系统的原生浏览器不支持通过JS访问剪贴板，不过这不是问题，因为在浏览器中大可以用「URL Scheme」。

如果不想用「剪贴板方案」，还是可以提示用户用浏览器打开页面的。具体如何取舍，就看各自产品经理的决定了。


更多专业前端知识，请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/366391.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

常见Java错误的十大列表（前100名！）

常见Java错误的十大列表（前100名！）

前10名名单非常受欢迎&#xff0c;有趣且内容丰富。 但是有很多&#xff01; 如何选择合适的&#xff1f; 这是一个元前10名列表&#xff0c;可帮助您找到前10名的前10名列表。 在更令人讨厌的笔记上&#xff1a; SELECT TOP 10 mistake FROM source1 UNION ALL SELECT TOP 10…
阅读更多...
Ubuntu 16.04 下octave的使用入门

Ubuntu 16.04 下octave的使用入门

SciLab和octave是开源的且免费的矩阵计算工具&#xff0c;二者都有希望成为矩阵计算的新宠。相比之下&#xff0c; octave与MatLab的兼容性更高。octave遵循GPL协议&#xff08;GNU General Public License&#xff09;&#xff0c;用户可以单独发行octave或者包含在其产品中发…
阅读更多...
hydra mysql 爆破_Hydra（爆破神器）使用方法

hydra mysql 爆破_Hydra（爆破神器）使用方法

文本框 textarea 动态显示行数(简单文本编辑器)工作需求做一个文本编辑器简单的. 右边输入文字,左边会显示相应的代码行.清空也会变为1. 废话不多说上代码,自己理解. python中set使用In [2]: a set() # 常用操作1 In [3]: a Out[3]: set() In [4]: type(a) Out[4]: set In [5]…
阅读更多...
消除switch语句以获得更好的代码结构

消除switch语句以获得更好的代码结构

消除switch语句以获得更好的代码结构 代码演化1&#xff1a;纯switch function counter(state 0, action) {switch (action.type) {case INCREMENT:return state 1case DECREMENT:return state - 1default:return state} }用三元运算符代替 const counter (state 0, ac…
阅读更多...
HTTP请求中POST与GET的区别

HTTP请求中POST与GET的区别

一、原理区别 一般我们在浏览器输入一个网址访问网站都是GET请求;在FORM表单中&#xff0c;可以通过设置Method指定提交方式为GET或者POST提交方式&#xff0c;默认为GET提交方式。 HTTP定义了与服务器交互的不同方法&#xff0c;其中最基本的几种&#xff1a;GET&#xff0c;P…
阅读更多...
Linux服务器配置---安装vsftpd

Linux服务器配置---安装vsftpd

安装vsftpd 大多数Linux系统都使用vsftpd&#xff0c;因此这里我们也安装vsftpd 1、安装vsftpd [rootlocalhost phpMyAdmin]# yum install -y vsftpd Loaded plugins: fastestmirror, refresh-packagekit, security Installed: vsftpd.i686 0:2.2.2-11.el6_4.1 …
阅读更多...
Java方法中的参数太多，第1部分：自定义类型

Java方法中的参数太多，第1部分：自定义类型

我认为构造函数和方法中冗长的参数列表是Java开发中的另一个“ 危险信号 ”&#xff0c;就逻辑和功能而言&#xff0c;它们不一定是“错误的”&#xff0c;但通常暗示当前或将来出现错误的可能性很高。 在一小部分帖子中&#xff0c;我介绍了一些可用于减少方法或构造函数的参数…
阅读更多...
mysql怎么制作柱状图_从数据库中取出最近三十天的数据并生成柱状图

mysql怎么制作柱状图_从数据库中取出最近三十天的数据并生成柱状图

在终端用cd 命令进入文件目录说明&#xff1a;此处例子我是拿项目中的一个例子讲解的。1、新建一个项目 &#xff1a;用终端输入&#xff1a;zf create project Airline 格式&#xff1a;zf create action project project-name 备注&#xff1a;这些格式可以在终端输入zf 查看…
阅读更多...
关于ES6的Promise

关于ES6的Promise

JavaScript的异步处理 提到JavaScript的异步处理&#xff0c;也许很多人和我一样想到利用回调函数。 例如&#xff1a; firstAsync(function(data){//处理得到的 data 数据//....secondAsync(function(data2){//处理得到的 data2 数据//....thirdAsync(function(data3){//处…
阅读更多...
为hexo博客添加基于gitment评论功能

为hexo博客添加基于gitment评论功能

关于gitment gitment其实就是利用你的代码仓库的Issues&#xff0c;来实现评论。每一篇文章对应该代码仓库中的 一个Issues,Issues中的评论对应你的博客每篇文章中的评论。如果你是用github的博客的话 用起来将会十分的方便。 注册github应用 首先需要在这注册一个OAuth Applic…
阅读更多...
[转]我是如何走进黑客世界的？

[转]我是如何走进黑客世界的？

*本文原创作者&#xff1a;MyselfExplorer&#xff1b;翻译编辑&#xff1a;楼兰&#xff0c;本文属FreeBuf原创奖励计划&#xff0c;未经许可禁止转载 我想给你一把打开这扇门的钥匙&#xff0c;而你要做的便是静静的聆听接下来的故事。挖掘 0day 一般需要掌握fuzzing&#xf…
阅读更多...
使用Servlet 3.0，Redis / Jedis和CDI的简单CRUD –第1部分

使用Servlet 3.0，Redis / Jedis和CDI的简单CRUD –第1部分

在这篇文章中&#xff0c;我们将构建一个简单的用户界面。 数据将存储在Redis中。 为了与Redis交互&#xff0c;我们将使用Jedis库。 CDI用于Depedency Injection&#xff0c;而Servlet 3.0用于视图。 让我们从Redis / Jedis部分开始。 您可以在这些 帖子中找到有关Redis和Jed…
阅读更多...
Socket.io 深入理解

Socket.io 深入理解

最近在做项目优化工作时&#xff0c;用到了Socket.io , Socket.io 文档比较少&#xff0c; 结合官网介绍以及自己在项目开发中的摸索&#xff0c;总结如下内容&#xff1b; Socket.io将Websocket和轮询 &#xff08;Polling&#xff09;机制以及其它的实时通信方式封装成了通用…
阅读更多...
python填表_小Python填表得到d

python填表_小Python填表得到d

我正在尝试使用Scrapy从网站自动下载数据。在我要做的是&#xff1a;使用我的凭据登录网站通过在“RIC”行中写入代码并选择感兴趣的时段来选择我想要的数据单击“获取数据”后&#xff0c;将生成.csv文件&#xff0c;我可以从“下载/”url下载该文件&#xff0c;其中我的所有文…
阅读更多...
如何使用异步Servlet来提高性能

如何使用异步Servlet来提高性能

这篇文章将描述一种性能优化技术&#xff0c;适用于与现代Web应用程序相关的常见问题。 如今的应用程序不再只是被动地等待浏览器发起请求&#xff0c;而是希望自己开始通信。 一个典型的示例可能涉及聊天应用程序&#xff0c;拍卖行等–共同点是以下事实&#xff1a;大多数时间…
阅读更多...
我理解中的“大前端”/“大无线”

我理解中的“大前端”/“大无线”

本文内容较长&#xff0c;大概需要15分钟时间阅读。 内容包含五部分&#xff1a;前言&#xff0c;NodeJS职能变化&#xff0c;ReactNative的大规模应用&#xff0c;专门的架构组职能&#xff0c;总结。主要是介绍我所在团队最近的一些变化和思考。 更多信息可以加入我的小密圈关…
阅读更多...
STM32之Systick(系统时钟滴答定时器)

STM32之Systick(系统时钟滴答定时器)

systick定时器有两个可选的时钟源&#xff0c;一个是外部时钟源&#xff08;STCLK&#xff0c;等于HCLK/8&#xff09;&#xff0c;另一个是内核时钟&#xff08;FCLK&#xff0c;等于HCLK&#xff09;。假若你选择内核时钟&#xff0c;并将HCLK频率设置为72MHz的话&#xff0c…
阅读更多...
Dirichlet分布

Dirichlet分布

1.预备知识 Beta分布函数是一种定义在实数区间[0,1]的特殊函数&#xff0c;它是二项式分布的共轭分布&#xff1b;与Beta分布相同&#xff0c;Dirichlet分布也是定义在实数区间[0,1]的概率度量函数&#xff0c;Dirichlet分布是多项式分布的共轭分布&#xff0c;Dirichlet分布的…
阅读更多...
python编程制作接金币游戏_pygame学习笔记（6）：完成一个简单的游戏

python编程制作接金币游戏_pygame学习笔记（6）：完成一个简单的游戏

学了这么长时间的Pygame&#xff0c;一直想写个游戏实战一下。看起来很简单的游戏&#xff0c;写其来怎么这么难。最初想写个俄罗斯方块&#xff0c;想了很长时间如何实现&#xff0c;想来想去&#xff0c;也没写出来&#xff0c;于是干脆下载别人的代码来读。后来&#xff0c;…
阅读更多...
Spring：使基于Java的配置更加优雅

Spring：使基于Java的配置更加优雅

大家好&#xff0c;我很久没有写新文章了。 积累了很多资料&#xff0c;需要在不久的将来在我的博客中发布。 但是现在我想谈谈Spring MVC应用程序配置。 确切地说&#xff0c;我想谈谈基于Java的Spring配置。 尽管在3.0版本中引入了基于Spring Java的配置&#xff0c;但是许多…
阅读更多...
最新文章

Copyright @ 2022~2023