Что такое twa приложение

PWA — это просто

Понятие Progressive Web Applications (PWA) на слуху давно, с весны 2018 года приложения этого класса поддерживаются всеми основными браузерами, однако распространенность технологий PWA несмотря на очевидные их «плюсы» пока очень низка.

Специалисты Google (в том числе и на Хабре) очень информативно и компетентно пишут о PWA, но их рекомендации полезны больше тем, кто уже знаком с предметом. Данная статья призвана показать, что Progressive Web Apps — это не сложно, и использовать эти технологии можно и нужно уже сейчас разработчикам любых сайтов.

Философия PWA

Для начала стоит заметить, что нет точного определения PWA приложения. Нельзя четко сказать, вот этот сайт PWA или нет. Это протяженная шкала, на которой могут располагаться и «хоумпейдж» второкурсника Пети, который добавил web app манифест, создающий иконку сайта на домашнем экране мобильника; и внешне ничем не отличимый от обычного новостной сайт, только пользователи которого могут сказать, что он удивительно быстрый и удобный, а всё потому что где-то внутри него бьется горячее сердце работника сферы услуг (service worker’a).

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

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

Архитектура PWA

PWA — это веб приложение, созданное с использованием определенных технологий для достижения заданных целевых показателей.

Целевые показатели расшифровываются следующим образом:

Надежность (Reliable) — приложение загружается и показывается сразу же, вне зависимости от статуса и качества сетевого соединения.
Быстрота (Fast) — взаимообмен данными по сети происходит быстро, UI плавный и отзывчивый.
Привлекательность (Engaging) — делает для пользователя опыт работы с приложением комфортным и приятным, побуждая его захотеть пережить его снова, и снова, и снова…

С точки зрения Google, именно это отделяет сейчас по внешнему виду и ощущениями (look and feel) веб-сайты от нативных приложений.

Другими словами, разработчику предлагаются инструменты (Service Worker, Push Notifications и др.) и указываются цели (сайт/приложение должен быть быстрым в загрузке, работать на слабом коннекте, не «лагать», работать оффлайн при необходимости). Насколько далеко продвинется по этому пути разработчик зависит только от него.

PWA и нативные приложения

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

Можно даже назвать это скрытой революцией. По сути, браузер используется как некая виртуальная машина, хранящая и запускающая в себе PWA приложение. Как Андроид является виртуальной машиной для андроид-приложений, так и браузер становится виртуальной машиной для PWA. Как нативное приложение обращается через файловую систему к своим ресурсам, так же и PWA обращается к своим ресурсам — пусть по HTTP, но хранящимся локально.

И в кои-то веки всё это одинаково работает на всех основных браузерах и на всех основных платформах.

Есть мобильные приложения, которым нужно быть нативными (необходима производительность, доступ к системным ресурсам и др.), однако есть приложения, которые в своем функционале вполне реализуемы как PWA. Для них теперь:

— Не нужно писать различные версии для Android и iOS (и Windows)
— Не нужно регистрировать в Google Play и App Store и платить за это
— Открыт прямой выход на десктоп

До нынешнего времени рынок мобильных приложений был закрыт для энтузиастов, которые могут написать полезную программу, но не могут/не хотят платить за ее размещение. И не хотят связываться с бюрократией Google и Apple по проверке приложения, после которой монопольные времена Microsoft вспоминаешь с тоской.

Сейчас эти барьеры сломлены. И сломала их Google. Учитывая то, что именно она является флагманом интернет-технологий, подобный заход на территорию iOS, скорей всего, вполне продуман и просчитан. Остается ждать бума PWA.

Различия PWA с нативными приложениями, конечно, есть — в основном, в правах доступа к ресурсам системы, но работа в этом направлении идет даже в поле чистого HTML5, а для PWA дополнительные привилегии проблемой не будут.

Из личного опыта можно вспомнить, как после перевода одного новостного сайта на работу с Service Worker, было решено отказаться от Андроид приложения, сделанного по функционалу сайта. И не столько потому, что его поддержка занимала человеческие ресурсы, а потому, что PWA версия, как ни удивительно, была быстрее, красивее и удобнее в работе, чем java приложение.

Технологии

Кратко рассмотрим основные движители PWA.

Service Worker

Сердце PWA — Service Worker. Это проксирующий слой между фронтэндом и бэкэндом, находящийся в браузере. Все запросы браузера идут через него. Данное разделение на два независимых слоя позволило сделать переход обычного веб сайта в PWA максимально простым.

Из хранилищ у Service Worker’a есть доступ к Cache Storage для web ресурсов, и IndexDB для данных. Но, самое главное, полная свобода для реализации бизнес логики.

Можно, например, принять запрос от браузера, проверить состояние сети, взять данные из хранилища, произвести с ними операции и вернуть некий результат обратно в браузер — который будет думать, что ответ ему пришел от сервера. Или не будет — как разработчик захочет, так и сделает. Два браузерных слоя (клиентский фронтэнд и Service Worker) позволяют писать полноценные приложения.

