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

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

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

Чему вы научитесь

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

Что вам следует знать

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

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

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

Что не будет охвачено

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

2. Упаковка вашего PWA в пузырчатую пленку

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

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

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

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

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

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

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

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

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

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

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

$ bubblewrap build

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

• app-release-bundle.aab — Android App Bundle вашего 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

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

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

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

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

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

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

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

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

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

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

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

Создать тестовый релиз

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

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

Важно: с августа 2021 года для управления и защиты финальной подписи вашего приложения в Play Store требуется подписка приложений в Play App Signing. С помощью подписи приложений в 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 или ChromeOS, используя тестовую ссылку!

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

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

Прежде чем начать: как Digital Asset Links может доказать, что ваше приложение и ваше PWA принадлежат вам?

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

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

С подписью в приложении Play

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

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

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

$ 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, выполните следующую команду из того же каталога, который был создан при Bubblewrapping Your PWA , заменив <fingerprint> отпечатком, скопированным на предыдущем шаге.

$ bubblewrap fingerprint add <fingerprint>

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

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

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

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

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

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

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

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

twa-manifest.json ключ подписи app-release-bundle.aab build.gradle

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

загрузки сборки и загрузки релизы знаки и загрузки

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

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

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

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

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

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

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

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

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

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