集成指南

设置 Trusted Web Activity 无需开发者自行编写 但 Android Studio 是 必填字段。本指南是使用 Android Studio 3.3 创建的。请参阅有关如何安装的说明文档

创建 Trusted Web Activity 项目

使用 Trusted Web Activity 时,项目必须以 API 16 或更高版本为目标平台。

打开 Android Studio,然后点击 Start a new Android Studio project

Android Studio 将提示您选择一个 Activity 类型。由于 Trusted Web Activity 使用的是 Activity 由支持库提供,选择 Add No Activity,然后点击 下一步

下一步,向导将提示您对项目进行配置。这里有 对每个字段进行简短说明:

  • 名称:您的应用要在 Android 启动器
  • Package Name:设备上 Android 应用的唯一标识符 Play 商店和 Android 设备上的应用。查看 文档 如需详细了解创建软件包的要求和最佳做法 Android 应用的名称。
  • Save location:Android Studio 将在文件中创建项目的位置 系统。
  • 语言:项目不需要编写任何 Java 或 Kotlin 代码。 选择 Java 作为默认值。
  • 最低 API 级别:支持库要求最低 API 级别 16。 选择上述任意版本的 API 16。

不要选中其余的复选框,因为我们不会使用免安装应用 或 AndroidX 工件,然后点击 Finish

获取 Trusted Web Activity 支持库

要在项目中设置 Trusted Web Activity 库,您需要修改 Application build 文件。在 Project Navigator 中查找 Gradle Scripts 部分。 有两个名为 build.gradle 的文件,这可能有点令人困惑, 括号中的描述有助于识别正确的名称。

我们要找的文件是模块 Module 旁边 名称。

Trusted Web Activity 库使用 Java 8 功能 第一项更改启用了 Java 8。将 compileOptions 部分添加到 android 部分的底部,如下所示:

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

下一步会将 Trusted Web Activity 支持库添加到项目中。添加新的 依赖项添加到 dependencies 部分:

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

Android Studio 将显示提示,要求再次同步项目。 点击 Sync Now 链接,然后进行同步。

启动 Trusted Web Activity

设置 Trusted Web Activity 可通过修改 Android 应用清单

Project Navigator 上,展开 app 部分,然后展开 manifests 并双击 AndroidManifest.xml 打开文件。

由于我们要求 Android Studio 不要向项目添加任何 Activity, 则该清单为空,且仅包含应用标记。

application 标记中插入 activity 标记,即可添加 Trusted Web Activity:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">

           <!-- Edit android:value to change the url opened by the Trusted Web Activity -->
           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="https://airhorner.com" />

           <!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>

           <!--
             This intent-filter allows the Trusted Web Activity to handle Intents to open
             airhorner.com.
           -->
           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>

               <!-- Edit android:host to handle links to the target URL-->
               <data
                 android:scheme="https"
                 android:host="airhorner.com"/>
           </intent-filter>
        </activity>
    </application>
</manifest>

添加到 XML 中的标记是标准的 Android 应用清单。 关于可信网络,有两条相关信息 活动:

  1. meta-data 标记会告知 Trusted Web Activity 应打开哪个网址。更改 将 android:value 属性替换为要打开的 PWA 的网址。在 在此示例中为 https://airhorner.com
  2. 第二个 intent-filter 标记允许 Trusted Web Activity 拦截 Android 用于打开 https://airhorner.com 的 intent。android:host 属性 data 标记内的网址必须指向 Trusted Web Activity 打开的网域。

下一部分将介绍如何设置 Digital AssetLinks 以验证网站与应用之间的关系,并移除网址栏。

移除网址栏

Trusted Web Activity 需要在 Android 应用之间建立关联 和要建立的网站来移除网址栏。

此关联是通过 Digital Asset Links 并且必须以两种方式建立关联 从应用传输到网站从网站传送到应用

您可以将应用设置为网站验证,并将 Chrome 设置为跳过 网站到应用的验证,以进行调试。

打开字符串资源文件 app > res > values > strings.xml,并将 Digital AssetLinks 声明如下:

<resources>
    <string name="app_name">AirHorner Trusted Web Activity</string>
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://airhorner.com\"}
        }]
    </string>
</resources>

更改 site 属性的内容,使其与架构和网域匹配 Trusted Web Activity 打开的文件。

返回 Android 应用清单文件 AndroidManifest.xml,链接到 语句,但这次是作为meta-data application 标记:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <meta-data
            android:name="asset_statements"
            android:resource="@string/asset_statements" />

        <activity>
            ...
        </activity>

    </application>
</manifest>

现在,我们已建立从 Android 应用到 网站。这有助于调试关系的这一部分,而不创建 从网站到应用验证

在开发设备上测试的方法如下:

启用调试模式

  1. 在开发设备上打开 Chrome,前往 chrome://flags,然后搜索 针对名为在未取得 root 权限的设备上启用命令行的项进行更改,然后将其更改 已启用,然后重启浏览器。
  2. 接下来,在您操作系统的“终端”应用程序中,使用 Android 调试桥 (随 Android Studio 一起安装),并运行以下命令:
adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"

关闭 Chrome,然后在 Android Studio 中重新启动您的应用。通过 应用现在应全屏显示。

开发者需要从 应用才能建立关联:

  • Package Name:第一条信息是应用的软件包名称。这个 与创建应用时生成的软件包名称相同。您还可以在 在 Module build.gradle 内, Gradle 脚本 >build.gradle (Module: app),它是 applicationId 属性。
  • SHA-256 指纹:Android 应用必须经过签名才能 已上传到 Play 商店同一签名用于建立 通过 SHA-256 指纹在网站和应用之间建立 上传密钥。

Android 文档详细介绍了如何使用 Android Studio 生成密钥。 请务必记下密钥库的 pathaliaspasswords,例如 您在下一步中会用到它。

使用 keytool、 使用以下命令:

keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]

SHA-256 指纹的值将印在证书下方 指纹部分。输出示例如下:

keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password

Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
   SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
   SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3

掌握了这两类信息后,请访问assetlinks 生成器 请填写相应字段,然后点击生成语句。复制生成的语句 并通过网址 /.well-known/assetlinks.json 从您的网域提供该应用。

创建图标

当 Android Studio 创建新项目时,它将附带一个默认图标。 作为开发者,您需要创建自己的图标, Android 启动器中的其他应用。

Android Studio 包含 Image Asset Studio, 它提供了制作正确图标所需的工具, 并据此打造您的应用需求

在 Android Studio 中,前往 File > New > Image Asset,选择 Launcher Icons (Adaptative and Legacy),然后按照向导中的步骤操作。 为应用创建自定义图标。

生成已签名的 APK

您的网域中有 assetlinks 文件和 asset_statements 标记后 下一步是生成已签名的应用。 同样, 记录

您可以使用 adb 将输出 APK 安装到测试设备中:

adb install app-release.apk

如果验证步骤失败,可以检查是否存在错误 使用 Android 调试桥从操作系统的终端运行,并使用 已连接测试设备。

adb logcat | grep -e OriginVerifier -e digital_asset_links

在生成上传 APK 后,您现在可以将应用上传到 Play 商店了。

添加启动画面

Chrome 75 开始,Trusted Web Activity 支持启动画面。 要设置启动画面,只需在 项目。

请务必更新至 Chrome 75 或更高版本,并使用 最新版本的 Trusted Web Activity 支持库

为启动画面生成图片

Android 设备可以具有不同的屏幕尺寸像素密度。 为了确保启动画面在所有设备上都能正常显示,您需要 每种像素密度对应的图像。

有关与屏幕无关的像素(dp 或 dip)的完整说明 不在本文的讨论范围之内,但您可以参考创建 为 320x320dp,表示在任意密度的设备屏幕上有一个 2x2 英寸的方形 相当于 mdpi 密度下的 320x320 像素。mdpi

我们可以据此推导出其他像素密度所需的尺寸。以下是一个列表 像素密度、应用于基本尺寸 (320x320dp) 的乘数、 所得到的尺寸(以像素为单位),以及在 Android Studio 项目中。

密度 系数 大小 项目位置
mdpi(基准) 1.0 倍 320x320 像素 /res/drawable-mdpi/
ldpi 0.75 倍 240x240 像素 /res/drawable-ldpi/
hdpi 1.5 倍 480x480 像素 /res/drawable-hdpi/
xhdpi 2.0 倍 640x640 像素 /res/drawable-xhdpi/
xxhdpi 3.0 倍 960x960 像素 /res/drawable-xxhdpi/
xxxhdpi 4.0 倍 1280x1280 像素 /res/drawable-xxxhdpi/

更新应用

生成启动画面图片后,接下来要添加必要的 添加到项目。

首先,添加一个 content-provider 添加到 Android 清单 (AndroidManifest.xml)。

<application>
    ...
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="com.example.twa.myapplication.fileprovider"
        android:grantUriPermissions="true"
        android:exported="false">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/filepaths" />
    </provider>
</application>

然后,添加 res/xml/filepaths.xml 资源,并指定 twa 启动画面的路径:

<paths>
    <files-path path="twa_splash/" name="twa_splash" />
</paths>

最后,将 meta-tags 添加到 Android 清单中,以自定义 LauncherActivity:

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
    ...
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
               android:resource="@drawable/splash"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
               android:resource="@color/colorPrimary"/>
    <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.example.twa.myapplication.fileprovider"/>
    ...
</activity>

确保 android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY 的值 标记与 android:authorities 属性中定义的 provider 标记之间。

将 LauncherActivity 设为透明

此外,请确保 LauncherActivity 是透明的,以避免出现白色屏幕 通过为 LauncherActivity 设置半透明主题来显示启动画面:

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@android:style/Theme.Translucent.NoTitleBar">
    ...
    </activity>
</application>

我们期待看到开发者使用 Trusted Web 构建成果 activity。如有任何反馈,请通过以下方式与我们联系: @ChromiumDev.