В тоже время, для большинства сайтов будет достаточно кэширующей функциональности Service Worker’a, чтобы превратиться в PWA.

PWA не зависит ни от каких-то фреймворков, это чистый javascript, хотя даже специалисты Google на Хабре зачем-то советуют использовать библиотечные генераторы кода. Service Worker прекрасно пишется руками, и это нужно, чтобы хорошо понимать и контролировать логику работы твоего приложения.

С программистской точки зрения Service Worker представляет собой javascript файл, подключаемый в html коде страницы. В нем разработчик определяет логику работы с приходящими из фронтэнда запросами и другую функциональность.

HTTPS

PWA требует, чтобы все ресурсы сайта передавались по HTTPS протоколу. SSL сертификат можно получить бесплатно, некоторые хостеры это делают за вас. Но критично, чтобы на сайте не было ссылок на незащищенные ресурсы — некоторые браузеры просто не будут отображать сайт в этом случае.

Основная встречаемая в таких случаях проблема — картинки. Часто редакторы или комментаторы ставят в материал ссылки на картинки из интернета, иногда они автоматически туда (в материал) попадают. Необходимо картинки пересохранять или к себе, или на сервис с доступом по HTTPS.

Application Shell

App shell — это просто скелет графического интерфейса, шаблон. Для примера, возьмем средний сайт c хидером, двумя колонками и прочим. Грубо говоря, вырежем из него контент текущей страницы и всю динамическую информацию, оставшаяся статика — app shell.

Суть в том, что app shell хранится на клиенте и загружается при запуске приложения, а затем уже в него грузится из сети динамическая информация. И пока она грузится, app shell должен выглядеть красиво («лоадеры» на местах и т.п.)

Данную архитектуру сайта — загрузку контента и иной динамичной информации через ajax вызовы — можно продумать и реализовать на сайте заранее, тогда переход в PWA будет совсем несложным.

App shell — это как оболочка нативной программы. Смотрите на свое PWA как на нативную программу, и многое станет проще.

Web App manifest

JSON файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и др.) и некоторые другие параметры. Позволяет «установить» PWA как отдельное приложение на домашний экран смартфона.

Push Notifications

Если посерфить интернет с Chrome DevTools, открытым на вкладке Application, то можно увидеть, как мало сайтов пользуют PWA технологии. А 90% тех, что пользуют, делают это только ради Push Notifications.

Пока что это самая популярная и самая злоупотребляемая технология PWA — за последние несколько месяцев число сайтов, заходя на которые первым делом ищешь «мышкой» кнопку «Блокировать» на предложение получать самые свежие новости, выросло, такое ощущение, многократно, а само желание навязать свой Push похоже на Spam.

А ведь можно же предлагать подписку на второй или третий заход пользователя на сайт, когда уже понятно, что он тут не случайно.

Push notifications must be timely, precise and relevant

Enable push notifications from the site and ensure the use cases they’re using the push notifications for are:
Timely — A timely notification is one that appears when users want it and when it matters to them.
Precise — A precise notification is one that has specific information that can be acted on immediately.
Relevant — A relevant message is one about people or subjects that the user cares about.

See our guide on creating great push notifications for advice. If your content is not timely and relevant to this user, consider using email instead.

Источник

Русские Блоги

Новый выпуск Google TWA: Пусть ваш PWA входит в магазин приложений

PWA (Progressive Web App) позволяет веб-сайту иметь опыт использования, похожий на нативное приложение, хотя он был запущен некоторое время, но теперь PWA имеет важное отличие от реального нативного приложения, которое должно войти в приложение хранить. Выпуск доверенной веб-мероприятия сделал лучший опыт, чтобы упаковать сайт PWA в нативное приложение в App Store. Почему вы хотите поставить веб-сайт в App Store? Как это сделать?

Почему вы собираетесь поставить веб-сайт в App Store?

Сам веб-сайт может быть непродовольственным развитием, быстро обновлять итерацию и поставьте PWA в нативное приложение в App Store, следующее удобство:

Пользователи могут искать установку приложения PWA в App Store.

Перенесите существующее нативное приложение в приложение PWA, чтобы сохранить существующие пользователи нативных приложений.

Он имеет такие функции, как виджет настольных компьютеров, ярлык приложений, справочная служба.

В общем, поставьте веб-сайт в App Store, на самом деле, это «больше похоже на мобильное приложение» с лучшим опытом. Хотя лисильные инженеры Интернета веруются в будущем, они должны быть допущены к мобильному терминалу. Опыт собственного приложения действительно лучше, чем веб-сайт, и пользователь уже использовал нативное приложение к привычкам Отказ

Подождите минуту, не так ли это гибридное приложение?

