H5唤起APP实践指南

应用场景

H5唤醒APP常见的应用场景是在一些活动页面引导用户进行下载或打开APP以达到推广引流的作用。一般有以下两种情况:

  • 引导已下载APP用户打开APP,提升用户体验,用户粘性
  • 引导未下载APP用户去下载APP,推广引流,增加用户量

方案介绍

1、URL Scheme

简介

相信大家都知道 URL,例如https://www.baidu.com就是一个URL。

😕/ 之前的部分就称为 URL Scheme。

也就是说https://www.baidu.com的 URL Scheme 就是 https。

简单来说,URL Scheme 就是一个可以让 app 相互之间可以跳转的协议。

就像给服务器资源分配一个 URL,以便我们去访问它一样,我们同样也可以给手机APP分配一个特殊格式的 URL,用来访问这个APP或者这个APP中的某个功能(来实现通信)。APP得有一个标识,好让我们可以定位到它,它就是 URL 的 Scheme 部分。

语法

URI = scheme:[//authority]path[?query][#fragment]
// 其中授权信息包含以下部分,具体查看[wiki](https://en.wikipedia.org/wiki/URL)
authority = [userinfo@]host[:port]

例子

  • 微信:weixin://
  • 支付宝:alipay://
  • 淘宝:taobao://
  • 其他自定义Scheme:yxstock://yx.stock.app/pathname?key1=value1&key2=value2

2、Intent

安卓原生Chrome浏览器在18之前的版本支持URL Scheme,25之后版本功能做了变化,不再支持通过设置iframe src属性来唤醒APP。例如,即使安装了APP,设置

<iframe src="paulsawesomeapp://page1"> </iframe>

也无法打开APP。需要实现谷歌官方提供的 intent: 语法,或者实现让用户通过自定义手势来打开APP。

语法

intent:  
   HOST/URI-path // Optional host  
   #Intent;  
      package=\[string\];  
      action=\[string\];  
      category=\[string\];  
      component=\[string\];  
      scheme=\[string\];  
   end;

具体的解析详情可以查看源码

同样地,可以在end;字符串前面添加一个跳转失败后的地址:

S.browser_fallback_url=[encoded_full_url]

当APP无法唤起的时候,将会跳转到上面给到的地址。

例子

下面是打开 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;end"> Take a QR code </a>

Universal Link是什么

Universal Link 是苹果在 WWDC2015 上为 iOS9 引入的新功能,通过传统的 HTTP 链接即可打开 APP。如果用户未安装 APP,则会跳转到该链接所对应的页面。

传统的 Scheme 链接有以下几个痛点:

  • 在 ios 上会有确认弹窗提示用户是否打开,对于用户来说唤端,多出了一步操作。若用户未安装 APP ,也会有一个提示窗,告知我们 “打不开该网页,因为网址无效”
  • 传统 Scheme 跳转无法得知唤端是否成功,Universal Link 唤端失败可以直接打开此链接对应的页面
  • Scheme 在微信、微博、QQ浏览器、手百中都已经被禁止使用,使用 Universal Link 可以避开它们的屏蔽( 截止到 18年8月21日,微信和QQ浏览器已经禁止了 Universal Link,其他主流APP未发现有禁止 )

简单概述配置方法,具体详细配置可以查看官方文档

  • 拥有一个支持 https 的域名
  • 在 开发者中心 ,Identifiers 下 AppIDs 找到自己的 App ID,编辑打开 Associated Domains 服务。打开工程配置中的 Associated Domains ,在其中的 Domains 中填入你想支持的域名,必须以 applinks: 为前缀
  • 配置 apple-app-site-association 文件,文件名必须为 apple-app-site-association不带任何后缀
  • 上传该文件到你的 HTTPS 服务器的 根目录 或者 .well-known 目录下

唤起方式

通过前面的介绍,我们可以发现,无论是 URL Scheme 还是 Intent 或者 Universal Link ,他们都算是 URL ,只是 URL Scheme 和 Intent 算是特殊的 URL。所以我们可以拿使用 URL 的方法来使用它们。

1、iframe

<iframe src="weixin://qrcode">

优点:支持URL Scheme情况下,在未安装 app 的情况下,不会去跳转错误页面。

缺点:部分系统兼容性问题,不支持URL Scheme。例如,安卓系统原生浏览器25版本后则不支持iframe唤醒APP。

2、a标签

<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"> Take a QR code </a>

3、window.location

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 唤端成功了。

唤起异常处理

如果在APP未安装情况下唤醒失败,则需要做下处理,可以是跳转下载页, 或者ios 跳转 App Store。Android Intent 和Universal Link 自身机制允许它们唤端失败后直接导航至相应的页面,但URL Scheme则无法做到,需要通过hack手段来判断唤醒状态来做处理:

const handleClickOpenApp = () => {
            let isWakeApp = false
            // if viewport is changed, that means app have been waked up.
            document.addEventListener('visibilitychange', () => {
                isWakeApp = true
            })
            // if app is installed then wake up.
            go('usmart-global://stock.app')
            // if app fails to wake up,then go to download page.
            setTimeout(() => {
                if (!isWakeApp) {
                    handleClickDownloadApp()
                }
            }, 2000)
        }

const go = (url: string) => {
            if (!url) return
            window.location.href = url
        }

APP 如果被唤起的话,页面就会进入后台运行,会触发页面的 visibilitychange 事件。如果触发了,则表明页面被成功唤起。没有唤醒则定时器2秒后跳转到相应的落地页作为兜底处理。

最佳实践

为了兼容不同终端,建议url Scheme、Intent、Universal Link 一起使用😄。

参考链接

Android Intents with Chrome - Chrome Developers

Support Universal Links

掘金

h5唤起app | 愚人码头

posted @ 2021-09-06 18:17  Aaronlamz  阅读(40)  评论(0编辑  收藏  举报