为什么需要唤起app?
我们经常会看到网站上引导用户打开或者下载app,这是因为公司希望用户下载app后,会在上面停留更多时间,从而提高用户黏性;同时,app通常来说比H5更流畅,体验更好一些。
如何唤起APP?
1.URI 方案(URI Scheme)
作为开发者,你一定对于URI(Uniform Resource Identifier)不陌生。它最常见的形式是URL,可以简单理解为网址。它的格式如下:
我们以 http://example.com 为例,它的 scheme 就是 http。
为URI设置scheme的目的就在于告诉操作系统即将要访问的资源是什么类型,遵照哪种方案来访问它。除了http/https,常见的 scheme 例子还有:
· sms:用于编写和发送短信,例如:sms:+15105550101?body=hello%20there
· tel: 用于电话号码,例如 tel:+6494461709
· mailto: 用于发送邮件,例如 mailto:jsmith@example.com?subject=A%20Test&body=Hi
而我们日常生活中常用的 app 也为它们自己注册了自定义的 scheme,例如在浏览器中运行如下代码:
点击每个链接后,如果对应的APP已安装可以唤起它。
上图中是打开app最简单的URI Scheme,而我们常用的格式如下:
Scheme 方式是最传统的方案,但仍然是支持最广泛和可靠的方式。同时也是许多浏览器唯一支持的深层链接方式。
在Android 10中测试发现,只有Chrome浏览器支持下面要讲的应用链接,其他浏览器只支持 Scheme方式唤起app。
你可以这样来判断当前浏览器是否为 Chrome for Android:
2.Android 应用链接(Android App Links)
Android 6及更高的版本支持应用链接使应用能将自己的行为指定为给定类型链接的默认处理程序。
应用链接本质上是HTTP URL,如果用户安装了app,在浏览器中访问应用链接时会出现一个应用选择弹窗,选择该app后会唤起并访问指定的内容页。否则,浏览器会把它当作一个普通的网址在当前窗口中打开。
要支持应用链接,需要做如下事情:
1. 在Android的应用manifest中创建 intent 过滤器
2. 在app代码中增加代码处理传入的链接
3. 用Digital Asset Links关联你的APP和网站
3.iOS 通用链接(Universal Links)
通用链接是苹果在iOS 9上引入的功能,和上述应用链接类似,它也是通过HTTP链接可以唤起APP。如果用户未安装,则当作普通网址在浏览器中打开。
它相比于传统的 URI Scheme方式有以下优势:
· 即使用户没有安装app,访问通用链接会打开一个网页,而不会出现采用传统的Scheme方式出现弹窗 “打不开该网页,因为网址无效”。
· 即使用户没有安装app,用户仍有机会下载和安装app。访问通用链接的网页后,可以在该页面上提供下载按钮,方便用户下载。
· 当Scheme方式在某些app中被禁用时,它提供了备用方案。例如在iOS版的微信中只支持通用链接,不支持 Scheme方式唤起App。
要让iOS app支持通用链接:
1. 拥有一个支持 https 的域名
2. 在 开发者中心 ,Identifiers 下 AppIDs 找到自己的 App ID,编辑打开 Associated Domains 服务。
3. 打开工程配置中的 Associated Domains ,在其中的 Domains 中填入你想支持的域名,必须以 applinks: 为前缀
4. 配置 apple-app-site-association 文件,文件名必须为 apple-app-site-association ,不带任何后缀
5. 上传该文件到你的 HTTPS 服务器的 根目录 或者 .well-known 目录下
如何在网页中唤起 app?
第一种方式:iframe
这是最早的方式,在只有URI Scheme时,这种是普遍采用的办法。在未安装app的情况下,也不会报错跳转。但是随着时间推移,这种方式在最新的 Android 和 iOS 上已经被禁用,只作为最后的备用方案。
第二种方式:a 标签
这种是推荐的方式,在a标签的href属性中填写Scheme或者应用链接/通用链接。对于需要异步获取的链接地址,可以在获取之后再用JS动态设置a标签的 href属性。
第三种方式:window.location
这种方式更加灵活。通过这种方式设置的URL格式可以是Scheme,也可以是应用链接/通用链接。如果不方便修改页面中的a标签的 href 属性,推荐此方式。
如何判断app是否安装?
很遗憾,出于隐私和安全性的考虑,浏览器没有提供接口来判断一个app是否已安装。类似的,也没有办法判断我们使用了上述一个方案后app是否被唤起。由于app被唤起后浏览器会进入后台,而被唤起的app进入前台展示,所以我们可以根据当前文档的可见状态来推测是否被唤起:
主要说明的是,上述代码存在一些局限性:
· 只适用于 Scheme 的方式,对于应用链接和通用链接无效。因为当用户未安装app时会离开当前页面,导航到新的网页,没有办法判断是否app被唤起。
· 在部分浏览器中,如 iOS Safari,会出现确认弹窗询问用户是否在指定app中打开。此时如果用户超过了3秒未作出选择,则浏览器会访问下载地址。无论用户是否安装了app。
结语
目前深层链接的处理在浏览器领域仍是一滩浑水,不同平台和浏览器之间对于深层链接存在许多差异,没有完美的方案。实现深层链接往往需要前端、后端和app三端的配合,如果你是前端开发人员,想寻找一个开盒即用的方案,可以试试npm包 callapp-lib。
热门跟贴