Как pwa загрузить в google play

Добавление вашего прогрессивного веб-приложения в Google Play

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

1. Добро пожаловать

В этом практическом занятии вы возьмете развернутое вами прогрессивное веб-приложение и завернете его в приложение для распространения в магазине Google Play.

Что вы узнаете

• Как использовать Bubblewrap для упаковки вашего прогрессивного веб-приложения для магазина Google Play
• Что такое ключ подписи и как его использовать
• Как создать новое приложение в консоли разработчика Google Play и настроить тестовую версию, чтобы протестировать ваше приложение перед публикацией.
• Что такое ссылки на цифровые активы и как их добавить в ваше веб-приложение

То, что вы должны знать

• Что такое прогрессивные веб-приложения
• Как использовать инструменты командной строки
• Основные команды оболочки Bash , или как перевести их в выбранную вами оболочку

Что вам понадобится

• Прогрессивное веб-приложение, опубликованное в Интернете, и вы можете вносить изменения в него.
• Интерфейс командной строки Bubblewrap установлен и готов к использованию
• Аккаунт разработчика Google Play
• Ваш существующий ключ подписи, если у вас уже есть приложения, запущенные в Google Play.
• Устройство Android или Chrome OS для тестирования

Что не будет покрыто

• Ограничение вашего PWA только устройствами Android или только устройствами Chrome OS
• Развертывание PWA для Chrome OS и приложения Android для мобильных устройств в рамках одного приложения .
• Как соблюдать платежную политику Google Play в PWA .

2. Пузырьковая упаковка вашего PWA

Bubblewrap — это инструмент, позволяющий превратить ваше прогрессивное веб-приложение в Android App Bundle так же просто, как запустить пару команд CLI. Это достигается путем создания проекта Android, который запускает ваше PWA как доверенное веб- действие.

Прежде чем начать Какая информация может понадобиться Bubblewrap о вашем PWA для создания проекта Android?

Для начала создайте каталог для вашего проекта и перейдите в него:

$ mkdir my-pwa && cd my-pwa 

Затем запустите инструмент командной строки Bubblewrap, чтобы сгенерировать конфигурацию и проект Android для Android App Bundle, который вы загрузите в Play:

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json 

Важно : при первом запуске Bubblewrap будет запрашиваться загрузка дополнительных зависимостей. Этими зависимостями являются Java Development Kit и инструменты командной строки Android . Чтобы обеспечить загрузку правильных версий для каждой зависимости, мы настоятельно рекомендуем разрешить Bubblewrap загружать правильные версии вместо использования уже имеющихся на вашем компьютере.

Здесь Bubblewrap инициализируется расположением файла манифеста веб-приложения PWA. Это создаст конфигурацию по умолчанию из манифеста веб-приложения и запустит мастер в консоли, который позволит вам изменить конфигурацию по умолчанию. Следуйте указаниям мастера, чтобы изменить любое из значений, сгенерированных инструментом.

Ключ подписи

Google Play Store требует, чтобы пакеты приложений были подписаны цифровой подписью с помощью сертификата при загрузке, часто называемого ключом подписи. Это самозаверяющий сертификат, отличающийся от того, который используется для обслуживания вашего приложения по протоколу HTTPS .

Bubblewrap запросит путь к ключу при создании приложения. Если вы используете существующий список Play Store для своего приложения, вам нужно будет добавить путь к тому же ключу, который используется в этом списке.

Если у вас нет существующего ключа подписи и вы создаете новый список в Play Store, вы можете использовать значение по умолчанию, предоставленное Bubblewrap, чтобы он создал для вас новый ключ:

Важно : Убедитесь, что ваш ключ и пароли хранятся в надежном месте. Они понадобятся вам для создания приложения в первый раз, а также для регулярного обновления вашего приложения в Play Store.

Выход пузырчатой ​​пленки

После инициализации проекта Bubblewrap и завершения работы мастера будут созданы следующие элементы:

• twa-manifest.json — конфигурация проекта, отражающая значения, выбранные в мастере Bubblewrap. Вы захотите отслеживать этот файл с помощью вашей системы контроля версий, так как его можно использовать для регенерации всего проекта Bubblewrap, если это необходимо.
• Файлы проекта Android . Остальные файлы в каталоге представляют собой сгенерированный проект Android. Этот проект является источником, используемым для команды сборки Bubblewrap. При желании вы также можете отслеживать эти файлы с помощью вашей системы контроля версий.
• (Необязательно) Ключ подписи. Если вы решите, чтобы Bubblewrap создал для вас ключ подписи, ключ будет выведен в место, указанное в мастере. Убедитесь, что ключ хранится в безопасном месте, и ограничьте количество людей, имеющих к нему доступ; это то, что используется для доказательства того, что приложения в Play Store созданы вами.

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

Создайте свой набор приложений для Android

Из того же каталога, в котором вы запустили команду инициализации Bubblewrap, выполните следующее (вам понадобятся пароли для вашего ключа подписи):

$ bubblewrap build 

Команда сборки сгенерирует два важных файла:

• app-release-bundle.aab — набор приложений Android для вашего PWA. Это файл, который вы загрузите в Google Play Store.
• app-release-signed.apk — формат упаковки Android, который можно использовать для установки приложения непосредственно на устройство разработки с помощью bubblewrap install .

3. Попробуйте — пузырчатая упаковка

Теперь твоя очередь! Используя то, что вы узнали на предыдущем шаге, попробуйте выполнить следующее:

1. Создайте каталог для хранения сгенерированного проекта Android.
2. Инициализируйте этот каталог с помощью Bubblewrap и манифеста веб-приложения PWA.
3. Создайте новый ключ подписи или повторно используйте существующие, если они у вас есть.
4. Создайте свой Android App Bundle из сгенерированного проекта Android.

4. Добавление вашего приложения в Google Play Store

Теперь, когда у вас есть Android App Bundle для PWA, пришло время загрузить его в Google Play Store! После того, как вы зарегистрировали свою учетную запись разработчика, вы можете перейти в Play Console , чтобы войти в систему и приступить к работе.

Прежде чем начать. Какие типы ключей подписи вам понадобятся для создания выпуска в Play?

Создать приложение

После входа в систему вы увидите экран со всеми вашими приложениями. Вверху есть кнопка « Создать приложение », при нажатии которой отобразится следующий экран, который поможет вам создать новый список приложений для Android.

Здесь нужно заполнить несколько полей, включая имя приложения, язык по умолчанию, приложение это или игра, бесплатное или платное, а также ряд объявлений. Вы не сможете создать приложение, не согласившись с декларациями, поэтому важно, чтобы вы прочитали их и поняли, прежде чем соглашаться с ними.

