Прогрессивные веб-приложения (PWA) — это современные высококачественные приложения, созданные с использованием веб-технологий. PWA предлагают те же возможности, что и приложения для iOS/Android/настольных ПК, они надежны даже в нестабильных условиях сети и могут быть установлены, что упрощает пользователям их поиск и использование.
Большинство пользователей знакомы с установкой приложений и преимуществами их установки. Установленные приложения отображаются на стартовых поверхностях операционной системы, например в папке «Приложения» в Mac OS X, меню «Пуск» в Windows и на главном экране в Android и iOS. Установленные приложения также отображаются в переключателе активности, в поисковых системах устройства, таких как Spotlight, и на листах обмена контентом.
Большинство браузеров сообщают пользователю, что ваше прогрессивное веб-приложение (PWA) можно установить, если оно соответствует определенным критериям. Примеры индикаторов включают кнопку «Установить» в адресной строке или пункт «Установить» в дополнительном меню.
Кроме того, когда критерии выполняются, многие браузеры запускают событие beforeinstallprompt
, что позволяет вам предоставить собственный пользовательский интерфейс внутри приложения, который запускает процесс установки внутри вашего приложения.
Установить критерии
В Chrome ваше прогрессивное веб-приложение должно соответствовать следующим критериям, прежде чем оно будет запускать событие beforeinstallprompt
и показывать рекламу установки в браузере:
- Веб-приложение еще не установлено
- Соответствует эвристике взаимодействия с пользователем:
- Пользователь должен щелкнуть или коснуться страницы хотя бы один раз (в любое время, даже во время предыдущей загрузки страницы).
- Пользователь должен потратить не менее 30 секунд на просмотр страницы (в любое время).
- Обслуживание через HTTPS
- Включает манифест веб-приложения , который включает в себя:
-
short_name
илиname
-
icons
— должны включать значок размером 192 пикселя и 512 пикселей. -
start_url
-
display
— должен бытьfullscreen
,standalone
илиminimal-ui
-
prefer_related_applications
не должны присутствовать или иметь значениеfalse
-
Другие браузеры имеют схожие критерии установки, хотя могут быть небольшие различия. Подробную информацию можно найти на соответствующих сайтах: