Android 使用Trusted Web Activity打包H5页面

在日常工作中，偶尔会遇到将H5页面打包为App的需求，通常会运用WebView来实现。本文介绍官方供给的另一种实现方法Trusted Web Activity。

官方文档

Trusted Web Activity 简介

Trusted Web Activity(简称TWA)，运用基于Chrome Custom Tab的协议翻开H5页面。TWA与WebView最大的不同之处在于TWA会经过Digital Asset Links验证翻开的网页和App的所有者是否为同一开发者。验证不经过时，页面会显现Custom Tab的导航栏，验证经过时，导航栏能够躲藏。

留意：TWA在Android版Chrome 72及以上版本可用。当设备上的Chrome版本不支持TWA时，会运用一般的Custom Tab翻开网页。

增加库

在app module下的build.gradle中增加代码，如下:

android {
    ...
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.4.0'
}

运用TWA

装备Manifest

在AndroidManifest中装备LauncherActivity，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application 
        ...
        >
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
            android:exported="true">
            <!--装备翻开的网页-->
            <meta-data
                android:name="android.support.customtabs.trusted.DEFAULT_URL"
                android:value="https://go.minigame.vip" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <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:host="go.minigame.vip"
                    android:scheme="https" />
            </intent-filter>
        </activity>
    </application>
</manifest>

效果如图：

装备Digital Asset Links

经过Digital Asset Links验证后，翻开的页面能够躲藏导航栏。接下来介绍怎么装备与测验Digital Asset Links。

生成assetlinks.json

经过Android Studio自带的插件App Links Assistant辅助生成。

• 在插件办理中启用App Links Assistant。

• 在顶部功能栏中，挑选Tools->App Links Assistnat翻开插件页面。

• 在插件页面中挑选open generator，生成并保存assetlinks.json文件。

• 将生成的assetlinks.json文件放到 https://domain/.well-known/路径下。

• 在AndroidManifest中装备autoVerify。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application 
        ...
        >
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
            android:exported="true">
           ...
            <intent-filter android:autoVerify="true">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data
                    android:host="go.minigame.vip"
                    android:scheme="https" />
            </intent-filter>
        </activity>
    </application>
</manifest>

调试形式

假如无法装备assetlinks.json文件，能够经过调试形式进行测验。

• 在res/values/strings中创建asset_statements，在AndroidManifest中装备。

strings

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="asset_statements">
        [{
            "relation": ["delegate_permission/common.handle_all_urls"],
            "target": {
                "namespace": "web",
                "site": "https://go.minigame.vip"}
        }]
    </string>
</resources>

AndroidManifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application 
        ...
        >
        <meta-data
            android:name="asset_statements"
            android:resource="@string/asset_statements" />
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
            android:exported="true">
           ...
            <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:host="go.minigame.vip"
                    android:scheme="https" />
            </intent-filter>
        </activity>
    </application>
</manifest>

• 在Chrome浏览器中翻开chrome://flags页面，查找Enable commandline on not-rooted devices，装备为Enable并重启浏览器。

• 运用adb指令，封闭验证网站，并重启App。

adb shell "echo '_ --disable-digital-asset-link-verification-for-url="https://go.minigame.vip"' > /data/local/tmp/chrome-command-line"

留意：假如以上步骤履行完后仍然提示验证失利，清除Chrome的缓存后再尝试。

效果如图：

个性化装备

androidbrowserhelper库支持一些个性化装备，例如发动页、沉溺式、发动时网页的方向等，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <application tools:ignore="MissingApplicationIcon">
        ...
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
            android:exported="true">
            ...
            <!--装备状态栏的色彩-->
            <meta-data
                android:name="android.support.customtabs.trusted.STATUS_BAR_COLOR"
                android:resource="@color/purple_200" />
            <meta-data
                android:name="android.support.customtabs.trusted.STATUS_BAR_COLOR_DARK"
                android:resource="@color/purple_500" />
            <!--装备状态栏的色彩-->
            <!--装备导航栏的色彩-->
            <meta-data
                android:name="android.support.customtabs.trusted.NAVIGATION_BAR_COLOR"
                android:resource="@color/purple_200" />
            <meta-data
                android:name="android.support.customtabs.trusted.NAVIGATION_BAR_COLOR_DARK"
                android:resource="@color/purple_500" />
            <!--装备导航栏的色彩-->
            <!--装备沉溺式页面 immersive、sticky-immersive-->
            <meta-data
                android:name="android.support.customtabs.trusted.DISPLAY_MODE"
                android:value="immersive" />
            <!--装备发动时网页方向 portrait、landscape-->
            <meta-data
                android:name="android.support.customtabs.trusted.SCREEN_ORIENTATION"
                android:value="portrait" />
            <!--装备发动页-->
            <!--装备发动页图标-->
            <meta-data
                android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
                android:resource="@drawable/google" />
            <!--装备发动页布景色彩-->
            <meta-data
                android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
                android:resource="@color/color_FFD200" />
            <!--装备发动页显现继续时长-->
            <meta-data
                android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
                android:value="300" />
            <meta-data
                android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
                android:value="com.chenyihong.exampledemo.twaprovider" />
            <!--装备发动页-->
            ...
        </activity>
        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="com.chenyihong.exampledemo.twaprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/twa_filepaths" />
        </provider>
    </application>
</manifest>

效果如图：

示例

演示代码已在示例Demo中增加。

ExampleDemo github

ExampleDemo gitee