Эта страница переведена с помощью Cloud Translation API.

Руководство по интеграции

André Cipriani Bandarra

Настройка Trusted Web Activity не требует от разработчиков написания кода Java, но требуется Android Studio . Это руководство было создано с использованием Android Studio 3.3 . Проверьте документацию о том, как установить его .

Создайте проект надежной веб-активности

При использовании Trusted Web Activities проект должен быть ориентирован на API 16 или выше.

Откройте Android Studio и нажмите «Начать новый проект Android Studio» .

Android Studio предложит выбрать тип Activity. Поскольку Trusted Web Activities использует Activity, предоставляемую библиотекой поддержки, выберите Add No Activity и нажмите Next .

На следующем шаге мастер предложит вам конфигурации для проекта. Вот краткое описание каждого поля:

Имя: Имя, которое будет использоваться для вашего приложения в Android Launcher .
Имя пакета: уникальный идентификатор для приложений Android в Play Store и на устройствах Android. Проверьте документацию для получения дополнительной информации о требованиях и передовых методах создания имен пакетов для приложений Android.
Место сохранения: Место в файловой системе, где Android Studio создаст проект.
Язык: Проект не требует написания кода Java или Kotlin. Выберите Java, как значение по умолчанию.
Минимальный уровень API: Библиотека поддержки требует как минимум API уровня 16. Выберите API 16 или любую версию выше.

Оставьте остальные флажки неотмеченными, так как мы не будем использовать Instant Apps или артефакты AndroidX, и нажмите Готово .

Получите библиотеку поддержки Trusted Web Activity

Чтобы настроить библиотеку Trusted Web Activity в проекте, вам нужно будет отредактировать файл сборки приложения. Найдите раздел Gradle Scripts в Project Navigator . Существует два файла с именами build.gradle , которые могут немного сбивать с толку, а описания в скобках помогают определить правильный.

Файл, который мы ищем, имеет модуль Module рядом с именем.

Библиотека Trusted Web Activities использует функции Java 8 , и первое изменение включает Java 8. Добавьте раздел compileOptions в конец раздела android , как показано ниже:

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

Следующий шаг добавит Trusted Web Activity Support Library в проект. Добавьте новую зависимость в раздел dependencies :

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

Android Studio покажет запрос на повторную синхронизацию проекта. Нажмите на ссылку Sync Now и синхронизируйте его.

Запустите Trusted Web Activity

Настройка Trusted Web Activity осуществляется путем редактирования манифеста приложения Android .

В Project Navigator разверните раздел приложения , затем манифесты и дважды щелкните AndroidManifest.xml , чтобы открыть файл.

Поскольку при создании проекта мы попросили Android Studio не добавлять никаких Activity, манифест пуст и содержит только тег приложения.

Добавьте Trusted Web Activity, вставив тег activity в тег application :

<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 App Manifest . Для контекста Trusted Web Activities есть два важных фрагмента информации:

meta-data тег сообщает Trusted Web Activity, какой URL-адрес ему следует открыть. Измените атрибут android:value на URL-адрес PWA, который вы хотите открыть. В этом примере это https://airhorner.com .
Второй тег intent-filter позволяет Trusted Web Activity перехватывать намерения Android, которые открывают https://airhorner.com . Атрибут android:host внутри тега data должен указывать на домен, открываемый Trusted Web Activity.

В следующем разделе будет показано, как настроить Digital AssetLinks для проверки связи между веб-сайтом и приложением, а также удалить строку URL.

Удалить строку URL

Для удаления строки URL-адреса Trusted Web Activity необходимо установить связь между приложением Android и веб-сайтом.

Эта связь создается с помощью ссылок на цифровые активы , и связь должна быть установлена обоими способами: из приложения на веб-сайт и с веб-сайта на приложение .

Можно настроить приложение на проверку на веб-сайте и настроить 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 и веб-сайтом. Полезно отладить эту часть связи без создания проверки веб-сайта для приложения.

Вот как это проверить на устройстве для разработки:

Включить режим отладки

Откройте Chrome на устройстве разработки, перейдите по адресу chrome://flags , найдите пункт « Включить командную строку на устройствах без прав root» и измените его на «ВКЛЮЧЕНО» , а затем перезапустите браузер.
Затем в приложении «Терминал» вашей операционной системы используйте Android Debug Bridge (устанавливается вместе с Android Studio) и выполните следующую команду:

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

