前端唤醒APP

需求源来

因为工作需要,我们经常会在自家产品的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就不属于这篇文章的范围,我们讲讲浏览器是怎么调用的

使用

<a href="[scheme:][//host:port][path][?query][#fragment]">打开应用</a>

或者动态创建一个隐藏式跳转,大体流程无非就是几种

• 新建一个隐藏的 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,甚至支持在微信唤醒不需要配置白名单.

关于openSDK1.8.6的更新说明

格式跟普通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的运作流程完全由系统控制了

坑

1. 域名问题Universal Link 支持的域名最多只能支持到二级域名，如果你用到了三级域名，Universal Link 唤端是不会生效的。
2. 跨域问题IOS 9.2 以后，必须要触发跨域才能支持 Universal Link 唤端。IOS 那边有这样一个判断，如果你要打开的 Universal Link 和 当前页面是同一域名，ios 尊重用户最可能的意图，直接打开链接所对应的页面。如果不在同一域名下，则在你的 APP 中打开链接，也就是执行具体的唤端操作。
3. Universal Link 是空页面Universal Link 本质上是个空页面，如果未安装 APP，Universal Link 被当做普通的页面链接，自然会跳到 404 页面，所以我们需要将它绑定到我们的中转页或者下载页。

区别

1. iOS 9.0是一个区分点,因为Universal Links在这之后才支持
2. schema可以唤醒多个不同的APP,因为应用都是自定义的,但是Universal Links使用标准的https链接到自己的域名,所以每个APP的Universal Links都是唯一的
3. schema 会弹窗询问, Universal Links省去这一步
4. schema会被应用拦截,Universal Links目前可以突破拦截

应用宝

跳转到应用宝后会自动根据设备是否已装APP去执行打开或者下载操作,当然APP得是上传到应用宝才行,而且只能是腾讯系的APP才支持,如果是其他的应用依然是只能走浏览器引导