Web开发编程网
分享Web开发相关技术

H5 唤醒 App 的那些事儿

2021-11-18 分类：前端开发 评论(0)

前言

随着互联网的快速发展，人们在 App 内停留的时间越来越多，渐渐地对它也越来越依赖，但是每个 App 又都是相互独立的，我们必须要打开不同的手机客户端来获取不同的信息，这些信息无法传播分享出去，所以为 App 架起一座沟通桥梁的重要方式就是通过 H5 页面，由 H5 直接唤醒 App 页面也成为了一种常见的技术需求。

在这个技术需求的背后，更重要的是优化用户体验，因为 App 的日活和用户增长量、活跃度都是挂钩的，无论是注册新用户还是激活老用户都需要尽可能地节省用户的操作成本，所以在微信中「从其他浏览器打开」的引导或者下载 App 后再去手动搜索目标页面都是一种让用户不太舒服的体验方式。

如果想要实现从 H5 打开 App，并直接在 App 内跳转到指定页面，最简单的方式就是利用移动端开发的深度链接技术 Deep linking。深度链接可以解决 App 之间的自由跳转问题，从而达到缩短用户操作路径的目的，直接到达 App 的对应页面。

常用场景

  • 点击 H5 页面按钮打开 App 页面；
  • 点击短信中的 URL 链接（游戏邀请链接/新闻资讯/活动落地页等）打开 App 页面；

什么是Deep link？

Deep Link 就是一个链接的概念，事实上我们每天都会使用到它去打开一个网站页面，只不过它比普通的链接更加复杂一些。在 Web 开发领域，深度链接就是说这个链接不仅仅是打开一个网站，而是直接地打开这个网站中的某个具体内容页面。通常来讲，有很多链接就是深度链接，只不过大家都习惯于称之为链接。

Android、iOS 都推出了相应的概念去实现深链接。于是就有了 Universal Links、App Links、URL Scheme。

场景流程

我们先简单了解下整个唤醒的流程，如下图所示：

唤醒App的几种方式

下面给大家列出几种直接唤醒 App 的方式，供各位参考。

URL Scheme

URL Scheme 是一种页面跳转的协议，也是实现 Deep Link 的第一代解决方案。利用它就可以在移动开发中实现从 Web 页面或者别的 App 中唤起对应 App 的功能。

链接格式

[scheme]://[host][:port]/[path]?[query]

属性名含义
scheme协议名（由开发人员定义）
host网络域名
port端口号
path页面路径
query请求参数

各大平台

简单查找了一下各大平台的 scheme，感兴趣的可以直接从手机浏览器中打开尝试一下。

QQ：qq://
微信：weixin://
淘宝：taobao://
微博：sinaweibo://
百瓶：billionbottle://

页面调用方式

window.location.href = schemeUrl;
复制代码

直接跳转链接即可，简单方便。

缺点

虽然使用起来很简单，但是也会有如下缺点存在：

  • 当要被唤起的 App 没有安装时，打开这个链接就会出错。在国内非常杂乱的手机浏览器中，出错的现象会有很多种。例如：
  • 目前没有办法区分多个 App 都注册了相同 scheme 的情况；
  • 不支持从其他 App 中的 WebView 直接跳转到目标 App；
  • Android 端微信，无法直接通过 scheme 唤起 App，可以通过引导或微信开放标签来解决；
  • 只能通过 hidden、blur 等事件监听到是否安装 App；

因此为了解决以上问题，iOS 和 Android 都有了自己的第二套解决方案，分别是 iOS 的 Universal Links，和 Android 的 App Links。

Universal Links

iOS 9 之后苹果在 15 年推出了一个替代之前 URL Scheme 的新概念，它就是 Universal Links。

以下是官方的功能描述：

In iOS 9 and later, universal links let users open your app when they tap links to your Website within WKWebView and UIWebView views and Safari pages, in addition to links that result in a call to openURL:, such as those that occur in Mail, Messages, and other apps.

在 iOS 9 及更高版本中，通用链接让用户在点击 WKWebView、UIWebView 或 Safari 中你的网站链接时，除了调用 openURL: 的链接外，还可以通过你的系统应用来打开 App，例如那些出现在邮件、信息和其他应用程序中的链接。