Эй, по сути, это дело. Упаковка PWA в нативное приложение, по сути он является гибридным приложением, разница:

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

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

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

Способ встроить веб-сайты в нативном приложении

Давайте сравним существующие способы имплантации веб-сайта в нативное приложение.

Webview

1. Размер дисплея может быть свободно управленческим управлением, а полный экран отображается или только в определенном пространстве экрана.

2. Удобно взаимодействовать с NA.

3. Вы можете использовать сервисных работников.

Но есть также много недостатков:

2. В низкой версии системы Android WebiveWW не будет обновляться с Chrome.

3. Наконец, это также самый важный момент. Поддержка API в WebView ограничена, например, следующее API не поддерживается в WebView:

web push notifications

Chrome form autofill

Media Source Extensions (MSE)

Из-за ограничений API мы не можем в полной мере использовать веб-платформу в WebView. В то же время, если пользователь входит в систему в нашем приложении PWA с другим браузером, нативная версия загружена. Потому что файлы cookie не могут синхронизировать, опыт не является гладким.

Chrome Custom Tabs

Чтобы решить эти проблемы WebView, команда Chrome запущенаChrome Custom TabsОн также используется для отображения компонентов веб-страницы в нативном приложении, по сравнению с WebView:

Близко к полноэкранному дисплею;

Общие файлы cookie, хранение и пароли;

Всегда обновляйте с Chrome;

Этот компонент решает много проблем с веб-просмотром, но у него есть ключевой лимит, то естьНа верхнем дисплее есть адресная строка Отказ Зачем ты это делаешь? Поскольку вкладки Chrome Custom могут открыть любую веб-страницу, если отображается полный экран, веб-страница, что вкладки Chrome Custom будут открыты для пользователя, является текущим нативным приложением, которое вызывает проблемы безопасности. Адресная строка предполагает, что пользователь в настоящее время просматривает страницу, такую ​​как браузер.

Trusted Web Activity

Мы хотим быть ближе к использованию нативного приложения, в то время как вкладки Chrome Custom предотвращают недостатки WebView, но поскольку есть адресная строка или форма браузера. Это необходимо использовать в это время.Trusted Web ActivityNS. TWA (доверенная веб-активность) основана на вкладках Chrome Custom, используйтеDigital AssetLinksДля аутентификации веб-контента ограничить веб-контент, отображаемый в TWA и нативном приложении, как тот же автор, и обеспечить безопасность. Его преимущества:

На основе пользовательских вкладок, он автоматически обновляется с Chrome;

Полный экран не отображает адресную строку.

Как упаковать свой сайт PWA с помощью TWA?

Наконец, мы сказали, как упаковать сайты PWA с помощью TWA. Хотите упаковать PWA, сначала нам нужен сайт PWA (ерунда), что означает, что наш сайт должен соответствовать спецификации PWA, таких как HTTPS и т. Д. Вы можете использовать маяк для обнаружения сайта для характеристик PWA.

С сайтом PWA мы можем начать упаковку, здесь я не говорю о деталях деталей (официальное руководство Google написано очень четко), но расскажуте, что нам нужно сделать:

1. С помощью среды разработки Android загрузите и установите студию Android;

2. Компоненты TWA, такие как компоненты TWA, добавляются для сборки. Градл;

3. Добавьте Android.support.customtabs.trusted.launcheractivity, чтобы загрузить нашу страницу и начать активность как приложение:

Здесь мы успешно настроили вкладки Chrome Custom. Если мы откроемся, он найдет, что в верхней части есть адресная строка. Далее нам нужноDigital AssetLinksЧтобы установить двустороннюю аутентификацию веб-сайта и нативное приложение. Конкретная операция в официальной документации очень подробно, просто:

4. Напишите адрес сайта, который должен быть аутентифицирован в приложении. Разверните файл json в корневом каталоге адреса сайта, чтобы разместить собственный знак приложения.

После использования ссылок на цифровые активы снова откройте приложение, затем откройте приложение, он обнаружит, что адресная строка не:

Видно, что нативное приложение, которое было автоматизировано с помощью TWA для создания сайта PWA, не сложная вещь. Я считаю, что будут связаны инструменты.

Пример нативного приложения

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

Некоторые другие вопросы

1. Добавить в Google Store

В дополнение к требованиям PWA спецификаций, если вы хотите поставить Google App Store, вам нужен веб-контент, который также соответствует магазину Guoge. Каковы требования для домашних магазинов приложений, неясно.

2. Можете ли вы свободно определять размер дисплея TWA на экране?

3. Если версия Chrome слишком низкая? Или у вас нет хрома?

Согласно способу написания в документе, в неподдерживаемой версии Chrome, она будет удалена для использования настроек. Если вы не поддерживаете браузер Thumbtabs, вы откроете этот браузер (угадаете Direct?). Тем не менее, разработчики также могут проверить наличие настроек самостоятельно для соответствующих операций.

