Запустите 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, таким как соответствие политике .
Оснастка
Веб-разработчикам, которые хотят воспользоваться преимуществами 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 .
Наконец, перенесите свое приложение из закрытого тестового канала в рабочую версию!