Несмотря на то, что у вас есть возможность сделать ваше приложение бесплатным или платным, PWA, которое вы связываете для включения в Play, должно быть доступно для более широкого Интернета, чтобы работать, и нет никакого способа надежно определить, что пользователь получает доступ к нему из вашего приложения вместо этого. из своего браузера или другим методом установки. Таким образом, мы рекомендуем вам монетизировать PWA другими способами, кроме взимания платы за загрузку из магазина.

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

Настроить внутреннее тестирование

Внутреннее тестирование — отличный способ быстро выпустить приложение без проверки выбранной вами группой доверенных тестировщиков. Просмотрите задачи в контрольном списке « Начать тестирование сейчас » и выберите « Выбрать тестировщиков ».

Нажав на эту задачу, вы попадете на страницу внутреннего тестирования . Здесь вы будете управлять настройкой тестирования для своего приложения. Вы можете снова перейти к нему, открыв раздел « Тестирование » в меню « Выпуск » на боковой панели. Первое, что нужно сделать, это создать список адресов электронной почты тестировщиков для тестирования вашего приложения. Для этого нажмите ссылку « Создать список адресов электронной почты» в разделе « Тестеры » на странице. Это откроет всплывающее окно для создания списка адресов электронной почты.

В этом всплывающем окне вы назовете свой список адресов электронной почты и сможете ввести адреса электронной почты вручную или загрузить CSV-файл адресов электронной почты для использования. После этого нажмите кнопку Сохранить изменения . Вы сможете вернуться к уже созданным спискам адресов электронной почты, чтобы добавить или удалить адреса электронной почты по мере необходимости. После добавления тестировщиков пришло время создать тестовую версию. Нажмите кнопку « Создать новую версию » в верхней части страницы.

Создать тестовую версию

После нажатия кнопки « Создать новую версию » вам будет предложено пройти через несколько разделов. Во-первых, App Integrity , вы выбираете, как управлять ключом подписи вашего приложения. Параметр по умолчанию — позволить Google управлять вашим ключом подписи. Это рекомендуемый вариант, поскольку он является безопасным и обеспечивает возможность восстановления вашего приложения в случае потери ключа загрузки.

Подписание игрового приложения

Важно! Начиная с августа 2021 года требуется подписание приложения Play , чтобы Play Store мог управлять и защищать окончательное подписание вашего приложения. С помощью Play App Signing Google управляет ключом подписи вашего приложения и защищает его от вашего имени, а также использует его для подписания ваших приложений Android для распространения среди пользователей. Ключ, сгенерированный Bubblewrap, становится вашим ключом загрузки вместо ключа подписи . В то время как Google управляет ключом подписи для вас, вы управляете своим ключом загрузки и храните его в тайне, который вы используете каждый раз, когда подписываете свое приложение для загрузки в Play Console. Эта система позволяет вам сбросить ключ загрузки, если он когда-либо будет потерян или скомпрометирован, связавшись со службой поддержки Play .

Загрузка и завершение приложения

После выбора способа управления ключом подписи вам будет предложено загрузить набор приложений в выпуск. Для этого перетащите файл app-release-bundle.aab , сгенерированный Bubblewrap, в форму. Чтобы завершить выпуск, заполните оставшиеся сведения о выпуске и нажмите кнопку « Сохранить » , затем « Просмотреть выпуск » и, наконец, кнопку « Начать развертывание для внутреннего тестирования », чтобы начать выпуск. Это сделает ваше приложение доступным для ваших внутренних тестировщиков! Вернувшись на вкладку « Тестеры » на странице « Внутреннее тестирование », вы можете скопировать ссылку, чтобы поделиться ею со своими тестировщиками, чтобы они могли получить доступ к вашему приложению.

Хотя приложения для тестирования не проходят полную проверку в Play Store, может пройти некоторое время, прежде чем они станут доступны для загрузки и тестирования после создания и развертывания выпуска.

5. Попробуйте — создайте приложение

Теперь твоя очередь! Используя то, что вы узнали на предыдущем шаге, попробуйте выполнить следующее:

1. Создайте новое приложение для PWA в Play Console.
2. Настройте внутреннее тестирование приложения и добавьте себя в качестве тестировщика.
3. Загрузите пакет приложения и создайте тестовую версию для своего приложения.
4. Установите свое приложение из Play Store на свое устройство Android или Chrome OS, используя тестовую ссылку!

6. Ссылки на цифровые активы

Если вам приходилось тестировать PWA в Play, вы могли заметить, что оно не работает в полноэкранном режиме. Это потому, что вы еще не подтвердили право собственности на сайт с помощью файла ссылок на цифровые активы . Хотя Bubblewrap может настроить и создать пакет приложений для Android, вам необходимо завершить ссылку, обновив веб-приложение.

Прежде чем начать: как цифровые активы могут доказать, что ваше приложение и ваше PWA принадлежат вам?

Получите отпечаток SHA-256 вашего приложения

Чтобы настроить ссылки на цифровые активы вашего PWA, вам потребуется отпечаток пальца SHA-256 для сертификата, используемого для подписи пакета, который пользователь получает на свой телефон .

С подписанием приложения Play

Если вы настроили подписку Play App Signing для своего приложения при создании выпуска (что было рекомендовано ранее), отпечаток SHA-256 можно найти в Play Console. Помните, что этот сертификат отличается от того, который использовался для загрузки вашего приложения . Чтобы получить отпечаток, из своего приложения в Play Console перейдите в Releases->Setup->App Integrity . Там вы увидите ряд параметров в разделе Сертификат ключа подписи приложения . Скопируйте значение отпечатка сертификата SHA-256 .

Без подписи приложения Play

Если вы отказались от подписки приложения Play, ключ, используемый для подписи окончательного приложения, будет тем же, что вы используете для загрузки приложения в Play Console. Вы можете использовать keytool Java для извлечения отпечатка пальца:

$ keytool -list -v \ -keystore \ -alias \ -keypass \ -storepass | grep SHA256 $ SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2. 

Чтобы использовать его, вам нужно знать путь к вашему ключу подписи и соответствующие пароли. Скопируйте шестнадцатеричные значения ключа SHA256.

Создайте файл ссылок на цифровые активы

Bubblewrap может управлять полученными отпечатками подписи и создавать для вас правильный файл ссылок на цифровые активы. Чтобы добавить отпечаток с помощью Bubblewrap, выполните следующую команду из того же каталога, созданного во время Bubblewraping Your PWA , заменив отпечатком, скопированным на предыдущем шаге.

$ bubblewrap fingerprint add