简而言之，就是它的实现机制与之前的 Deep Link 相似，只不过它不是只定义一个 URL scheme，而是匹配了多个页面对应 App 中的位置，当用户打开某个匹配的页面时，iOS 会自动地将其重定向到 App 内，此外由于目前微信内置浏览器不太支持 openURL 的方式进行应用间的跳转，很多 App 都是通过接入 Universal Links 实现微信浏览器一键跳转到自己 App 的功能，比如知乎、得物等。

工作方式及流程

  1. 打开 App 开发人员配置在 apple-app-site-association 文件中的域名链接（链接需要支持https 协议）；
  2. 解析 apple-app-site-association 文件，获取其中的 bundleId、paths 等配置信息；
  3. 在 App 安装后首次打开时，就会去请求配置文件，接收到对应路径，根据路径的逻辑跳转到对应的功能；

apple-app-site-association 文件

{
  "applinks": {
    "apps": [],
    "details": [
    {
      "appID": "appID",
      "paths": ["appShare/app/link","appShare/app/link/*"]
    }
    ]
  },
  "appclips": {
    "apps": ["appID.Clip"]
  }
}
复制代码

验证配置

一系列操作完毕之后，我们如何验证配置是否成功？

在本地调试或者将配置好的链接复制到手机浏览器是不会直接生效的。

如果想要验证配置是否成功，可以尝试以下两个方式：

  1. 在手机备忘录里输入链接，点击直接跳转到 App 或者长按提示在 Safari 打开；
  2. 页面在手机浏览器打开，下拉页面顶部会有从 App 打开的提示；

优点

相比 Custom URL Scheme，官方文档给出了几个优点：

  • 独特性：与自定义的 URL 链接相比，通用链接不能被其他的应用程序所访问，因为它们使用标准的 HTTP 或 HTTPS 链接到您的网站。
  • 安全性：当用户安装你的应用时，iOS 会检查你上传到网络服务器的文件，以确保你的网站允许你的应用代表它打开 URL。只有你能创建和上传这个文件，所以你的网站与你的应用程序的关联是安全的。
  • 灵活性：即使没有安装 App，Universal Links 也可以正常工作。轻点你的网站链接就能在 Safari 浏览器中打开内容，正如用户所期望的那样。
  • 简单性：一个 URL 同时适用于你的网站和你的 App。
  • 私有性：其他应用程序也可以与你的 App 通信，而不需要知道你的 App 是否已安装。

缺陷

至少需要 iOS 9 以上的系统才才可支持。由下图可见，目前在全球范围内，截止到 2021 年 9 月份，iOS 14.7 仍然是主流版本，占比达到了 57.26%，所以尽管有 iOS 9 的版本限制，大家也可以放心大胆的使用。

防止踩坑必备 划重点

  • 需要保证使用的链接是允许跨域的，没有跨域就无法唤醒 App；
  • 直接将 Universal Links 贴入浏览器进行访问不会生效；
  • 在 iOS 端微信中，如果微信版本在 7.0.5 之前，就无法直接通过 Universal links 唤起 App，需要兼容处理，具体可通过引导到外部浏览器打开；

App Links

在 2015 年的 Google I/O 大会上，Android M 宣布了一个新特性：App Links。它可以让用户在点击一个普通 Web 链接的时候可以打开指定 App 的对应页面，前提是这个 App 已经安装并且经过了验证，否则会显示一个打开确认选项的对话框，目前只支持 Android M 以上系统。

App Links 的出现其实也是为了优化用户体验，在使用它唤醒 App 时会弹出一个对话框提示用户是否打开，缺点就是如果用户勾选了取消之后，可能之后就再也唤醒不了了。

工作方式及流程

  1. 配置 AndroidManifest.xml；
  2. 配置 json 文件；