4. Есть ли какие-либо требования для версии Android?

На основании документации TWA требуется Android Kitkat или обновленная версия операционной системы, которая в настоящее время охватывает 95% устройств для телефонов Android.

5. Если вы удалите нативное приложение?

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

Ссылки по теме

об авторе

Mexuguang, нынешний поиск Baidu Advanced Research Research и Engineer, участвовал в поисковом компонентах рамок рендеринга, многоквалифицированных единой системы разработки. Окончил Университет Тяньцзинь, проектирование и внедрение передних кадров и интерфейсных компонентов и стремится к улучшению пользовательского опыта веб-продуктов. Вентилятор езды на мотоцикле. Персональный блог:meixg.com

Для получения дополнительной информации, пожалуйста, обратите внимание на вершину фронта.

Источник

Как создать приложение TWA для Android из PWA Nuxt.js

Знаете ли вы, что вы можете упаковать свое прогрессивное веб-приложение (PWA) в приложение для Android и опубликовать его в Google Play Store? Таким образом, мобильные пользователи смогут найти и загрузить его, и все будет вести себя как в родном приложении. Лично я не знал об этом, пока не наткнулся на аббревиатуру TWA, которая означает: доверенная веб-активность.

В недавнем проекте мне пришлось создать приложение TWA для Android из PWA Nuxt.js. Я был удивлен, обнаружив, что это оказалось не так сложно, как я думал. Я преобразовал свой PWA в APK за несколько часов, и я сразу же загрузил его в Google Play Store.

Чтобы помочь вам добиться того же, в этом руководстве мы рассмотрим процесс шаг за шагом.

В конце концов, вам понравится, как работает эта новая технология TWA.

Вам не нужно будет писать какой-либо код Java, чтобы создать приложение для Android с помощью этого процесса. Кроме того, чтобы избежать путаницы, TWA отличается от кнопки «Добавить на главный экран», которую вы видите на некоторых PWA. В конце этого руководства вы получите APK-файл, готовый к загрузке в Google Play Store.

Создайте свой Nuxt PWA

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

Вы, вероятно, уже знакомы с тем, как превратить свое приложение Nuxt в PWA. Но если вы этого не сделаете, вот пара интересных вещей, которые вам следует знать. Не стесняйтесь переходить ко второй части, если ваше приложение уже является PWA.

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

PWA работают только с доверенными соединениями, поэтому убедитесь, что вы обслуживаете свое приложение через HTTPS.

Но, как всегда, Nuxt позволяет легко преобразовать ваше приложение в PWA, предоставив нам официальный модуль Nuxt PWA.

Этот модуль Nuxt интегрирован со многими подмодулями, которые вы можете включить в соответствии с вашими потребностями:

Уделите несколько минут на изучение каждого модуля, так как они могут вам не понадобиться.

Убедитесь, что ваш Nuxt PWA соответствует всем требованиям Lighthouse

Веб-контент внутри TWA должен соответствовать критериям возможности установки PWA Lighthouse и дополнительным критериям, специфичным для Android, таким как соответствие политике. Приложение также должно быстро загружаться и иметь оценку производительности не ниже 80.

Если у вас есть CI, вы можете управлять им программно, чтобы убедиться, что ваше приложение всегда обеспечивает наилучшие возможности.

Не так уж и сложно выполнить все критерии, требуемые TWA (в зависимости от вашего приложения), особенно когда вы используете модуль NUXT PWA.

Я смог быстро решить эту проблему, добавив один из них в проект, а также следующие несколько строк кода в манифесте конфигурации Nuxt:

Превратите свой PWA в приложение для Android, используя надежные веб-действия

Имейте в виду, что TWA использует файлы cookie совместно с Chrome (т. е. если вы вошли на сайт внутри браузера, вы также будете аутентифицированы внутри приложения).

Затем добавьте этот модуль в свой файл конфигурации и заполните параметры ниже:

Выпустите приложение TWA для Android

Вам понадобится ключ для подписи вашего приложения и загрузки его в Google Play Store.

Убедитесь, что вы храните этот ключ в надежном месте, так как он понадобится вам в будущем обновлении.

Обычно рассмотрение и утверждение вашей заявки занимает несколько часов. После этого вы сможете увидеть свое приложение в Play store.

Вывод

Если вы выполнили пошаговый процесс, вы сможете опубликовать свое приложение Nuxt в магазине Google Play.

Источник

Play Store теперь принимает прогрессивные веб-приложения (PWA)

Дисклеймер: я не связан с Google Play, Chrome или любой упомянутой компанией. Это не официальное заявление. Логотип и названия используются только для иллюстрации.