Эта команда добавит отпечаток пальца в список отпечатков приложения и сгенерирует файл assetslinks.json . Загрузите этот файл в каталог .well-known того же источника , что и ваше PWA.

assetslinks.json должен быть помещен в .well-known , должен называться assetslinks.json , должен находиться в том же источнике, что и ваше PWA, и, следовательно, должен быть доступен по адресу my-pwa.origin/.well-known/assetlinks.json. . Любое отклонение от этого не позволит его найти и правильно связать с вашим приложением. Вы можете убедиться, что ваша ссылка на цифровые активы настроена правильно, используя API ссылок на цифровые активы .

7. Попробуйте — ссылки на цифровые активы

Теперь твоя очередь! Используя то, что вы узнали на предыдущем шаге, попробуйте выполнить следующее:

1. Найдите отпечаток пальца SHA-256 вашего приложения.
2. Создайте файл ссылок на цифровые активы для своего приложения.
3. Загрузите файл ссылок на цифровые активы в PWA.
4. Убедитесь, что ваш файл ссылок на цифровые активы настроен правильно, используя API и приложение для тестирования.

8. Проверьте свои знания

Прежде чем закончить, проверьте свои знания и посмотрите, что вы узнали, ответив на следующие вопросы. Не смотрите на ответы!

После создания своего проекта Android с помощью Bubblewrap Салли передает сгенерированный файл ______ в свою систему контроля версий, чтобы она могла перестроить его в любое время.

Джек хочет, чтобы его команда QA протестировала его приложение PWA для Android. Он ______ свой пакет Android App Bundle для внутреннего тестирования.

строит и загружает

знаки и загрузки

Android-приложение Oogie Boogie PWA не работает в полноэкранном режиме. Чтобы исправить это, они получают отпечаток своего сертификата SHA-256 для своего ______ и загружают его в свой файл ссылок на цифровые активы, расположенный по адресу ______ в том же источнике, что и их PWA.

ключ загрузки, /.well-known/assetlinks.json

загрузить ключ, /assetlinks.json

ключ подписи, /.well-known/assetlinks.json

ключ подписи, /assetlinks.json

9. Проверьте свои знания — ответы

Ответы на вопросы теста «Проверь свои знания»!

1. После создания своего проекта Android с помощью Bubblewrap Салли передает сгенерированный файл ______ в свою систему контроля версий, чтобы она могла перестроить его в любое время.
   • Ответ: twa-manifest.json
   • Раздел: пузырчатая упаковка вашего PWA
2. Джек хочет, чтобы его команда QA протестировала его приложение PWA для Android. Он ______ свой пакет Android App Bundle для внутреннего тестирования.
   • Ответ: знаки и загрузки
   • Раздел: Добавление вашего приложения в Google Play Store
3. Android-приложение Oogie Boogie PWA не работает в полноэкранном режиме. Чтобы исправить это, они получают отпечаток своего сертификата SHA-256 для своего ______ и загружают его в свой файл ссылок на цифровые активы, расположенный по адресу ______ в том же источнике, что и их PWA.
   • Ответ: ключ подписи, /.well-known/assetlinks.json.
   • Раздел: Ссылки на цифровые активы

10. Поздравляем!

Поздравляем! Вы успешно узнали, как добавить PWA в Google Play Store!

Когда вы почувствуете, что готовы сделать это, попробуйте выполнить следующие шаги самостоятельно:

• Создание рабочей версии приложения
• Изучите дополнительные варианты выпуска вашего приложения , включая выпуски только для Chrome OS и выпуски, включающие приложение Android для мобильных устройств и PWA для Chrome OS.
• Узнайте, как настроить Play Billing для своего приложения и внедрить его в PWA и серверную часть .

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Play Store теперь принимает прогрессивные веб-приложения (PWA)

Дисклеймер: я не связан с Google Play, Chrome или любой упомянутой компанией. Это не официальное заявление. Логотип и названия используются только для иллюстрации.

В Chrome 72 для Android реализована долгожданная функция Trusted Web Activity. Это означает, что теперь мы можем распространять PWA через каталог Google Play и запускать Chrome без UI в автономном режиме для нативных пакетов! Я некоторое время поигрался с этой функцией, копаясь в API, а здесь расскажу, о чём речь, чего ожидать и что доступно уже сегодня.

PWA в каталоге Play Store

Chrome 72 для Android теперь доступен для всех пользователей, и в этой версии реализована система Trusted Web Activity (TWA). Если вкратце, запуск Chrome осуществляется в автономном режиме (без панели инструментов и UI) для нативных Android-пакетов.

Начнём с того, что публикация в каталоге — не такая простая процедура, какой она должна быть (например, ввести URL в Google Play — и приложение запустится). Кроме того, нельзя использовать доступный WebAPK и опубликовать приложение в каталоге. Здесь используется Java API, который через сервисы взаимодействует с Chrome и, кажется, находится на ранней стадии разработки. Поэтому придётся многое сделать вручную.

Я рассматриваю это как первый шаг. Наверняка вскоре появится лучший инструментарий (возможно, от сообщества) с поддержкой всех доступных API и запуском в один щелчок. Но на нынешнем API можно опубликовать в каталоге лаунчер PWA. Я поделюсь своим опытом, как это делается.

По какой-то причине эта функция ещё не появилась в Chrome Platform Status, и документация до сих пор не обновилась (она вообще не обновлялась более 15 месяцев).

Обновление от 5 февраля. Блог Chromium опубликовал короткую заметку о поддержке TWA и некоторые технические детали, упомянутые в этой статье.

Обновление от 1 февраля. Пол Кинлан, ведущий разработчик Chrome в Google, подтвердил выпуск функции TWA и что документация задерживается: причина задержки в том, что разрешение на новую функцию Chrome 72 было принято в последнюю минуту.

Видео от Пита Ле Пейджа годичной давности с объяснением TWA

Зачем публиковать PWA в каталоге?

Это веб-платформа, Карл! Зачем использовать каталог?

Ну, это долгий разговор, но я много лет консультирую большой и малый бизнес, и когда мы рассматриваем разработку PWA, постоянно упоминается каталог приложений: «Наши пользователи будут там искать приложение», «У нас уже есть собственное приложение, и мы не хотим терять пользователей», «Нам нужен доступ к собственному API» или «Я хочу монетизировать PWA».

Отныне стала возможной публикация PWA в каталоге, а также работа из браузера. Конечно, это отдельная операция. Play Store не эмулирует Microsoft Store: ваше PWA не появится в магазине, если вы не скомпилируете APK и не опубликуете его.

Преимущества перед стандартными PWA

