Использование PWA в вашем приложении для Android

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

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

Play Store — это магазин приложений для Android, и разработчики часто хотят открывать свои прогрессивные веб-приложения из своих приложений для Android.

Trusted Web Activity — это открытый стандарт, который позволяет браузерам предоставлять полностью совместимый с веб-платформой контейнер, который отображает PWA внутри приложения Android. Эта функция доступна в Chrome и находится в разработке в Firefox Nightly .

Существующие решения были ограничены

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

Ограничением Android WebView является то, что он не предназначен для замены браузера. Android WebView — это инструмент разработчика для использования веб-интерфейса в приложении Android, который не обеспечивает полный доступ к современным функциям веб-платформы, таким как средство выбора контактов или файловая система , среди прочего .

Cordova была разработана для устранения недостатков WebView, но в этом случае API ограничиваются средой Cordova. Это означает, что вам необходимо поддерживать дополнительную кодовую базу для использования API-интерфейсов Cordova для вашего приложения Android отдельно от вашего PWA в открытой сети.

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

Trusted Web Activity — новый контейнер для веб-приложений на Android.

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

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

Совместимость браузера

Эта функция доступна в Chrome с версии 75, а Firefox реализует ее в своей ночной версии.

Критерии качества

Веб-разработчикам следует использовать доверенное веб-действие, если они хотят включить веб-контент в приложение Android.

Веб-содержимое в доверенной веб-активности должно соответствовать критериям возможности установки PWA.

Кроме того, чтобы соответствовать ожиданиям пользователей от приложений Android, в Chrome 86 было внесено изменение , при котором неспособность обработать следующие сценарии считается сбоем:

  • Неспособность проверить ссылки на цифровые активы при запуске приложения.
  • Не удалось вернуть HTTP 200 для запроса автономного сетевого ресурса.
  • Навигационный запрос, возвращающий ошибку HTTP 404 или 5xx».

Когда один из этих сценариев происходит в доверенной веб-активности, это приводит к заметному пользователю сбою приложения Android. Ознакомьтесь с руководством по обработке этих сценариев в сервис-воркере.

Приложение также должно соответствовать дополнительным критериям, специфичным для Android, таким как соответствие политике .

Снимок экрана, показывающий оценку Lighthouse для AirHorn со значком PWA и оценкой производительности 100.
Значок PWA в Lighthouse показывает, соответствует ли ваше PWA критериям возможности установки.

Оснастка

Веб-разработчикам, которые хотят воспользоваться преимуществами Trusted Web Activity, не нужно изучать новые технологии или API для преобразования своего PWA в приложение Android. Вместе Bubblewrap и PWABuilder предоставляют инструменты разработчика в виде библиотеки, интерфейса командной строки (CLI) и графического интерфейса пользователя (GUI).

Пузырчатая пленка

Проект Bubblewrap генерирует приложения Android в виде библиотеки NodeJS и интерфейса командной строки (CLI).

Загрузка нового проекта достигается путем запуска инструмента и передачи URL-адреса веб-манифеста:

npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json

Инструмент также может создать проект, и выполнение приведенной ниже команды выведет приложение Android, готовое к загрузке в Play Store:

npx @bubblewrap/cli build

После запуска этой команды файл с именем app-release-signed.apk будет доступен в корневом каталоге проекта. Это файл, который будет загружен в Play Store .

PWABuilder

PWABuilder помогает разработчикам превращать существующие веб-сайты в прогрессивные веб-приложения. Он также интегрируется с Bubblewrap, предоставляя графический интерфейс для переноса PWA в приложение Android. Команда PWABuilder подготовила отличную публикацию в блоге о том, как создать приложение для Android с помощью этого инструмента.

Проверка владения PWA в приложении Android

Разработчик, создающий отличное прогрессивное веб-приложение, не захочет, чтобы другой разработчик создал с его помощью приложение для Android без его разрешения. Чтобы этого не произошло, приложение Android должно быть сопряжено с Progressive Web App с помощью инструмента под названием Digital Asset Links .

Bubblewrap и PWABuilder позаботятся о необходимой настройке приложения Android, но остается последний шаг — добавление файла assetlinks.json в PWA.

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

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

Чтобы не показывать пользователям неработающее приложение, разверните приложение на закрытом тестовом канале , установите его на тестовое устройство, а затем с помощью инструмента Peter's Asset Link Tool сгенерируйте правильный файл assetlinks.json для приложения. Сделайте сгенерированный файл assetlinks.json доступным по адресу /.well-known/assetlinks.json в проверяемом домене.

Куда идти дальше

Прогрессивное веб-приложение — это высококачественный веб-интерфейс. Trusted Web Activity — это новый способ открыть для себя высококачественные возможности приложений Android, если они соответствуют минимальным критериям качества.

Если вы только начинаете работать с Progressive Web Apps, прочтите наше руководство о том, как создать отличное PWA . Разработчикам, у которых уже есть PWA, используйте Lighthouse , чтобы проверить, соответствует ли он критериям качества.

Затем используйте Bubblewrap или PWABuilder для создания приложения Android, загрузите приложение на закрытый тестовый канал в Play Store и соедините его с PWA с помощью инструмента Peter’s Asset Link Tool .

Наконец, перенесите свое приложение из закрытого тестового канала в рабочую версию!