В Chrome 72 для Android реализована долгожданная функция Trusted Web Activity. Это означает, что теперь мы можем распространять PWA через каталог Google Play и запускать Chrome без UI в автономном режиме для нативных пакетов! Я некоторое время поигрался с этой функцией, копаясь в API, а здесь расскажу, о чём речь, чего ожидать и что доступно уже сегодня.

PWA в каталоге Play Store

Chrome 72 для Android теперь доступен для всех пользователей, и в этой версии реализована система Trusted Web Activity (TWA). Если вкратце, запуск Chrome осуществляется в автономном режиме (без панели инструментов и UI) для нативных Android-пакетов.

Начнём с того, что публикация в каталоге — не такая простая процедура, какой она должна быть (например, ввести URL в Google Play — и приложение запустится). Кроме того, нельзя использовать доступный WebAPK и опубликовать приложение в каталоге. Здесь используется Java API, который через сервисы взаимодействует с Chrome и, кажется, находится на ранней стадии разработки. Поэтому придётся многое сделать вручную.

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

По какой-то причине эта функция ещё не появилась в Chrome Platform Status, и документация до сих пор не обновилась (она вообще не обновлялась более 15 месяцев).

Обновление от 5 февраля. Блог Chromium опубликовал короткую заметку о поддержке TWA и некоторые технические детали, упомянутые в этой статье.

Обновление от 1 февраля. Пол Кинлан, ведущий разработчик Chrome в Google, подтвердил выпуск функции TWA и что документация задерживается: причина задержки в том, что разрешение на новую функцию Chrome 72 было принято в последнюю минуту.

Видео от Пита Ле Пейджа годичной давности с объяснением TWA

Зачем публиковать PWA в каталоге?

Это веб-платформа, Карл! Зачем использовать каталог?

Ну, это долгий разговор, но я много лет консультирую большой и малый бизнес, и когда мы рассматриваем разработку PWA, постоянно упоминается каталог приложений: «Наши пользователи будут там искать приложение», «У нас уже есть собственное приложение, и мы не хотим терять пользователей», «Нам нужен доступ к собственному API» или «Я хочу монетизировать PWA».

Отныне стала возможной публикация PWA в каталоге, а также работа из браузера. Конечно, это отдельная операция. Play Store не эмулирует Microsoft Store: ваше PWA не появится в магазине, если вы не скомпилируете APK и не опубликуете его.

Преимущества перед стандартными PWA

Кроме нового механизма распространения и новых пользователей из каталога (и даже из поиска Google в разделе «Приложения»), появляются и другие преимущества:

В чём инновация?

В каталоге уже были некоторые PWA, но теперь их гораздо легче подготовить и опубликовать

В Google Play Store уже есть некоторые PWA, такие как Google Maps Go, Instagram Lite и Twitter Lite. Первое приложение использует некую частную версию pre-TWA, а последние два — WebView, это был хоть не идеальный, но единственный способ сделать что-то подобное до появления TWA. В приложениях много машинного кода для некоторых вещей, таких как уведомления. Мы хотим опубликовать PWA как веб-разработчики и не хотим писать много кода Java.

TWA — специальный режим на базе кастомных вкладок Chrome, которые с версии Chrome 45 позволяют запустить встроенный в приложение браузер.

Является ли TWA гибридным фреймворком, похожим на Cordova?

Нет. С Cordova и другими гибридными решениями вы обычно поставляете ресурсы (HTML, JS, CSS и т. д.). в пакете APK. Кроме того, там отличается движок, он изолирован от пользовательского браузера, поэтому не поддерживает сеансы или совместное использование кэша.

Вот как выглядит PWA с Trusted Web Activity. Я пока не вижу реализации цветовых схем

С помощью Trusted Web Activity не нужно упаковывать файлы ресурсов (только нативные компоненты, если они нужны); все ресурсы загружаются и обновляются на лету через сервис-воркера. Ваш PWA всегда рендерится установленной версией Chrome, с её хранилищем, кэшем и сеансами. Таким образом, если пользователь открыл сеанс на веб-сайте, а потом установил приложение из Play Store, он будет уже авторизован в системе.

Требования Play Store

URL-адрес, используемый для доверенной веб-операции, должен соответствовать следующим требованиям:

Я пока не уверен, что команда Play Store QA проверяет все эти требования при публикации приложения.

Модель безопасности PWA в Play Store

Ваше PWA будет подчиняться модели безопасности браузера, а не нативного приложения, пока вы не добавите нативный код непосредственно в APK. Поскольку всё под контролем браузера, пользователь должен знать, что даже если он только что установил приложение, у него появятся данные сеанса, локальные хранилища и разрешения, уже установленные для этого хоста в браузере. Вот почему при первом запуске ему показывают мини-сообщение «Работает в Chrome»:

Кроме того, когда пользователь удалит приложение, то получит предупреждение, что состояние и данные приложения по-прежнему доступны в Chrome, поэтому при необходимости следует очистить кэш. Среди таких следов, например, разрешение Web Push: даже если пользователь удалит приложение, он всё равно продолжит получать push-уведомления. Сообщение было замечено Генри Лимом:

