Как запустить PWA в приложении для Android
Прогрессивные веб-приложения (PWA) – это веб-приложения, которые используют функции, похожие на функции приложений, для создания высококачественного, быстрого, надежного и привлекательного интерфейса.
Интернет – это огромная аудитория и множество возможностей для пользователей. Но пользователи также привыкли искать приложения в магазине операционной системы. Эти пользователи, во многих случаях, уже знакомы с брендом или услугой, которую они ищут, и имеют высокий уровень намеренности, что приводит к более высоким, чем в среднем, показателям взаимодействия.
Google Play – это магазин приложений для 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.
Теперь разработчики могут использовать Trusted Web Activity в качестве контейнера, чтобы включить PWA в качестве действия запуска для приложения Android. Эта технология использует браузер для рендеринга PWA в полноэкранном режиме, обеспечивая совместимость Trusted Web Activity с функциями веб-платформы и API, которые использует базовый браузер. Существуют также утилиты с открытым исходным кодом, которые упрощают реализацию приложения Android с помощью Trusted Web Activity.
Ещё одно преимущество, недоступное в других решениях, заключается в том, что контейнер использует общее хранилище с браузером. Статусы входа и настройки пользователей синхронизируются между разными версиями.
Совместимость браузеров
Эта функция доступна в Chrome начиная с версии 75, а Firefox реализовал ее в своей ночной версии.
Критерии качества
Веб-разработчикам следует использовать Trusted Web Activity, когда они хотят включить веб-контент в приложение для Android.
Веб-контент в Trusted Web Activity должен соответствовать критериям установки PWA.
Кроме того, чтобы поведение приложений для Android соответствовало ожиданиям пользователей Android, в Chrome 86 было введено изменение, согласно которому отсутствие обработки следующих сценариев считается сбоем:
- Не удалось проверить связь цифровых объектов при запуске приложения.
- Не удалось вернуть HTTP 200 для запроса офлайн-ресурса сети.
- Запрос на переход, возвращающий ошибку HTTP 404 или 5xx".
Если это происходит в Trusted Web Activity, приложение для 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, готового к загрузке в Google Play:
npx @bubblewrap/cli build
После выполнения этой команды в корневом каталоге проекта появится файл app-release-signed.apk. Этот файл будет загружен в Google Play.
PWABuilder
PWABuilder помогает разработчикам преобразовывать существующие сайты в прогрессивные веб-приложения. Кроме того, в PWABuilder интегрирован инструмент Bubblewrap, который предоставляет графический интерфейс пользователя для упаковки PWA в приложение для Android. Команда PWABuilder написала отличную статью о том, как создать приложение для Android с помощью этого инструмента.
Как подтвердить право собственности на PWA в приложении для Android
Разработчик, создавший отличное прогрессивное веб-приложение, не захочет, чтобы другой разработчик создал на его основе приложение для Android без разрешения. Чтобы этого не происходило, приложение для Android должно быть связано с прогрессивным веб-приложением с помощью инструмента Digital Asset Links.
Bubblewrap и PWABuilder выполняют необходимую настройку приложения для Android, но остается последний шаг – добавить файл assetlinks.json в PWA.
Чтобы создать этот файл, разработчикам нужна подпись SHA-256 ключа, используемого для подписи APK-файла, который скачивают пользователи.
Ключ можно сгенерировать разными способами. Проще всего узнать, какой ключ использовался для подписи APK, распространяемого среди конечных пользователей, скачав его из Google Play.
Чтобы пользователи не видели неработающее приложение, разверните его в закрытом канале тестирования, установите на тестовое устройство и сгенерируйте правильный файл assetlinks.json с помощью инструмента Peter's Asset Link Tool. Разместите полученный файл assetlinks.json по адресу /.well-known/assetlinks.json в проверяемом домене.
Куда отправиться дальше
Прогрессивное веб-приложение – это высококачественный веб-продукт. Trusted Web Activity – это новый способ открывать такие высококачественные веб-приложения из приложения для Android, если они соответствуют минимальным критериям качества.
Если вы только начинаете работать с прогрессивными веб-приложениями, ознакомьтесь с нашими рекомендациями по их созданию. Если у вас уже есть PWA, проверьте его с помощью Lighthouse.
Затем с помощью Bubblewrap или PWABuilder создайте приложение для Android, загрузите его в закрытый тестовый канал в Google Play и свяжите с PWA, используя Peter's Asset Link Tool.
Наконец, перенесите приложение из канала закрытого тестирования в рабочую версию.