web页面中如何唤起打开APP
网上看到这篇文章,写的很清楚,这里转载记录一下。H5唤起APP指南 | 拾壹小筑
1.前言
前一段时间在做电流App H5页面,需求中落地页占比较大,落地页承担的职责就是引流。引流有两种形式,同时也是我们对唤端的定义:引导已下载用户打开APP,引导未下载用户下载APP。
引导已下载用户打开APP,从数据上说用户停留在APP中的时间更多了,是在提高用户粘性;从体验上说,APP体验是要比H5好的。引导未下载用户下载APP,可以增加我们的用户量。
上面其实分别解释了 什么是唤端 以及 为什么要唤端,也就是 3W法则 中的 What 和 Why,那么接下来我们就要聊一聊 How 了,也就是 如何唤端 。
我们先来看看常见的唤端方式以及他们适用的场景:
2. 唤端媒介
2.1 URL Scheme
来源
我们的手机上有许多私密信息,联系方式、照片、银行卡信息…我们不希望这些信息可以被手机应用随意获取到,信息泄露的危害甚大。所以,如何保证个人信息在设备所有者知情并允许的情况下被使用,是智能设备的核心安全问题。
对此,苹果使用了名为 沙盒 的机制:应用只能访问它声明可能访问的资源。但沙盒也阻碍了应用间合理的信息共享,某种程度上限制了应用的能力。
因此,我们急需要一个辅助工具来帮助我们实现应用通信, URL Scheme 就是这个工具。
URL Scheme 是什么
我们来看一下 URL 的组成:
[scheme:][//authority][path][?query][#fragment]
我们拿 https://www.baidu.com
来举例,scheme 自然就是 https
了。
就像给服务器资源分配一个 URL,以便我们去访问它一样,我们同样也可以给手机APP分配一个特殊格式的 URL,用来访问这个APP或者这个APP中的某个功能(来实现通信)。APP得有一个标识,好让我们可以定位到它,它就是 URL 的 Scheme 部分。
常用APP的 URL Scheme
APP | 微信 | 支付宝 | 淘宝 | 微博 | 知乎 | 短信 | |
---|---|---|---|---|---|---|---|
URL Scheme | weixin:// | alipay:// | taobao:// | sinaweibo:// | mqq:// | zhihu:// | sms:// |
URL Scheme 语法
上面表格中都是最简单的用于打开 APP 的 URL Scheme,下面才是我们常用的 URL Scheme 格式:
行为(应用的某个功能) |
scheme://[path][?query]| |
应用标识 功能需要的参数
Intent
安卓的原生谷歌浏览器自从 chrome25 版本开始对于唤端功能做了一些变化,URL Scheme 无法再启动Android应用。 例如,通过 iframe 指向 weixin://
,即使用户安装了微信也无法打开。所以,APP需要实现谷歌官方提供的 intent:
语法,或者实现让用户通过自定义手势来打开APP,当然这就是题外话了。
Intent 语法
intent:HOST/URI-path // Optional host #Intent; package=[string]; action=[string]; category=[string]; component=[string]; scheme=[string]; end;
如果用户未安装 APP,则会跳转到系统默认商店。当然,如果你想要指定一个唤起失败的跳转地址,添加下面的字符串在 end;
前就可以了:
S.browser_fallback_url=[encoded_full_url]
示例
下面是打开 Zxing 二维码扫描 APP 的 intent。
intent://scan/#Intent; package=com.google.zxing.client.android; scheme=zxing; end;
打开这个 APP ,可以通过如下的方式:
<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end"> Take a QR code </a>
2.2 Universal Link
Universal Link 是什么
Universal Link 是苹果在 WWDC2015 上为 iOS9 引入的新功能,通过传统的 HTTP 链接即可打开 APP。如果用户未安装 APP,则会跳转到该链接所对应的页面。
为什么要使用 Universal Link
传统的 Scheme 链接有以下几个痛点:
- 在 ios 上会有确认弹窗提示用户是否打开,对于用户来说唤端,多出了一步操作。若用户未安装 APP ,也会有一个提示窗,告知我们 “打不开该网页,因为网址无效”
- 传统 Scheme 跳转无法得知唤端是否成功,Universal Link 唤端失败可以直接打开此链接对应的页面
- Scheme 在微信、微博、QQ浏览器、手百中都已经被禁止使用,使用 Universal Link 可以避开它们的屏蔽( 截止到 18年8月21日,微信和QQ浏览器已经禁止了 Universal Link,其他主流APP未发现有禁止 )
如何让 APP 支持 Universal Link
有大量的文章会详细的告诉我们如何配置,你也可以去看官方文档,我这里简单的写一个12345。
- 拥有一个支持 https 的域名
- 在 开发者中心 ,Identifiers 下 AppIDs 找到自己的 App ID,编辑打开 Associated Domains 服务。
- 打开工程配置中的 Associated Domains ,在其中的 Domains 中填入你想支持的域名,必须以
applinks:
为前缀 - 配置
apple-app-site-association
文件,文件名必须为apple-app-site-association
,不带任何后缀 - 上传该文件到你的 HTTPS 服务器的 根目录 或者
.well-known
目录下
Universal Link 配置中的坑
这里放一下我们在配置过程中遇到的坑,当然首先你在配置过程中必须得严格按照上面的要求去做,尤其是加粗的地方。
域名问题
Universal Link 支持的域名最多只能支持到二级域名,如果你用到了三级域名,Universal Link 唤端是不会生效的。
跨域问题
IOS 9.2 以后,必须要触发跨域才能支持 Universal Link 唤端。
IOS 那边有这样一个判断,如果你要打开的 Universal Link 和 当前页面是同一域名,ios 尊重用户最可能的意图,直接打开链接所对应的页面。如果不在同一域名下,则在你的 APP 中打开链接,也就是执行具体的唤端操作。
Universal Link 是空页面
Universal Link 本质上是个空页面,如果未安装 APP,Universal Link 被当做普通的页面链接,自然会跳到 404 页面,所以我们需要将它绑定到我们的中转页或者下载页。
3. 如何调用三种唤端媒介
通过前面的介绍,我们可以发现,无论是 URL Scheme 还是 Intent 或者 Universal Link ,他们都算是 URL ,只是 URL Scheme 和 Intent 算是特殊的 URL。所以我们可以拿使用 URL 的方法来使用它们。
3.1 iframe
<iframe src="sinaweibo://qrcode">
在只有 URL Scheme 的日子里,iframe 是使用最多的了。因为在未安装 app 的情况下,不会去跳转错误页面。但是 iframe 在各个系统以及各个应用中的兼容问题还是挺多的,不能全部使用 URL Scheme。
3.2 a 标签
<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"">扫一扫</a>
前面我们提到 Intent 协议,官方给出的用例使用的就是使用的 a 标签,所以我们跟着一起用就可以了。
使用过程中,对于动态生成的 a 标签,使用 dispatch
来模拟触发点击事件,发现很多种 event 传递过去都无效;使用 click()
来模拟触发,部分场景下存在这样的情况,第一次点击过后,回到原先页面,再次点击,点击位置和页面所识别位置有不小的偏移,所以 Intent 协议从 a 标签换成了 window.location。
3.3 window.location
window.location.href = 'sinaweibo://qrcode';
URL Scheme 在 ios 9+ 上诸如 safari、UC、QQ浏览器中, iframe 均无法成功唤起 APP,只能通过 window.location 才能成功唤端。
当然,如果我们的 app 支持 Universal Link,ios 9+ 就用不到 URL Scheme 了。而 Universal Link 在使用过程中,我发现在 qq 中,无论是 iframe 导航 还是 a 标签打开 又或者 window.location 都无法成功唤端,一开始我以为是 qq 和微信一样禁止了 Universal Link 唤端的功能,其实不然,百般试验下,通过 top.location 唤端成功了。
几步走
- 判断浏览器,动态加载对应浏览器的下载逻辑
- 通过
universal link
、URL Scheme
、a 标签
、iframe
几种方式找出最适合这个浏览器的唤起方式。 - 如果下载了 App,就会走打开逻辑,如果没有下载则走下载逻辑。
- 如果已知不能唤起的浏览器引导其它浏览器打开
流程:
各个唤起方法对比
没有哪种方式是完美的,每种唤起方式都有它的优势跟劣势,只有将所有的唤起方法在不同浏览器上尝试过才能择优使用。
4. 判断唤端是否成功
如果唤端失败(APP 未安装),我们总是要做一些处理的,可以是跳转下载页,可以是 ios 下跳转 App Store… 但是Js 并不能提供给我们获取 APP 唤起状态的能力,Android Intent 以及 Universal Link 倒是不用担心,它们俩的自身机制允许它们唤端失败后直接导航至相应的页面,但是 URL Scheme 并不具备这样的能力,所以我们只能通过一些很 hack 的方式来实现 APP 唤起检测功能。
const initialTime = new Date();
let counter = 0;
let waitTime = 0;
const checkOpen = setInterval(() => {count++;waitTime = new Date() - initialTime;if (waitTime > 2500) {clearInterval(checkOpen);cb();}if (counter < 100) return;const hide = document.hidden || document.webkitHidden;if (!hide) {cb(); // 唤端失败的回调函数}
}, 20);
每 20ms 执行一次,执行 100次 在页面中实际耗费与 2000 ms 不会相差多少。APP 如果被唤起的话,页面就会进入后台运行,setInterval 在 ios 中不会停止运行,在 android 中停止运行。
我们的判断条件比预期时间多设置了 500ms,所以如果安卓中 setInterval 内的函数执行 100 次以内所费时间超过 2500ms,则说明 APP 唤起成功,反之则代表失败。
我们通过 document.hidden 和 document.webkitHidden 属性来判断 APP 在 ios 中是否被正常唤起,2000ms 内,页面转入后台运行,document.hidden 会返回 true,代表唤端成功,反之则代表失败。
5. 没有完美的方案
透过上面的几个点,我们可以发现,无论是 唤端媒介 、 调用唤端媒介 还是 判断唤端结果 都没有一个十全十美的方法,我们在代码层上能做的只是在确保最常用的场景(比如 微信、微博、UC 等)唤端无误的情况下,最大化的兼容剩余的场景。
好的,我们接下来扯一些代码以外的,让我们的 APP 能够在更多的平台唤起。
微信、微博、手百、QQ浏览器等。(但是2022年,国家要求这些app开启第三方链接支持)
这些应用能阻止唤端是因为它们直接屏蔽掉了 URL Scheme 。接下来可能就有看官疑惑了,微信中是可以打开大众点评的呀,微博里面可以打开优酷呀,那是如何实现的呢?
它们都各自维护着一个白名单,如果你的域名在白名单内,那这个域名下所有的页面发起的 URL Scheme 就都会被允许。就像微信,如果你是腾讯的“家属”,你就可以加入白名单了,微信的白名单一般只包含着“家属”,除此外很难申请到白名单资质。但是微博之类的都是可以联系他们的渠道童鞋进行申请的,只是条件各不相同,比如微博的就是在你的 APP 中添加打开微博的入口,三个月内唤起超过 100w 次,就可以加入白名单了。
腾讯应用宝直接打开 APP 的某个功能
刚刚我们说到,如果你不是微信的家属,那你是很难进入白名单的,所以在安卓中我们一般都是直接打开腾讯应用宝,ios 中 直接打开 App Store。点击腾讯应用宝中的“打开”按钮,可以直接唤起我们的 APP,但是无法打开 APP 中的某个功能(就是无法打开指定页面)。
腾讯应用宝对外开放了一个叫做 APP Link 的申请,只要你申请了 APP Link,就可以通过在打开应用宝的时候在应用宝地址后面添加上
&android_schema={your_scheme}
,来打开指定的页面了。
6. 开箱即用的callapp-lib
信息量很大!各种问题得自己趟坑验证!内心很崩溃!
不用愁,已经为你准备好了药方,只需照方抓药即可
web页面中如何唤起打开APP相关推荐
- web页面中如何唤起打开APP实践
作者:拾邑 链接:https://github.com/suanmei/callapp-lib/issues/1 前段时间在做一些H5页面,落地页占比较大,落地页承担的职责就是引流.引流有两种形式,同 ...
- web页面判断是否安装某app,从web启动app应用
web页面判断是否安装某app,从web启动app应用 web页面判断手机里是否安转应用的原理就是:首先试着打开手机端某个app的本地协议:如果超时就转到app下载页,下载该app. URL sche ...
- php 离线 gis,在 Web 页面中使用离线地图
1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. 操作: 1. 参考:java离线地图web GIS制作 下载好所需地图瓦片,本文以百度地图/深圳为例 2 ...
- 如何把python可视化到前端_python数据可视化的效果如何在web页面中展示_北京可视化股票...
有什么APP可以展示可视化的任务进度 可视化任务进度软件,使用敬业签,具体可视有事项开始时间,进度及人.还有结束时间以及人员处理速等等,更多功能如下: 1.敬业签是一款功能比较全面的桌面便签软件,分为 ...
- Ios9 html5,ios9,html5_ios9下在浏览器中通过scheme打开app的问题,ios9,html5 - phpStudy
ios9下在浏览器中通过scheme打开app的问题 ios9系统下,safari下通过iframe(scheme)的方式跳app,无法打开app,通过location.href=scheme的方式倒 ...
- 轻松实现在web页面中直接播放rtsp视频流
轻松实现在web页面中直接播放rtsp视频流 写在前面 实现 介绍 如何使用 准备ffmpeg 运行rtsp2web 参数说明(在 `new RTSP2web` 时,可配置的参数如下): 前端代码 参 ...
- html右键禁用和web页面中添加加入qq群的方式
需求: html禁用右键,防止定位csspath和xpath,同时需要在web页面中加入添加加入qq群的图标 实现: html禁用右键:利用oncontextmenu <!doctype htm ...
- 从此不再为Web页面中的Tooltip烦恼
让Web页面中,不能折行或不希望被折行的文字始终显示在一行,是一种严格的UI风格,毕竟自由的折行会使得表格和整体界面变得很难把握.当然在一行显示不完全时配以省略号在结尾,能很好的提示用户表示语句未结束 ...
- [置顶] 读取pdf并且在web页面中显示
读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...
最新文章
- vim ctags使用方法
- 谈谈自己对REST、SOA、SOAP、RPC、ICE、ESB、BPM知识汇总及理解
- 外向或内向是基因决定的?
- SAP Spartacus 服务器端渲染单步调试步骤之一:应用程序准备工作
- python 取一个字前的文本的_python删除某一行字符前面的内容
- Microsoft Lync
- 大整数乘法c语言数组,很大的数相乘怎么办?
- 【JUnit 报错】 method initializationerror not found:JUnit4单元测试报错问题
- 疑似荣耀X10 Max巨屏新机入网:5000mAh电池+22.5W快充
- 去中心化数据基础架构Stratos融资183万美元,Spark Digital Capital等参投
- shell分割参数为数组并循环执行jar,异常时退出循环
- 电商常用字体_字体商用有风险,侵权罚款上千万!告诉你怎么正确使用
- php 提取字的首字母,PHP提取中文首字母_php技巧
- 【软件工具使用】高效使用 Visio 绘图
- 当代中国社会划分为十大阶层
- 几何公差:GPS 2019 产品几何技术规范 (GDT)
- soul群聊派对显示服务器异常,soul群聊派对在哪?功能、查找步骤有这些
- nginx+geoip2实现地区限制
- Android Studio连接手机调试出现Session 'app': Error Installing APK
- win10 who owns this pc? My organization I own it