О необходимости таких уведомлений рассказал Пол Кинлан из команды Chrome.

Session storage comes from your browser session, we have to indicate this to users of android apps who don’t expect this type of experience.

Способы разработки

Для создания пакета с TWA сначала понадобится Android Studio. Пока что все варианты экспериментальные и описаны только примерами кода в репозитории Chrome на GitHub.

Варианты разработки приложений с TWA:

Распространение манифеста

PWA в App Store не примет манифест веб-приложения; требуется вручную скопировать некоторые значения. Значки берутся из папки “res”, как в любом нативном Android-приложении, блокировку ориентации следует определить в записи активности AndroidManifest и т. д.

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

Валидация URL

TWA будет работать только после цифрового рукопожатия домена с приложением. Механизм известен как Digital Assets Links. Он создаёт доверительные отношения между вашим хостом и APK, доказывая, что вы являетесь владельцем PWA и что вы не будете публиковать в Play Store приложения, которые вам не принадлежат. Он также устанавливает цифровой канал между сайтом и нативным приложением, который теоретически может позволить им обмениваться частными данными (но, похоже, это невозможно с сегодняшним TWA API).

С Digital Assets Links вы должны выложить на своём домене файл /.well-known/assetlinks.json. Этот JSON-файл содержит информацию о пакете Android (например, идентификатор пакета) и хэш сертификата вашего приложения, который вы можете узнать командой в консоли. У Android-пакета будет двойник на URL хоста. Есть онлайн-валидатор для проверки, что всё в порядке.

Если вы не провели рукопожатие, TWA не активируется, и ваше приложение будет просто использовать обычные Chrome Custom Tabs с минимальным интерфейсом Chrome, как если в PWA включить display: minimal-ui. Я не совсем уверен, но наверное Play Store может отклонить приложения, которые просто указывают на обычные вкладки без валидации TWA. Я пока точно не знаю, в какой момент Chrome выполняет проверку Digital Asset Link; если при каждом доступе к приложению, это может стать проблемой производительности. Думаю, возможно кэширование, а также Play Store может делать проверку перед одобрением приложения во время приёма в каталог. Посмотрим, что будет написано в документации.

Существует (не очень простой) механизм обхода процесса сертификации Digital Asset Link для целей разработки, описанный ниже.

Публикация приложения

Деплой

Когда вы закончите разработку в Android Studio и у вас есть аккаунт к консоли разработчика, нужно создать APK для продакшна и подписать его ключом, созданным в Android Studio. Можете обратиться к сервису App Signing by Google Play, чтобы в будущем упростить процесс.

Консоль Google Play

Для загрузки этих приложений нет никаких особых правил или процессов, но отдел Revision может обнаружить, что вы используете TWA, и проверит, что: 1) Digital Assets Link рабоатет; 2) URL передаёт критерии PWA (в основном, для обработчика событий fetch в сервис-воркере).

Для публикации в Play Store придётся указать много метаданных и графических ресурсов

Обновление приложения

Если вы измените контент, то не нужно заново загружать приложение, если только вы не измените приложение полностью (в соответствии с правилами каталога). Продолжаете обновлять его через сервис-воркеры и обновления на сервере. Новый APK придётся загрузить только если вы захотите изменить метаданные, нативный код или иконки.

Ограничения

Сейчас у платформы есть определённые ограничения, но это только начало. Надеюсь, со временем они будут сняты.

PWA в подпапках

Если вы публикуете свой PWA в подпапке хоста, то возникает несколько проблем.

Нет внутренних приложений

Это ограничение самого Play Store (вы не можете публиковать приложения для локальной сети или приложения, предназначенные только для вас и вашей компании). Вы можете использовать TWA и создавать apk, которые будут развёртываться за пределами магазина.

Digital Asset Link работает только с общедоступными URL, потому что Chrome должен проверить, что мы владеем доменом, а это невозможно с внутренними URL.

Первая загрузка

При первом открытии недавно установленного приложения на устройстве ещё нет файлов приложения (Service Worker ещё не зарегистрирован, если пользователь не открывал PWA раньше), поэтому в автономном режиме пользователь увидит пустой белый экран. Думаю, в будущих версиях полезно бы реализовать некую подкачку через Chrome после установки приложения. Если вы используете TWA API вместо библиотеки поддержки, то обнаружите такую ситуацию и правильно проинформируете пользователя через нативные API.

Вызов нативного кода

Уже есть двунаправленный канал между сервером TWA (Chrome) и клиентом TWA (наш APK). Этот канал в настоящее время используется только для отправки пуш-уведомлений и их отображения в нативном приложении, а не в Chrome.

