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

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 .