[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "包名",
    "sha256_cert_fingerprints": ["签名"]
  }
}]
复制代码
  1. 将 json 文件上传到指定域名的 .well-known 路径下，文件名定义为 assetlinks.json；
  2. 验证 App Links，可使用 AndroidStudio 里的 App Links Assistant 中的 Test App Links 进行测试或者在短信中输入链接点击测试，如果直接唤起 App 没有弹出对话框选择则说明 App Links 验证成功；

总的来说与 Universal Links 的配置和验证很相似，差异不大。

第三方服务

要做一个兼容性很好的方案，就需要考虑各种情况，在不同的情况适配不同的方案，比如用户是在手机浏览器打开还是微信中打开，或者是在 PC 中打开，Universal Links 是否被关闭等，这就使代码实现变得复杂，且容易出错，还有 Android 平台机型众多、手机浏览器众多等导致的兼容问题。

魔窗 MLink

现已被极光大数据收购，并改名为 极光魔链（ docs.jiguang.cn/jmlink/guid… ）

OpenInstall

OpenInstall 是一款能够提升 App 推广能力的第三方 SDK。该 SDK 能在 App 推广过程中实现上下级关系绑定，从而达到无需手动填写邀请码即可自动识别邀请来源等功能，还能携带任意参数安装，获取精准的统计数据。最终提高 App 安装率和转化率。

官网直通车：OpenInstall（ www.openinstall.io/ ）

微信相关的友情提示

微信已经成为大家日常必不可少的交流工具，用作推广 App 来说是再好不过的，但是微信内部通常是无法直接跳转至其他 App 的。那除了以上列出的技术方案，我们还可以如何去实现这个技术需求呢？

微信内部的白名单

这份白名单相当于是微信的亲儿子，只要把需要唤醒的 App 加入到白名单中，就可以畅通无阻地在各大 App 中跳转，实现难度高。

应用宝

如果你的页面需要能直接打开应用商店，可以把你的 App 上传到应用宝平台，因为应用宝和 AppStore 有合作，并且在内部实现了属于自己的一套流程，直接在微信中跳转应用宝的链接也是一个可选的方案。

微信开放标签

微信在 2020 年 5 月推出了微信开放标签功能，用于在微信浏览器内直接唤醒 App，也能通过携带参数直接进入 App 相应的页面，只要按照文档规定接入微信 SDK 就可直接使用该功能。

适用环境

  • 微信版本要求为：7.0.12 及以上；
  • 系统版本要求为：iOS 10.3 及以上、Android 5.0 及以上；

具体要求可以参考官方开放平台：微信官方文档（ developers.weixin.qq.com/doc/oplatfo… ）。

接入流程

  1. 登录微信公众平台填写「JS 接口安全域名」；
  2. 接入如下微信 JS 文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js（至少 1.6.0 版本）；
  3. 通过 config 接口注入权限配置；
wx.config({
  debug: true,   // 调试模式开关
  appId: '',   // 公众号标识
  timestamp: ,   // 时间戳
  nonceStr: '',   // 生成签名随机串
  signature: '',  // 唯一验签
  jsApiList: [],  // JS接口列表
  openTagList: ['open-tag-launch-app']  // 要使用的开放标签列表
});
复制代码
  1. 引用标签，使用组件包裹需要触发事件的组件即可；
<open-tag-launch-app extinfo="extinfo">
  <button>打开App</button>
</open-tag-launch-app>
复制代码

API

属性说明类型默认值
extinfo微信 sdk 传递给 app 的参数String“”

事件

属性说明回调参数
launch用户点击跳转按钮并对确认弹窗进行操作后触发() => void
error用户点击跳转按钮后出现错误(event) => void

现存问题

  • 因为 Web 没有办法监听到 App 是否安装，所以都需要通过一些手段来兼容调起 App 或者是去下载页；
  • 如果设备上没有安装这个 App，在安装完毕后，无法保留住此时用户停留的上下文；

作者：百瓶技术
链接：https://juejin.cn/post/7031143982960902157
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

未经允许不得转载：WEB开发编程网 » H5 唤醒 App 的那些事儿

相关推荐

WEB开发编程网

谢谢支持，我们一直在努力

安全提示：您正在对WEB开发编程网进行赞赏操作，一但支付，不可返还。