Кроме нового механизма распространения и новых пользователей из каталога (и даже из поиска Google в разделе «Приложения»), появляются и другие преимущества:

• Возможность разместить виджет на главном экране.
• Ярлыки приложений (при долгом нажатии на значок приложения) и другие глубокие интеграции с ОС.
• Работа с «компаньоном» на носимых устройствах или расширением Android Auto.
• Повторная установка после жёсткого сброса или резервного восстановления на новом телефоне.
• Фоновые службы, которые обращаются к собственным функциям (связь с PWA всё ещё ограничена — подробнее ниже).
• Монетизация (пока ограничена, подробнее ниже).
• Некоторые нативные экраны, смешанные с контентом PWA.
• Распространение более одной иконки PWA в лаунчере и/или на начальном экране, указывающих на разные URL (в пределах одного хоста).
• Лучшая поддержка интернационализации.

В чём инновация?

В каталоге уже были некоторые PWA, но теперь их гораздо легче подготовить и опубликовать

В Google Play Store уже есть некоторые PWA, такие как Google Maps Go, Instagram Lite и Twitter Lite. Первое приложение использует некую частную версию pre-TWA, а последние два — WebView, это был хоть не идеальный, но единственный способ сделать что-то подобное до появления TWA. В приложениях много машинного кода для некоторых вещей, таких как уведомления. Мы хотим опубликовать PWA как веб-разработчики и не хотим писать много кода Java.

TWA — специальный режим на базе кастомных вкладок Chrome, которые с версии Chrome 45 позволяют запустить встроенный в приложение браузер.

Является ли TWA гибридным фреймворком, похожим на Cordova?

Нет. С Cordova и другими гибридными решениями вы обычно поставляете ресурсы (HTML, JS, CSS и т. д.). в пакете APK. Кроме того, там отличается движок, он изолирован от пользовательского браузера, поэтому не поддерживает сеансы или совместное использование кэша.

Вот как выглядит PWA с Trusted Web Activity. Я пока не вижу реализации цветовых схем

С помощью Trusted Web Activity не нужно упаковывать файлы ресурсов (только нативные компоненты, если они нужны); все ресурсы загружаются и обновляются на лету через сервис-воркера. Ваш PWA всегда рендерится установленной версией Chrome, с её хранилищем, кэшем и сеансами. Таким образом, если пользователь открыл сеанс на веб-сайте, а потом установил приложение из Play Store, он будет уже авторизован в системе.

Требования Play Store

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

• Передача PWA Criteria (HTTPS, сервис-воркер с обработчиком событий fetch, манифест веб-приложения со значком 512px, background_color и осноным набором других свойств).
• Рейтинг производительности минимум 80/100 в Lighthouse (доступен в инструментах разработчика Chrome или как NPM CLI).
• Все текущие правила Play Store.

Я пока не уверен, что команда Play Store QA проверяет все эти требования при публикации приложения.

Модель безопасности PWA в Play Store

Ваше PWA будет подчиняться модели безопасности браузера, а не нативного приложения, пока вы не добавите нативный код непосредственно в APK. Поскольку всё под контролем браузера, пользователь должен знать, что даже если он только что установил приложение, у него появятся данные сеанса, локальные хранилища и разрешения, уже установленные для этого хоста в браузере. Вот почему при первом запуске ему показывают мини-сообщение «Работает в Chrome»:

Кроме того, когда пользователь удалит приложение, то получит предупреждение, что состояние и данные приложения по-прежнему доступны в Chrome, поэтому при необходимости следует очистить кэш. Среди таких следов, например, разрешение Web Push: даже если пользователь удалит приложение, он всё равно продолжит получать push-уведомления. Сообщение было замечено Генри Лимом:

О необходимости таких уведомлений рассказал Пол Кинлан из команды Chrome.

Способы разработки

Для создания пакета с TWA сначала понадобится Android Studio. Пока что все варианты экспериментальные и описаны только примерами кода в репозитории Chrome на GitHub.

Варианты разработки приложений с TWA:

Использование высокоуровневой библиотеки Java Support Library от команды Chrome: в этом случае не нужно писать собственный код Java или Kotlin. Создаёте проект Android Studio (или клонируете пример), настраиваете некоторые метаданные в AndroidManifest.xml из манифеста веб-приложения — и готово.

Распространение манифеста

PWA в App Store не примет манифест веб-приложения; требуется вручную скопировать некоторые значения. Значки берутся из папки “res”, как в любом нативном Android-приложении, блокировку ориентации следует определить в записи активности AndroidManifest и т. д.

При использовании библиотеки поддержки экран-заставка создаётся автоматически, но другие свойства манифеста не будут использоваться. На самом деле, в моём тестировании я не смог применить цветную тему, когда на экране открывалось PWA.

Валидация URL

TWA будет работать только после цифрового рукопожатия домена с приложением. Механизм известен как Digital Assets Links. Он создаёт доверительные отношения между вашим хостом и APK, доказывая, что вы являетесь владельцем PWA и что вы не будете публиковать в Play Store приложения, которые вам не принадлежат. Он также устанавливает цифровой канал между сайтом и нативным приложением, который теоретически может позволить им обмениваться частными данными (но, похоже, это невозможно с сегодняшним TWA API).

С Digital Assets Links вы должны выложить на своём домене файл /.well-known/assetlinks.json. Этот JSON-файл содержит информацию о пакете Android (например, идентификатор пакета) и хэш сертификата вашего приложения, который вы можете узнать командой в консоли. У Android-пакета будет двойник на URL хоста. Есть онлайн-валидатор для проверки, что всё в порядке.

Если вы не провели рукопожатие, TWA не активируется, и ваше приложение будет просто использовать обычные Chrome Custom Tabs с минимальным интерфейсом Chrome, как если в PWA включить display: minimal-ui. Я не совсем уверен, но наверное Play Store может отклонить приложения, которые просто указывают на обычные вкладки без валидации TWA. Я пока точно не знаю, в какой момент Chrome выполняет проверку Digital Asset Link; если при каждом доступе к приложению, это может стать проблемой производительности. Думаю, возможно кэширование, а также Play Store может делать проверку перед одобрением приложения во время приёма в каталог. Посмотрим, что будет написано в документации.

Существует (не очень простой) механизм обхода процесса сертификации Digital Asset Link для целей разработки, описанный ниже.

Публикация приложения

Чтобы опубликовать ярлык PWA с помощью TWA, нужно следовать всем правилам Play Store. Дополнительную информацию см. в Developer Policy Center. Также понадобится создать аккаунт издателя с одноразовой платой в размере $25, метаданные, скриншоты и маркетинговые материалы для приложения.

