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

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

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

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

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

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

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

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

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

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

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

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

$ mkdir my-pwa && cd my-pwa

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

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

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

Мастер CLI Bubblewrap показывает инициализацию из airhorner с переопределением домена, например, .com, и переопределением начальных URL-адресов.

Ключ подписи

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

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

Мастер интерфейса командной строки Bubblewrap запрашивает расположение и имя существующего ключа подписи пользователя.

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

Мастер Bubblewrap CLI спрашивает, хочет ли пользователь создать новый ключ подписи.

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

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

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

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

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

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

$ bubblewrap build

Вывод CLI Bubblewrap для создания проекта, запрашивающий пароли для ключа подписи и демонстрирующий создание различных версий приложения для Android.

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

  • 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 , чтобы войти в систему и приступить к работе.

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

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

Экран с формой создания приложения Play Console.

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

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

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

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

Контрольный список «Начать тестирование сейчас»

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

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

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

Страница внутреннего тестирования со стрелкой, указывающей на кнопку создания новой версии.

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

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

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

Блок-схема, показывающая слева направо разработчика и его ключ загрузки, который затем подписывает свое приложение и отправляет его в Google. Затем Google получает ключ подписи приложения и подписывает приложение этим ключом, а затем доставляет его пользователю.

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

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

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

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

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

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

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

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

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

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

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

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

Экран проверки целостности приложения с выделенным отпечатком сертификата SHA-256.

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

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

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

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

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

$ bubblewrap fingerprint add <fingerprint>

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

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

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

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

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

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

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

twa-manifest.json ключ подписи приложение-выпуск-bundle.aab build.gradle

Джек хочет, чтобы его команда 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 Салли передает сгенерированный файл ______ в свою систему контроля версий, чтобы она могла перестроить его в любое время.
  2. Джек хочет, чтобы его команда QA протестировала его приложение PWA для Android. Он ______ свой пакет Android App Bundle для внутреннего тестирования.
  3. Android-приложение Oogie Boogie PWA не работает в полноэкранном режиме. Чтобы исправить это, они получают отпечаток своего сертификата SHA-256 для своего ______ и загружают его в свой файл ссылок на цифровые активы, расположенный по адресу ______ в том же источнике, что и их PWA.

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

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

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

Удачного кодирования!