Эта страница переведена с помощью 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 .