Деплой

Когда вы закончите разработку в Android Studio и у вас есть аккаунт к консоли разработчика, нужно создать APK для продакшна и подписать его ключом, созданным в Android Studio. Можете обратиться к сервису App Signing by Google Play, чтобы в будущем упростить процесс.

Консоль Google Play

Для загрузки этих приложений нет никаких особых правил или процессов, но отдел Revision может обнаружить, что вы используете TWA, и проверит, что: 1) Digital Assets Link рабоатет; 2) URL передаёт критерии PWA (в основном, для обработчика событий fetch в сервис-воркере).

Для публикации в Play Store придётся указать много метаданных и графических ресурсов

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

Если вы измените контент, то не нужно заново загружать приложение, если только вы не измените приложение полностью (в соответствии с правилами каталога). Продолжаете обновлять его через сервис-воркеры и обновления на сервере. Новый APK придётся загрузить только если вы захотите изменить метаданные, нативный код или иконки.

Ограничения

Сейчас у платформы есть определённые ограничения, но это только начало. Надеюсь, со временем они будут сняты.

PWA в подпапках

Если вы публикуете свой PWA в подпапке хоста, то возникает несколько проблем.

• Digital Asset Link подключает весь домен, а не только папку.
• Текущая библиотека поддержки, кажется, обрабатывает как Intent (Link Capturing) весь хост, даже если PWA находится в подпапке.

Нет внутренних приложений

Это ограничение самого Play Store (вы не можете публиковать приложения для локальной сети или приложения, предназначенные только для вас и вашей компании). Вы можете использовать TWA и создавать apk, которые будут развёртываться за пределами магазина.

Digital Asset Link работает только с общедоступными URL, потому что Chrome должен проверить, что мы владеем доменом, а это невозможно с внутренними URL.

Первая загрузка

При первом открытии недавно установленного приложения на устройстве ещё нет файлов приложения (Service Worker ещё не зарегистрирован, если пользователь не открывал PWA раньше), поэтому в автономном режиме пользователь увидит пустой белый экран. Думаю, в будущих версиях полезно бы реализовать некую подкачку через Chrome после установки приложения. Если вы используете TWA API вместо библиотеки поддержки, то обнаружите такую ситуацию и правильно проинформируете пользователя через нативные API.

Вызов нативного кода

Уже есть двунаправленный канал между сервером TWA (Chrome) и клиентом TWA (наш APK). Этот канал в настоящее время используется только для отправки пуш-уведомлений и их отображения в нативном приложении, а не в Chrome.

Здесь есть определённый потенциал в простом соединении нативного кода и JavaScript, предоставив PWA доступ к нативному коду, аналогично механизму APPX/PWA в Microsoft Store.

Возможно, в будущем появится возможность регистрации классов Java/Kotlin в клиенте TWA, чтобы мы могли фактически вызывать их с помощью JavaScript API, когда наш PWA визуализируется в режиме TWA.

Сегодня единственный способ выполнить нативный код — использовать Intents для открытия других нативных действий и затем повторного открытия TWA, отправляя и получая аргументы через параметры URI.

Кроме того, вы можете создать в нативном коде какой-то веб-сервер или сервер WebSocket, и направить на него PWA, но это странно, сложно и, возможно, будет излишне расходовать батарею. Но перед нами целый новый мир возможностей. Посмотрим, что придумает сообщество!

Монетизация с Play Store

Если у вас платное приложение, то нельзя легко проверить, что пользователь действительно за него заплатил (в конце концов, контент — это всего лишь URL-адрес). Кроме того, если вы хотите продать какие-то цифровые ресурсы или подписки с помощью кошелька Play Store, то сложно реализовать такую схему без фактического моста с нативным кодом.

Отладка

Я не уверен, это баг или какая-то проблема моей IDE, но удалённая отладка сервис-воркеров из TWA не работает. Я могу проверить контекст окна, но не сервис-воркера.

Другие движки

Сейчас TWA работает только на Chrome, но в будущем другие браузеры могут клонировать API: например, Samsung Internet, Edge или Firefox.

Обновление от 4 февраля: TWA работает по протоколу Android Custom Tab, который в настоящее время внедряют другие браузеры. Поэтому если в системе установлен другой браузер по умолчанию, он может открыть TWA с содержимым PWA. Впрочем, требуется дополнительное тестирование, чтобы понять, как это работает.

Что произойдёт, если у пользователя более старая версия Chrome и он установит приложение из Play Store? В этом случае PWA отобразится как настраиваемая вкладка Chrome, а не в полностью автономном режиме.

Google Maps Go в Play Store уже использовал что-то похожее на TWA, а Chrome указан как обязательное требование для работы

Что произойдёт, если у пользователя вообще нет Chrome? На сегодняшний день при использовании библиотеки поддержки приложение не будет работать вообще (если нет другого браузера с поддержкой протокола Custom Tabs). Если вы используете TWA API в нативном коде Java/Kotlin, то можете проверить доступность браузера и загрузить альтернативное решение, такое как WebView, или открыть браузер.

Хотя Android-устройства без Chrome редки, но на некоторых он не установлен умолчанию, в том числе на всех новых устройствах в Европе.

Другие платформы

PWA не работает на носимых ОС (часы), но я не совсем уверен, что происходит на других Android-платформах. Вероятно, поддержки ещё нет, но нужно это проверить. Я говорю об Android TV или хромбуках с Play Store. Если вы не протестировали эти платформы, есть смысл отключить их в списке каталога.

Конфликт с WebAPK

Если вы установили PWA из Chrome, то у вас уже есть APK для этого URL, подписанный Play Store, но каталог всё равно оставит приложение в списке и позволит пользователю установить его тоже. И наоборот: установка приложения из каталога не помешает Chrome предложить пользователю «добавить» его из браузера. Думаю, этого можно избежать, если WebAPK тоже получит Digital Asset Link или мы сможем как-то сопоставить идентификатор приложения WebAPK, но вряд ли это произойдёт в ближайшее время. Посмотрим.

Два приложения Starbucks, работающие одновременно: WebAPK и наш собственный APK

Вы можете заблокировать предложение Chrome установить WebAPK и вместо него показать своё приложение из каталога, используя атрибут related_applications и атрибуты prefer_related_applications манифеста веб-приложения. Get Installed Related Apps API может в будущем помочь разрешить этот конфликт.

Создание первого PWApk

Знаю, я только что изобрёл слово PWApk, но звучит неплохо, верно?

Несколько лет назад я сделал видеокурс по нативным веб-приложениям Android. Хотя это не совсем относится к PWA, но поможет понять экосистему Android.

