H5唤起安卓原生App

Kyle1984
508 阅读6分钟

概述

在业务方的要求下，对钉钉、企微、飞书等APP的H5页面调起合思原生 APP的技术方案进行了调研，对主流的技术方案进行了测试，并对飞书applink能力进行了研究。

1.安卓主要技术方案

通过调研发现，在安卓端，H5唤醒原生APP的技术方案主要是Deep Link和App Link，下面对两种技术方案进行介绍。

  Deep Link

这种方式是一种比较通用的技术，各平台的兼容性也很好，它一般由协议名、路径、参数组成。

  Deep Link 组成

  [scheme:][//authority][path][?query][#fragment]

  常用APP的 Deep Link

APP微信支付宝淘宝QQ知乎
Deep Linkweixin://alipay://taobao://mqq://zhihu://

  H5打开方式

  • 直接通过window.location.href跳转:

  window.location.href = 'zhihu://'

  • 通过iframe跳转

    • const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = 'zhihu://'
document.body.appendChild(iframe)

  • 直接使用a标签进行跳转

  • 通过js bridge来打开:

  window.miduBridge.call('openAppByRouter', {url: 'zhihu://'})

  是否成功唤起判断方式

可以监听当前页面的visibilitychange事件，如果页面隐藏，则表示唤端成功，否则唤端失败，跳转到应用商店。

  安卓端配置

在AndroidManifest.xml中给跳转的Activity配置intent filter,scheme,host可以任意配置。

<intent-filter>
<data android:scheme="example" android:host="test.example.com"/> //scheme,host可以任意配置            
<!-- 下面这几行也必须得设置 -->            
<category android:name="android.intent.category.DEFAULT" />            
<action android:name="android.intent.action.VIEW" />            
<category android:name="android.intent.category.BROWSABLE" />
</intent-filter>

App Link

在2015年的Google I/O大会上，Android M宣布了一个新特性：App Link让用户在点击一个普通web链接的时候可以打开指定APP的指定页面，前提是这个APP已经安装并且经过了验证，否则会显示一个打开确认选项的弹出框，只支持Android M以上系统。App Link的最大的作用，就是可以避免从页面唤醒App时出现的选择浏览器选项框。前提是必须注册相应的Scheme，就可以实现直接打开关联的App。

App Link在国内的支持还不够，部分安卓浏览器并不支持跳转至App，而是直接在浏览器上打开对应页面。系统询问是否打开对应App时，假如用户选择“取消”并且选中了“记住此操作”，那么用户以后就无法再跳转App。

App Link可以视作特殊的Deep Link，只不过它多了验证机制，如果验证通过，就设置默认打开，如果验证不过，则退化为Deep Link。

安卓端配置

AndroidManifest.xml的配置与Deep Link基本一致，增加了autoVerify属性，scheme必须是http或者https。

<intent-filter android:autoVerify="true"> //增加autoVerify属性
    <data android:scheme="https" android:host="test.example.com"  /> //scheme必须是http或https
    <category android:name="android.intent.category.DEFAULT" />
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.BROWSABLE" />
</intent-filter>

Android Studio中可以通过Tools/App link assistant直接配置App Link。配置步骤如下：

  1. 增加Intent Filter，配置如上所述
  2. 在Activity中配置intent相关的处理逻辑
  3. 通过Asset Links File关联app和网址
  4. 在设备上测试App Link的有效性

2.实测情况

测试方案

H5唤醒APP的测试以SplashActivity(即首页)作为唤醒页面，因此相关配置主要围绕SplashActivity展开。并且实现一个简单的H5页面作为测试界面，界面如下：

  通过python3 -m http.server开启本地服务器之后，可以通过http://192.168.17.31:8000/index.html 在飞书，企业微信，钉钉等多个平台直接进入H5页面，验证H5唤醒APP的可行性。

App Link测试

SplashActivity在AndroidManifest.xml中的配置如下，在applink.hosecloud.com/.well-known中放置了assetlinks.json文件实现app和链接之间的关联。合思App完成了App Link配置之后，在飞书，企业微信，钉钉，系统自带浏览器，夸克浏览器上直接点击applink.hosecloud.com来测试App Link的有效性。

<activity
    android:name=".view.activity.SplashActivity"
    android:screenOrientation="portrait"
    android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
        <action android:name="android.intent.action.DOWNLOAD_COMPLETE" />
    </intent-filter>
    <!-- app-link -->
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:scheme="https"
            android:host="applink.hosecloud.com" />
        <data
            android:scheme="http"
            android:host="applink.hosecloud.com" />
    </intent-filter>
</activity>

下面是App Link在小米手机上的实测情况。华为，OPPO测试情况与小米一致。

测试平台飞书企业微信钉钉夸克浏览器系统浏览器
测试结果直接跳转测试链接主页，没有唤醒APP直接跳转测试链接主页，没有唤醒APP直接跳转测试链接主页，没有唤醒APP直接跳转测试链接主页，没有唤醒APP直接跳转测试链接主页，没有唤醒APP

除此之外，在手机开启VPN的情况下，在Android Studio上通过App Link Assistant的"Run Test"功能测试App Link，App Link可以正常工作，说明App Link在国内平台失效的原因主要在于无法连接国外网络。

  测试结果表明，App Link方案在国内不具备可行性。

Deep Link测试

Deep Link只需要在AndroidManifest.xml中进行配置，配置如下：

<activity
    android:name=".view.activity.SplashActivity"
    android:screenOrientation="portrait"
    android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
        <action android:name="android.intent.action.DOWNLOAD_COMPLETE" />
    </intent-filter>
    <!-- app-link -->
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:scheme="hose"
            android:host="applink.test.com" />
    </intent-filter>
</activity>

小米手机上实测情况：

  1. 飞书

   进入H5页面之后，点击“测试链接”，出现跳转的弹窗，点击“允许”按钮则跳转到合思APP。

  1. 企业微信：进入H5页面之后，点击“测试链接”，无反应，Deep Link被屏蔽。
  2. 钉钉：进入H5页面之后，点击“测试链接”，无反应，Deep Link被屏蔽。
  3. 系统浏览器：

  进入H5页面之后，点击“测试链接”，出现跳转的弹窗，点击“允许”按钮则跳转到合思APP。

  1. 夸克浏览器：

  进入H5页面之后，点击“测试链接”，出现跳转的弹窗，点击“允许”按钮则跳转到合思APP。

  华为，OPPO手机测试情况与小米手机一致。

  经过测试，可以看到deep link在APP不拦截的情况下能正常使用，APP拦截的情况下须增加中转界面。

3.飞书AppLink

飞书AppLink能力

  • 在飞书内打开AppLink协议，则会直接跳转到飞书中对应的功能
  • 在飞书外部（如浏览器内）打开Applink协议，为了避免用户未安装飞书而无法唤起对应功能，会先打开Applink网页（如下图），提示用户下载飞书或点击打开飞书对应的功能

飞书App link分析

把模拟器切换成Samsung Galaxy S20 Ultra，点击applink测试用例：applink.feishu.cn/client/cale… 跳转到当前页面。点击“立即打开”，可以看到跳转的链接如下： intent://``applink.feishu.cn/client/calendar/open?#Intent

即飞书在安卓端使用的也是Deep Link技术方案。

相关思考

在落地H5唤醒APP时，安卓端可参考飞书的方案，添加一个中转页，提供下载客户端（未安装APP）和直接打开APP（已安装APP）的能力。

4.总结

通过对H5唤醒原生APP的技术方案调研，可以发现Deep Link是适合安卓端现状的技术方案，通过参考飞书的方案，我们在落地H5唤醒原生APP时，可采用中转页面 + Deep Link的实现方式。

参考文章

Android AppLink功能实现，原理和干货，包教会

H5如何实现唤起APP

Android DEPPLINK、APPLink原理简析

复杂场景下唤起App实践

Android Deep Link 深度链接，看看你在第几层？

avatar
文章
阅读
粉丝