需求源来
因为工作需要,我们经常会在自家产品的APP里开发一些h5的活动的页面,作为营收重要的一部分,我们肯定要想尽办法扩大传播范围,所以分享活动是必不可少又是很关键的一步,但是很多信息不能直接在外部浏览器通过请求获取,所以我们需要有一个专门的分享按钮提供给用户在外部浏览器打开,引导唤醒APP进入页面,
URL Scheme —— 唤端媒介
URL Scheme是一种协议媒介, 就是应用将其自身”绑定”到一个自定义 URL scheme 上,该 scheme 用于从浏览器或其他应用中启动本应用,而且一般都有自己的一套路由体系,可以通过不停的参数到达任意界面
标准的格式是
[scheme:][//host:port][path][?query][#fragment]
- scheme : 协议名称 - 必须
- host : 协议地址 - 必须
- port : 协议的端口,可以不填
- path : 协议路径,可用 / 连接多个
- query : 携带的参数可用 & 连接多个
- fragment : 锚点
当然里面的特殊字符也需要先进行url编码,具体怎么在APP自定义scheme就不属于这篇文章的范围,我们讲讲浏览器是怎么调用的
使用
打开应用
或者动态创建一个隐藏式跳转,大体流程无非就是几种
- 新建一个隐藏的 iframe ,地址指向scheme(除了低版本手机基本被废弃了)
- 使用 window.location 或者 window.location.href直接跳转
- 新建一个隐藏的 a 标签,地址指向打开的url,并触发打开链接事件
当遇到某些场景下一个方法不能使用的话,就可以考虑其他的兼容方案试试了
判断是否唤醒成功及备用方案
能成功唤醒APP的前提是,用户设备上已经安装了该应用,退一步来说即使没有安装也希望可以引导用户去下载我们的APP,但是熟悉上面的方法的话也能知道,他们没法告诉页面当前是否唤醒成功或者用户是否安装过应用,这时候我们通常会利用一些事件触发来判断是否可能的情况
pagehide
离开网页有多种方式。如点击一个链接,刷新页面,提交表单,关闭浏览器等。.
onpagehide 事件有时可以替代 onunload 事件,但 onunload 事件触发后无法缓存页面。
object.addEventListener("pagehide", myScript);
visibilitychange
浏览器
标签页被隐藏或显示的时候会触发visibilitychange
事件.
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
});
document.hidden
通过document.hidden属性,可判断页面是否可见。 如果不可见,则document.hidden为true. 如果可见, 则为false。
function handleVisibilityChange() {
if (document.hidden) {
pauseSimulation();
} else {
startSimulation();
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
利用这些事件结合定时器,可以限定时间内自动触发下载引导,当然也取决于浏览器API兼容性和系统性能等不可控因素
局限
并不是所有都支持scheme方法唤醒应用,例如微信浏览器等官方对所有的分享链接做了屏蔽,会通过白名单控制是否允许微信内唤醒,现在基本只能在浏览器使用.APP都不会希望用户可以选择离开
而且系统或者浏览器的支持方式也不一样,有些会先询问用户是否允许打开应用,有些是直接唤醒
在 iOS 12.3版本以后,safari有一个bug,先后使用scheme和download app会唤醒APP之后再进入App store,用universal link可以解决这个问题
Universal Links
Seamlessly link to content inside your app, or on your website in iOS 9 or later. With universal links, you can always give users the most integrated mobile experience, even when your app isn’t installed on their device.
iOS 9.0 以上才支持的新特性,可以通过https链接来打开APP(手机中已经安装此APP),或者跳转到https链接(手机中没有安装此APP),用户体验比scheme卓越,可以不经过确认框直接唤醒APP,甚至支持在微信唤醒不需要配置白名单.
格式跟普通URL一样
https://xxx.xxx.xxx/xxx
如果用户已经安装过应用则直接唤醒,否则就跳去地址进行下载引导
配置
- 拥有一个支持 https 的域名
- 在开发者中心,Identifiers 下 AppIDs 找到自己的 App ID,编辑打开 Associated Domains 服务。
- 打开工程配置中的 Associated Domains ,在其中的 Domains 中填入你想支持的域名,必须以
applinks:
为前缀 - 配置
apple-app-site-association
文件,文件名必须为apple-app-site-association
,不带任何后缀 - 上传该文件到你的 HTTPS 服务器的 根目录 或者
.well-known
目录下
Universal Link的基本运作流程
- APP第一次启动 or APP更新版本后第一次启动
- APP向工程里配置的域名发起Get请求拉取apple-app-association Json File
- APP将apple-app-association注册给系统
- 由任意webview发起跳转的url,如果命中了apple-app-association注册过的通用链接
- 打开App,触发Universal Link delegate
- 没命中,webview继续跳转url
在你进行apple-app-association 以及 App工程的配置之后,整个Universal Link的运作流程完全由系统控制了
坑
- 域名问题Universal Link 支持的域名最多只能支持到二级域名,如果你用到了三级域名,Universal Link 唤端是不会生效的。
- 跨域问题IOS 9.2 以后,必须要触发跨域才能支持 Universal Link 唤端。IOS 那边有这样一个判断,如果你要打开的 Universal Link 和 当前页面是同一域名,ios 尊重用户最可能的意图,直接打开链接所对应的页面。如果不在同一域名下,则在你的 APP 中打开链接,也就是执行具体的唤端操作。
- Universal Link 是空页面Universal Link 本质上是个空页面,如果未安装 APP,Universal Link 被当做普通的页面链接,自然会跳到 404 页面,所以我们需要将它绑定到我们的中转页或者下载页。
区别
- iOS 9.0是一个区分点,因为Universal Links在这之后才支持
- schema可以唤醒多个不同的APP,因为应用都是自定义的,但是Universal Links使用标准的https链接到自己的域名,所以每个APP的Universal Links都是唯一的
- schema 会弹窗询问, Universal Links省去这一步
- schema会被应用拦截,Universal Links目前可以突破拦截
应用宝
跳转到应用宝后会自动根据设备是否已装APP去执行打开或者下载操作,当然APP得是上传到应用宝才行,而且只能是腾讯系的APP才支持,如果是其他的应用依然是只能走浏览器引导