Самый простой способ сделать APK на основе TWA — это клонировать образец репозитория SVGOMG из репозитория ChromeLabs на GitHub

Можете клонировать репозиторий git или запустить новый проект. В нашем случае мы начинаем новый проект только для того, чтобы лучше разобраться в теме.

Создайте новый проект в Android Studio и выберите No Activity: будем использовать только Trusted Web Activity из библиотеки поддержки.

Начнём с пустого проекта

Заполните данные, выберите название проекта (мы его позже изменим) и имя пакета: это будет идентификатор нашего приложения в Android, а также в каталоге. Рекомендую использовать имя хоста в обратном порядке и произвольное название в конце. Например, если у вас хост mypwa.com/calculator, то пакет можно назвать com.mypwa.calculator.

В качестве базы подойдёт API 19 (Android 4.4). Похоже на то, что скоро это будет минимальная версия, необходимая для Chrome. Некоторые функции TWA будут работать только с API 23 (Android 6.0), но об этом позаботится библиотека поддержки.

Обновление от 5 февраля: Chrome официально объявил, что TWA работает только с Android 4.4 KitKat. Таким образом, эта функция недоступна примерно 5% активных пользователей Android: их откатит на версию с кастомной вкладкой и адресной строкой.

Выбор минимального уровня API ограничит список устройств, для которых PWA будет предлагаться в каталоге Play Store

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

Следующий шаг — добавление библиотеки поддержки TWA в качестве зависимости, поэтому откроем два файла с названием build.gradle:

Два файла конфигурации: для проекта и для Android-приложения

Начнём с файла проекта. Добавим в секции allprojects > repositories следующую строку:

maven < url "https://jitpack.io" >

На следующем шаге мы открываем build.gradle модуля и добавляем в зависимости:

implementation 'com.github.GoogleChrome:custom-tabs-client:e446d08014'

Настройка TWA

Следующий шаг — установить в файле модуля параметры PWA для Trusted Web Activity, добавляем в секцию defaultConfig:

manifestPlaceholders = [ hostName: "app.starbucks.com", defaultUrl: "https://app.starbucks.com", launcherName: "Starbucks", assetStatements: '[< "relation": ["delegate_permission/common.handle_all_urls"], ' + '"target": >]' ]

Тут в качестве примера я буду использовать Starbucks PWA. Информация из процесса Digital Asset Link понадобится ключу assetStatements. Мы пока пропустим эту часть. Свойство с названием launcherName должно совпадать с short_name в манифесте веб-приложения.

Настройка манифеста

У приложений Android собственный манифест, они не примут манифест веб-приложения. Нужный файл находится в разделе app > manifests и называется AndroidManifest.xml. Там вы найдёте самозакрывающийся элемент Application XML.

Файл Android-манифеста по умолчанию

Там изменяем значение android:label на $ , которое мы установили ранее в метаданных, так что у нас будет единственный источник истины для названия приложения.

Следующий шаг — настройка этого файла, начиная с тега , чтобы добавить в него дочерние элементы, которые будут выглядеть следующим образом:

Приведённый ниже код настроит TWA с помощью библиотеки поддержки и Intent Filter, чтобы приложение получило ссылки на PWA и Digital Asset Link. Я пропущу подробности, что происходит с точки зрения Android-приложения.

Пришло время для синхронизации

На этом этапе нужно скомандовать Android Studio принять все ваши изменения, нажав Sync Now. Если всё сделано правильно, то не выскочит никаких ошибок.

Замена иконок

В данный момент приложение использует только иконку Android по умолчанию, поэтому нужно заменить все файлы в app>res>mipmap в разных подпапках для разной плотности пикселей. Есть две версии: квадратные и закруглённые иконки. Закруглённые появились в Android 7.1, и если хотите их игнорировать, то удалите ссылку android:roundIcon ссылку в AndroidManifest.xml.

Нужно взять значки из манифеста и скопировать их во вложенные папки mipmap с соответствующими именами

Настройка темы

Наконец, нужно открыть app/res/values/styles.xml и внести некоторые изменения в тему, чтобы она выглядела как PWA:

Вы можете изменить цвета из app/res/values/colors.xml, но я пока не видел, чтобы это работало в TWA.

Если вы ограничиваете ориентацию в манифесте, то можете добавить это ограничение в элемент в AndroidManifest.xml.

Готовы к тестированию?

Мы готовы протестировать наш PWApk, но перед этим нужно настроить режим разработки TWA для Chrome на тестовом устройстве Android или в эмуляторе (с Chrome 72+).

Настройка Chrome

Убедитесь, что у вас Chrome стабильной версии 72 и откройте chrome://flags. Найдите опцию Enable command line on non-rooted devices и поставьте флаг. Перезапустите браузер.

Затем нужно настроить Chrome для обхода Digital Asset Link для хоста, который мы хотим протестировать, в нашем примере это app.starbucks.com.

Чтобы изменить параметры командной строки для Chrome под Android нужно записать текстовый файл в файловую систему Android. Самый простой способ сделать это — через adb (android debug bridge), который должен быть прописан в path (погуглите, если что), и запустить команду:

adb shell cat /data/local/tmp/chrome-command-line _ - disable-digital-asset-link-verification-for-url="https://app.starbucks.com"

Можно использовать простой bash-скрипт от Google.

Нужно остановить Chrome, чтобы он при запуске принял новые настройки

И перезапустить Chrome. Но не просто убрать приложение из списка задач, а из настроек принудительно завершить весь процесс (Force Stop). Мне пришлось сделать это пару раз, прежде чем всё сработало.

Предупреждение о том, что флаг включен и всё прошло удачно

Если всё сделано, то каждый раз при открытии Chrome вы увидите предупреждение о неподдерживаемом флаге. Если запустить приложение из Android Studio, ваше PWA наконец-то запустится и заработает в автономном режиме под значком и названием вашего APK.

Заключение

Возможность публикации PWA в каталоге Google Play реально меняет правила игры. Кажется, сейчас у нас очень ранняя версия API и определённо требуется доработка. Я действительно хочу, чтобы можно было ввести URL нашего PWA и получить с него файл APK. Это не очень просто из-за системы верификации Digital Asset Link. Только Play Store может это сделать, используя тот же WebAPK, который они генерируют.

Я раньше задавался вопросом, одобряет Google приложения PWA или ведёт с ними войну. Но теперь они сняли с себя подозрения, по крайней мере, в части TWA.

Будем надеяться, что TWA в Chrome 72 — это первый шаг в долгом путешествии!

• Google Chrome
• Разработка мобильных приложений
• Разработка под Android
• API