Здесь есть определённый потенциал в простом соединении нативного кода и JavaScript, предоставив PWA доступ к нативному коду, аналогично механизму APPX/PWA в Microsoft Store.

Возможно, в будущем появится возможность регистрации классов Java/Kotlin в клиенте TWA, чтобы мы могли фактически вызывать их с помощью JavaScript API, когда наш PWA визуализируется в режиме TWA.

Сегодня единственный способ выполнить нативный код — использовать Intents для открытия других нативных действий и затем повторного открытия TWA, отправляя и получая аргументы через параметры URI.

Кроме того, вы можете создать в нативном коде какой-то веб-сервер или сервер WebSocket, и направить на него PWA, но это странно, сложно и, возможно, будет излишне расходовать батарею. Но перед нами целый новый мир возможностей. Посмотрим, что придумает сообщество!

Монетизация с Play Store

Если у вас платное приложение, то нельзя легко проверить, что пользователь действительно за него заплатил (в конце концов, контент — это всего лишь URL-адрес). Кроме того, если вы хотите продать какие-то цифровые ресурсы или подписки с помощью кошелька Play Store, то сложно реализовать такую схему без фактического моста с нативным кодом.

Отладка

Я не уверен, это баг или какая-то проблема моей IDE, но удалённая отладка сервис-воркеров из TWA не работает. Я могу проверить контекст окна, но не сервис-воркера.

Другие движки

Сейчас TWA работает только на Chrome, но в будущем другие браузеры могут клонировать API: например, Samsung Internet, Edge или Firefox.

Обновление от 4 февраля: TWA работает по протоколу Android Custom Tab, который в настоящее время внедряют другие браузеры. Поэтому если в системе установлен другой браузер по умолчанию, он может открыть TWA с содержимым PWA. Впрочем, требуется дополнительное тестирование, чтобы понять, как это работает.

Что произойдёт, если у пользователя более старая версия Chrome и он установит приложение из Play Store? В этом случае PWA отобразится как настраиваемая вкладка Chrome, а не в полностью автономном режиме.

Google Maps Go в Play Store уже использовал что-то похожее на TWA, а Chrome указан как обязательное требование для работы

Что произойдёт, если у пользователя вообще нет Chrome? На сегодняшний день при использовании библиотеки поддержки приложение не будет работать вообще (если нет другого браузера с поддержкой протокола Custom Tabs). Если вы используете TWA API в нативном коде Java/Kotlin, то можете проверить доступность браузера и загрузить альтернативное решение, такое как WebView, или открыть браузер.

Хотя Android-устройства без Chrome редки, но на некоторых он не установлен умолчанию, в том числе на всех новых устройствах в Европе.

Другие платформы

PWA не работает на носимых ОС (часы), но я не совсем уверен, что происходит на других Android-платформах. Вероятно, поддержки ещё нет, но нужно это проверить. Я говорю об Android TV или хромбуках с Play Store. Если вы не протестировали эти платформы, есть смысл отключить их в списке каталога.

Конфликт с WebAPK

Если вы установили PWA из Chrome, то у вас уже есть APK для этого URL, подписанный Play Store, но каталог всё равно оставит приложение в списке и позволит пользователю установить его тоже. И наоборот: установка приложения из каталога не помешает Chrome предложить пользователю «добавить» его из браузера. Думаю, этого можно избежать, если WebAPK тоже получит Digital Asset Link или мы сможем как-то сопоставить идентификатор приложения WebAPK, но вряд ли это произойдёт в ближайшее время. Посмотрим.

Два приложения Starbucks, работающие одновременно: WebAPK и наш собственный APK

Вы можете заблокировать предложение Chrome установить WebAPK и вместо него показать своё приложение из каталога, используя атрибут related_applications и атрибуты prefer_related_applications манифеста веб-приложения. Get Installed Related Apps API может в будущем помочь разрешить этот конфликт.

Создание первого PWApk

Знаю, я только что изобрёл слово PWApk, но звучит неплохо, верно?

Несколько лет назад я сделал видеокурс по нативным веб-приложениям Android. Хотя это не совсем относится к PWA, но поможет понять экосистему Android.

Самый простой способ сделать APK на основе TWA — это клонировать образец репозитория SVGOMG из репозитория ChromeLabs на GitHub

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

Создайте новый проект в Android Studio и выберите No Activity: будем использовать только Trusted Web Activity из библиотеки поддержки.

Начнём с пустого проекта

Заполните данные, выберите название проекта (мы его позже изменим) и имя пакета: это будет идентификатор нашего приложения в Android, а также в каталоге. Рекомендую использовать имя хоста в обратном порядке и произвольное название в конце. Например, если у вас хост mypwa.com/calculator, то пакет можно назвать com.mypwa.calculator.

В качестве базы подойдёт API 19 (Android 4.4). Похоже на то, что скоро это будет минимальная версия, необходимая для Chrome. Некоторые функции TWA будут работать только с API 23 (Android 6.0), но об этом позаботится библиотека поддержки.

