Для настройки доверенной веб-активности разработчикам не требуется создавать код Java, но требуется Android Studio . Это руководство было создано с использованием Android Studio 3.3 . Проверьте документацию о том, как его установить .
Создайте доверенный проект веб-активности
При использовании доверенных веб-действий проект должен быть ориентирован на API 16 или выше.
Откройте 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 . Есть две важные части информации для контекста доверенных веб-действий:
- Тег
meta-data
сообщает доверенному веб-действию, какой URL-адрес ему следует открыть. Измените атрибутandroid:value
, указав URL-адрес PWA, который вы хотите открыть. В данном примере этоhttps://airhorner.com
. - Второй тег
intent-filter
позволяет доверенной веб-активности перехватывать намерения Android, открывающиеhttps://airhorner.com
. Атрибутandroid:host
внутри тегаdata
должен указывать на домен, открываемый доверенной веб-активностью.
В следующем разделе будет показано, как настроить 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 и веб-сайтом. Полезно отладить эту часть отношений без создания веб-сайта для проверки приложения.
Вот как проверить это на устройстве разработки:
Включить режим отладки
- Откройте Chrome на устройстве разработки, перейдите по адресу
chrome://flags
, найдите элемент « Включить командную строку на нерутированных устройствах» и измените его на «ВКЛЮЧЕНО» , а затем перезапустите браузер. - Затем в приложении «Терминал» вашей операционной системы используйте 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: приложения 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
.
Создание значка
Когда 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/ |
Обновление приложения
Когда изображения для заставки созданы, пришло время добавить в проект необходимые конфигурации.
Сначала добавьте поставщика контента в манифест 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>
Мы с нетерпением ждем возможности увидеть, что разработчики создадут с помощью доверенных веб-действий. Чтобы оставить отзыв, свяжитесь с нами по адресу @ChromiumDev .