PWA — технология, которая превратит ваш сайт в приложение

Если вы часто или циклично взаимодействуете через сайт со своими клиентами, партнерами или коллегами, то наверняка задумывались о создании мобильного приложения. Но зачастую разработка приложения — это дорого и долго. К тому же продвигать и поддерживать его также затратно. Поэтому многие откладывают создание приложения до лучших времен.

А что, если превратить в приложение уже имеющийся сайт? Это возможно с помощью технологии Progressive Web Application (PWA).

Благодаря PWA пользователи могут установить сайт себе на смартфон: работать он будет как мобильное приложение, а на экране телефона появится иконка для быстрого доступа. Также PWA-сайт можно установить как приложение на десктоп.

Progressive Web Application — это гибрид сайта и приложения. Создать его можно как с нуля, так и на основе существующего сайта.

О преимуществах и недостатках этой технологии для бизнеса рассказывает маркетолог студии «Иквадарт» Татьяна Гаврилова, https://iquadart.by .

Преимущества

• Одно из важных преимуществ PWA — его не нужно создавать отдельно для каждой операционной системы. Следовательно, разработка обходится в разы дешевле, чем разработка мобильного приложения.
• Работает без интернета. Даже в офлайне пользователи могут читать контент и отправлять формы. Данные из формы сохранятся и поступят на сервер, когда у пользователя появится интернет-соединение.
• Быстро загружается. Когда пользователь в первый раз заходит на сайт, данные сайта сохраняются в кэше. Благодаря этому в будущем сайт загружается мгновенно. Быстрая загрузка важна, т.к. по статистике 53% пользователей покидают сайт, если он не загружается в течение 3 секунд.
• PWA может отправлять push-уведомления. Таким образом можно привлекать внимание к своему бренду, возвращать пользователей на сайт, стимулировать повторные продажи.
• PWA может получать доступ к геоданным и файлам устройства, взаимодействовать с камерой и микрофоном смартфона.

Как PWA устанавливается на смартфон

Шаг 1: Пользователь открывает сайт в браузере и соглашается сохранить его на главный экран.

Шаг 2: На рабочем столе устройства появляется иконка для быстрого доступа. Теперь сайт доступен пользователю всего в один клик.

Шаг 3: Сайт открывается без интерфейса браузера, выглядит и работает как мобильное приложение.

Многие известные сайты уже имеют функциональность PWA. Например, twitter.com, aviasales.com, unsplash.com, music.youtube.com. Пример PWA-сайта для малого бизнеса: https://myclean.by ; для интернет-магазина — https://linzmarket.by. Откройте любой из этих сайтов в мобильном браузере Chrome, чтобы протестировать, как работает PWA.

Заметили, что для установки PWA-сайта не понадобилось заходить в App Store или Google Play? В отличие от мобильного приложения, PWA не нужно регистрировать в магазинах приложений.

Для бизнеса это означает экономию. Во-первых, не нужно платить App Store и Google Play за размещение; во-вторых продвигать и поддерживать PWA дешевле, чем мобильное приложение. Пользователю же не нужно идти в магазин приложений, чтобы оттуда скачать PWA.

При этом PWA можно добавить в Google Play с помощью функции TWA (Trusted Web Activities), а значит сайт получает дополнительную площадку для распространения.

Плюсы PWA в сравнении с мобильным приложением

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

Но если вам достаточно перечисленных выше преимуществ, PWA-сайт может стать для бизнеса хорошей и значительно более дешевой альтернативой приложению.

Кроме стоимости разработки, у PWA есть еще несколько плюсов в сравнении с нативным мобильным приложением:

• PWA намного меньше весит: всего несколько десятков килобайт. А значит пользователю не нужно задумываться, устанавливать ли ваш сайт, если в телефоне мало места.
• Проще редактировать контент: изменения вносятся единожды в админке сайта. Не нужно редактировать контент отдельно на сайте и отдельно в приложении.
• PWA не требует обновлений: пользователи всегда видят актуальный контент.
• Разработать PWA быстрее.
• PWA улучшает SEO-показатели сайта. Пользоваться PWA-сайтом удобнее, а значит улучшаются поведенческие факторы. Это, в свою очередь, может положительно влиять на позиции сайта в поисковиках

Кому подойдет PWA

В первую очередь, PWA подойдет компаниям, чьими услугами клиенты пользуются часто или с определенной периодичностью, например, раз в месяц. Так, PWA принесет пользу сервису доставки еды, салону красоты, клининговой компании, интернет-магазину. Также PWA подойдет онлайн-медиа.

Результаты, которых достигли бренды благодаря PWA

Многие бренды уже воспользовались возможностями PWA и вот каких результатов они достигли:

• BMW: в 3 раза увеличилась скорость загрузки сайта.
• Lancôme: на 17% увеличилась конверсия сайта, и на 84% снизилось время загрузки сайта на смартфонах.
• Forbes: на 100% выросла вовлеченность читателей, а также до 0,8 секунды сократилась скорость загрузки сайта (с 3–12 секунд).
• AliExpress: на 104% выросла конверсия сайта для новых покупателей. Покупатели стали проводить на сайте на 74% больше времени.

Больше примеров того, как бренды используют PWA, вы сможете найти здесь: https://developers.google.com/web/showcase/2017/lancome

Недостатки PWA

Конечно, у PWA есть и недостатки. Например, есть ряд ограничений на iOS:

• PWA может хранить на устройстве не больше 52 Мб данных. При этом, если пользователь несколько недель не заходил на PWA-сайт, сохраненные файлы удалятся. Останется только иконка приложения на рабочем экране. Когда пользователь решит снова запустить PWA, придется установить его заново.
• Siri не видит PWA.
• Не показывается окно с предложением установить PWA на главный экран. Добавить иконку приложения можно только вручную через настройки устройства.

К другим недостаткам можно отнести то, что у PWA есть ограничения в работе с железом. Например PWA еще не научилось работать со сканером отпечатков пальцев, датчиками приближения, ограниченно работает с Bluetooth.

Сравнение PWA с мобильным приложением и сайтом

Сравнить PWA с мобильным приложением и сайтом вы можете с помощью таблиц ниже.

Сравнение PWA с мобильным приложением

PWA	Мобильное приложение
Для установки не нужен магазин приложений. Установка за несколько секунд	+	—
Ниже стоимость разработки	+	—
Выше скорость разработки	+	—
Дешевле поддерживать и развивать	+	—
Занимает меньше места на устройстве	+	—
Не нужно разрабатывать отдельно под каждую операционную систему	+	—
Можно взаимодействовать с камерой и микрофоном смартфона. Есть доступ к GPS, файлам устройства и др.	+	+
Можно использовать больше функций смартфона. Например, доступ к bluetooth, датчикам приближения, сканеру отпечатков пальцев и др.	—	+