Обновление от 5 февраля: Chrome официально объявил, что TWA работает только с Android 4.4 KitKat. Таким образом, эта функция недоступна примерно 5% активных пользователей Android: их откатит на версию с кастомной вкладкой и адресной строкой.

Выбор минимального уровня API ограничит список устройств, для которых PWA будет предлагаться в каталоге Play Store

Добавление зависимости

Следующий шаг — добавление библиотеки поддержки TWA в качестве зависимости, поэтому откроем два файла с названием build.gradle:

Два файла конфигурации: для проекта и для Android-приложения

Начнём с файла проекта. Добавим в секции allprojects > repositories следующую строку:

На следующем шаге мы открываем build.gradle модуля и добавляем в зависимости:

Настройка TWA

Следующий шаг — установить в файле модуля параметры PWA для Trusted Web Activity, добавляем в секцию defaultConfig:

Тут в качестве примера я буду использовать Starbucks PWA. Информация из процесса Digital Asset Link понадобится ключу assetStatements. Мы пока пропустим эту часть. Свойство с названием launcherName должно совпадать с short_name в манифесте веб-приложения.

Настройка манифеста

У приложений Android собственный манифест, они не примут манифест веб-приложения. Нужный файл находится в разделе app > manifests и называется AndroidManifest.xml. Там вы найдёте самозакрывающийся элемент Application XML.

Файл Android-манифеста по умолчанию

Приведённый ниже код настроит TWA с помощью библиотеки поддержки и Intent Filter, чтобы приложение получило ссылки на PWA и Digital Asset Link. Я пропущу подробности, что происходит с точки зрения Android-приложения.

Пришло время для синхронизации

На этом этапе нужно скомандовать Android Studio принять все ваши изменения, нажав Sync Now. Если всё сделано правильно, то не выскочит никаких ошибок.

Замена иконок

В данный момент приложение использует только иконку Android по умолчанию, поэтому нужно заменить все файлы в app>res>mipmap в разных подпапках для разной плотности пикселей. Есть две версии: квадратные и закруглённые иконки. Закруглённые появились в Android 7.1, и если хотите их игнорировать, то удалите ссылку android:roundIcon ссылку в AndroidManifest.xml.

Нужно взять значки из манифеста и скопировать их во вложенные папки mipmap с соответствующими именами

Настройка темы

Наконец, нужно открыть app/res/values/styles.xml и внести некоторые изменения в тему, чтобы она выглядела как PWA:

Вы можете изменить цвета из app/res/values/colors.xml, но я пока не видел, чтобы это работало в TWA.

Если вы ограничиваете ориентацию в манифесте, то можете добавить это ограничение в элемент в AndroidManifest.xml.

Готовы к тестированию?

Мы готовы протестировать наш PWApk, но перед этим нужно настроить режим разработки TWA для Chrome на тестовом устройстве Android или в эмуляторе (с Chrome 72+).

Настройка Chrome

Убедитесь, что у вас Chrome стабильной версии 72 и откройте chrome://flags. Найдите опцию Enable command line on non-rooted devices и поставьте флаг. Перезапустите браузер.

Затем нужно настроить Chrome для обхода Digital Asset Link для хоста, который мы хотим протестировать, в нашем примере это app.starbucks.com.

Чтобы изменить параметры командной строки для Chrome под Android нужно записать текстовый файл в файловую систему Android. Самый простой способ сделать это — через adb (android debug bridge), который должен быть прописан в path (погуглите, если что), и запустить команду:

Можно использовать простой bash-скрипт от Google.

Нужно остановить Chrome, чтобы он при запуске принял новые настройки

И перезапустить Chrome. Но не просто убрать приложение из списка задач, а из настроек принудительно завершить весь процесс (Force Stop). Мне пришлось сделать это пару раз, прежде чем всё сработало.

Предупреждение о том, что флаг включен и всё прошло удачно

Если всё сделано, то каждый раз при открытии Chrome вы увидите предупреждение о неподдерживаемом флаге. Если запустить приложение из Android Studio, ваше PWA наконец-то запустится и заработает в автономном режиме под значком и названием вашего APK.

Заключение

Возможность публикации PWA в каталоге Google Play реально меняет правила игры. Кажется, сейчас у нас очень ранняя версия API и определённо требуется доработка. Я действительно хочу, чтобы можно было ввести URL нашего PWA и получить с него файл APK. Это не очень просто из-за системы верификации Digital Asset Link. Только Play Store может это сделать, используя тот же WebAPK, который они генерируют.

Я раньше задавался вопросом, одобряет Google приложения PWA или ведёт с ними войну. Но теперь они сняли с себя подозрения, по крайней мере, в части TWA.

Будем надеяться, что TWA в Chrome 72 — это первый шаг в долгом путешествии!

Источник