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