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

André Cipriani Bandarra

Примечание. Примечание. Теперь доступно более простое краткое руководство по использованию доверенных веб-действий .

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

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

При использовании доверенных веб-действий проект должен быть ориентирован на API 16 или выше.

Примечание. В этом разделе вы узнаете, как настроить новый проект в Android Studio. Если вы уже знакомы с этим инструментом, смело переходите к разделу «Получение доверенной библиотеки веб-активностей» .

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

Android Studio предложит выбрать тип действия. Поскольку доверенные веб-действия используют действие, предоставленное библиотекой поддержки, выберите «Добавить действие без действия» и нажмите «Далее» .

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

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

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

Получите библиотеку поддержки доверенных веб-активностей

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

Файл, который мы ищем, — это файл, рядом с именем которого указан модуль «Модуль».

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

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

Следующим шагом в проект будет добавлена ​​библиотека поддержки доверенных веб-активностей. Добавьте новую зависимость в раздел dependencies :

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

Android Studio снова отобразит запрос на синхронизацию проекта. Нажмите ссылку «Синхронизировать сейчас» и синхронизируйте ее.

Запустите доверенную веб-активность

Настройка доверенной веб-активности достигается путем редактирования манифеста приложения Android .

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

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

Добавьте доверенную веб-активность, вставив тег 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 . Есть две важные части информации для контекста доверенных веб-действий:

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

Примечание. При запуске проекта на этом этапе строка URL-адреса настраиваемых вкладок по-прежнему будет отображаться в верхней части экрана. Это не ошибка .

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

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

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

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

В целях отладки можно настроить приложение для проверки веб-сайта и настроить 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 , чтобы оно соответствовало схеме и домену, открытому доверенной веб-активности.

Вернитесь в файл манифеста приложения 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 , найдите элемент « Включить командную строку на нерутированных устройствах» и измените его на «ВКЛЮЧЕНО» , а затем перезапустите браузер.
2. Затем в приложении «Терминал» вашей операционной системы используйте 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. Теперь приложение должно отображаться в полноэкранном режиме.

Примечание. Возможно, потребуется принудительно закрыть Chrome, чтобы он перезапустился с правильной командной строкой. Перейдите в «Настройки Android» > «Приложения и уведомления» > Chrome и нажмите « Принудительно остановить» .

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

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

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

В документации 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

Имея под рукой обе части информации, перейдите к генератору ссылок на активы , заполните поля и нажмите «Создать заявление» . Скопируйте созданный оператор и разместите его в своем домене по URL-адресу /.well-known/assetlinks.json .

Примечание. Файл AssetLinks должен находиться в каталоге /.well-known/assetlinks.json в корне домена, поскольку Chrome будет искать его только в этом месте.

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

Когда 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 , доверенные веб-действия поддерживают заставки. Экран-заставку можно настроить, добавив в проект несколько новых файлов изображений и конфигураций.

Обязательно обновите Chrome до версии 75 или более поздней и используйте последнюю версию библиотеки поддержки доверенных веб-активностей .

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

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

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

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

Плотность	Множитель	Размер	Местоположение проекта
мдпи (базовый уровень)	1,0x	320x320 пикселей	/res/drawable-mdpi/
ldpi	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/

Примечание. Альтернативой созданию изображений всех размеров является использование одного Vector Drawable . Vector Asset Studio предлагает инструменты, помогающие разработчикам преобразовывать SVG в векторные рисунки Android.

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

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

Сначала добавьте поставщика контента в манифест 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>

Примечание. Обязательно измените атрибут android:authorities при создании поставщика, поскольку два приложения не могут иметь одинаковые права доступа на устройстве.

Затем добавьте ресурс 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>

Мы с нетерпением ждем возможности увидеть, что разработчики создадут с помощью доверенных веб-действий. Чтобы оставить отзыв, свяжитесь с нами по адресу @ChromiumDev .