Закройте Chrome и перезапустите приложение из Android Studio. Теперь приложение должно отображаться на весь экран.

Установите связь между веб-сайтом и приложением

Чтобы создать ассоциацию, разработчику необходимо собрать из приложения два вида информации:

Имя пакета: Первая информация — это имя пакета для приложения. Это то же имя пакета, которое было сгенерировано при создании приложения. Его также можно найти внутри модуля build.gradle , в Gradle Scripts > build.gradle (Module: app) , и это значение атрибута applicationId .
SHA-256 Fingerprint: приложения Android должны быть подписаны для загрузки в Play Store. Та же подпись используется для установления связи между веб-сайтом и приложением через SHA-256 finger ключа загрузки.

В документации Android подробно объясняется, как сгенерировать ключ с помощью Android Studio . Обязательно запишите путь , псевдоним и пароли для хранилища ключей, так как они вам понадобятся для следующего шага.

Извлеките отпечаток SHA-256 с помощью 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 , заполните поля и нажмите Generate Statement . Скопируйте сгенерированный отчет и подайте его со своего домена, с URL /.well-known/assetlinks.json .

Создание значка

Когда Android Studio создает новый проект, он будет иметь иконку по умолчанию. Как разработчик, вы захотите создать свою собственную иконку и отличить свое приложение от других в Android Launcher.

Android Studio содержит Image Asset Studio , которая предоставляет инструменты, необходимые для создания правильных значков для любого разрешения и формы, необходимых вашему приложению.

В Android Studio перейдите в File > New > Image Asset , выберите Launcher Icons (Adaptative and Legacy) и следуйте инструкциям мастера, чтобы создать собственный значок для приложения.

Генерация подписанного APK

После того, как файл assetlinks будет размещен в вашем домене, а тег asset_statements будет настроен в приложении Android, следующим шагом станет генерация подписанного приложения. Опять же, шаги для этого подробно документированы .

Выходной APK можно установить на тестовое устройство с помощью adb:

adb install app-release.apk

Если проверка не дала результата, можно проверить наличие сообщений об ошибках с помощью Android Debug Bridge из терминала вашей ОС, подключив тестовое устройство.

adb logcat | grep -e OriginVerifier -e digital_asset_links

После создания APK-файла вы можете загрузить приложение в Play Store .

Добавление заставки

Начиная с Chrome 75 , Trusted Web Activities поддерживают Splash Screens. Splash Screen можно настроить, добавив в проект несколько новых файлов изображений и конфигураций.

Обязательно обновите Chrome до версии 75 или выше и используйте последнюю версию Trusted Web Activity Support Library .

Генерация изображений для экрана-заставки

Устройства Android могут иметь разные размеры экрана и плотность пикселей . Чтобы обеспечить хороший вид экрана-заставки на всех устройствах, вам нужно будет сгенерировать изображение для каждой плотности пикселей.

Полное объяснение пикселей, независимых от дисплея (dp или dip), выходит за рамки данной статьи, но одним из примеров может служить создание изображения размером 320x320dp, представляющего собой квадрат размером 2x2 дюйма на экране устройства любой плотности и эквивалентного 320x320 пикселям при плотности mdpi .

Оттуда мы можем вывести размеры, необходимые для других плотностей пикселей. Ниже приведен список с плотностью пикселей, множителем, примененным к базовому размеру (320x320dp), результирующим размером в пикселях и местом, куда следует добавить изображение в проекте Android Studio.

Плотность	Множитель	Размер	Местоположение проекта
mdpi (базовый)	1.0x	320x320 пикселей	/res/drawable-mdpi/
лдпи	0,75x	240x240 пикселей	/res/drawable-ldpi/
hdpi	1,5x	480x480 пикселей	/res/drawable-hdpi/
xhdpi	2.0x	640x640 пикселей	/res/drawable-xhdpi/
xxhdpi	3.0x	960x960 пикселей	/res/drawable-xxhdpi/
xxxhdpi	4.0x	1280x1280 пикселей	/res/drawable-xxxhdpi/

Обновление приложения

После создания изображений для заставки пришло время добавить в проект необходимые конфигурации.

Сначала добавьте поставщика контента в манифест 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 Manifest для настройки 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 Activities. Чтобы оставить отзыв, свяжитесь с нами по адресу @ChromiumDev .