Сравнение PWA с сайтом

PWA	Сайт
Выше скорость загрузки	+	—
Доступ в офлайне	+	—
Выше вовлеченность ползователей. Более user-friendly	+	—
Возможность добавления на главный экран	+	—
Push-уведомления	+	+
Поддерживается бóльшим количеством браузеров	—	+

Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 2/2: Trusted Web Activity

В первой части мы превратили наш сайт в Progressive Web App. Там же было сказано, что совсем недавно, 6 февраля 2019 года, Google предоставили простую возможность выкладывать PWA в Google Play при помощи Trusted Web Activity. Всё, что нужно сделать, это написать небольшую обёртку под Android, которую можно будет выложить в Google Play. Когда пользователь скачает такое приложение-обёртку, оно просто будет открывать наше PWA внутри Chrome. Конечно же, интерфейс Chrome будет спрятан и всё будет выглядеть красиво.

Если вы, как и я, никогда не писали приложений под Android, то дальнейшее вам тоже должно показаться чередой магических манипуляций. Но к чему только не прибегнешь, чтобы выложить своё приложение. Поехали!

1. Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 1/2: Progressive Web App
2. Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 2/2: Trusted Web Activity

Android Studio

Для начала скачиваем впервые в жизни Android Studio. Создаём новый проект и при этом выбираем «Add No Activity».

Далее конфигурируем свой проект:

Для Package name рекомендуется формировать название следующим образом: стартовая страница skorochtec.ru/app превращается в ru.skorochtec.app.

Конфигурация приложения и зависимости

Созданный проект имеет следующую структуру:

Нам нужно будет изменить AndroidManifest.xml, styles.xml (папка res/values) и оба файла build.gradle.

Также рекомендую в папках res/drawable и res/mipmap задать иконку приложения, иначе у вашего приложения будет стандартная иконка Android.

build.gradle(Project: AndroidStudioProjects) // Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript < repositories < google() jcenter() >dependencies < classpath 'com.android.tools.build:gradle:3.3.1' // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files >> allprojects < repositories < google() jcenter() maven < url "https://jitpack.io" >> > task clean(type: Delete)

Некогда объяснять, просто скопируйте это себе 🙂

build.gradle(Module: app) apply plugin: 'com.android.application' android < compileSdkVersion 28 defaultConfig < applicationId "ru.skorochtec.app" minSdkVersion 19 targetSdkVersion 28 versionCode 5 versionName "1.0.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" manifestPlaceholders = [ hostName: "skorochtec.ru", defaultUrl: "https://skorochtec.ru/app/", launcherName: "Скорочтец", assetStatements: '[< "relation": ["delegate_permission/common.handle_all_urls"], ' + '"target": >]' ] > buildTypes < release < minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' >> compileOptions < sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 >> dependencies

А вот тут нужно дать некоторые пояснения:

• versionCode необходимо будет менять при каждой новой сборке, а вот versionName менять необязательно;
• defaultUrl соответствует start_url из Web App Manifest;
• в assetStatements должен быть именно базовый url («skorochtec.ru» в моём случае);
• вся магия обеспечивается подключением custom-tabs в последней строке, используйте именно эту версию, так как она на 100% проходит тестирование в Google Play.

  " />  " />       "/>   

Скопируйте это, поменяв package в теге (в самом верху).

Создание подписанного приложения

Всё готово к тому, чтобы выпустить приложение. Но его ещё нужно подписать. Для этого находим в панели инструментов build -> Generate Signed Boundle / APK… Выбираем APK:

Жмём Create new…

Создаём новое хранилище ключей и сам ключ в нём:

И наконец собираем и подписываем приложение:

Ура! Наш APK готов к выпуску!

Google Play Console

Чтобы выложить приложение, у вас должен быть аккаунт разработчика, который стоит $25. После покупки у вас появится доступ в Google Play Console. В ней несложно разобраться, но уточню один момент. На этапе загрузки вашего APK в консоль разработчика, вы увидите следующее:

Google как бы намекает, что мы криворукие и скорее всего потеряем свой ключ подписи, а значит не сможем потом обновлять приложение. А потому нам предлагают, чтобы мы подписывали наш APK, а вот конечное приложение уже подписывалось самим Google-ом. Рекомендую принять это условие.

Digital Asset Link

Не заметили ничего подозрительного в предыдущих действиях? Для создания приложения мы по сути использовали только адрес нашего сайта… Тогда что нам мешает прямо сейчас выпустить приложение, например, Twitter?

А мешает Digital Asset Link, который мы должны разместить на своём сайте, чтобы доказать, что у приложения и сайта один владелец (на основании ключа подписи приложения).

Делается это очень легко: находите в Google Play Console, Управление релизом -> Подписи приложений. Там будет сертификат для подписи приложений, сгенерированный Google (если вы последовали моей рекомендации и приняли условие). Вам нужно скопировать Цифровой отпечаток сертификата SHA-256.

И вставить его в digital asset links tool. А сгенерированное им положить в файл assetlinks.json, который должен быть доступен на сервере вашего сайта по пути .well-known/assetlinks.json.

Готово

Вот и всё! Выпускаем наше приложение, ждём несколько часов, пока Google его одобрит и, в конце концов, наслаждаемся его присутствием в Google Play Market!

Кстати, красивые картиночки экранов можно сделать в https://apptoolkit.io/.

Заключение

Что ж, мы прошли полный путь от сайта до приложения, он был не очень лёгким, но и не очень сложным. Технологии PWA и TWA ещё очень молодые и имеют ряд недостатков. Например, выпущенное таким образом приложение не откроется у пользователя, если Google Chrome версии 72+ не является браузером по умолчанию на его смартфоне. Так что готовьтесь пожертвовать частью пользователей ради скорости выпуска.

В App Store выложить приложение таким образом пока нельзя. Ну и в целом Apple отстаёт в плане поддержки этих технологий (надеемся, что не намеренно). Но область Progressive Web App быстро развивается и улучшается, поэтому можно надеяться, что в скором времени все мобильные браузеры станут её поддерживать, а существующие недочёты будут исправлены.

Как бы то ни было, я верю, что будущее за Progressive Web App и призываю вас становиться ранними последователями этой технологии. Благо инструкция для этого у вас теперь есть.

Полезные ссылки

• Google Play Store now open for Progressive Web Apps
• Trusted Web Activity — PWA to Play Store Guide

• progressive web apps
• google play
• android
• trusted web activity