Что нужно для возможности установки?

Feb 14, 2020 — Обновлено May 19, 2021

Available in: English, Español, Português, 中文, 日本語, and 한국어

Appears in: Прогрессивные веб-приложения

Pete LePage

TwitterGitHubGlitchHomepage

Прогрессивные веб-приложения (PWA) - это современные высококачественные приложения, созданные с использованием веб-технологий. PWA дают возможности, аналогичные приложениям iOS/Android и десктопным приложениям, они надежно работают даже в условиях нестабильной сети и могут быть установлены, что упрощает их поиск и использование.

Большинство пользователей знакомы с установкой и преимуществами работы с установленными приложениями. Установленные приложения появляются в плоскости запуска операционной системы, например, в папке «Приложения» в Mac OS X, в меню «Пуск» в Windows и на главном экране в Android и iOS. Установленные приложения также отображаются в переключателе действий, поисковых системах устройств, таких как Spotlight, и на листах обмена контентом.

Большинство браузеров указывают пользователю, что прогрессивное веб-приложение (PWA) можно установить, если оно соответствует определенным критериям. Среди индикаторов — кнопка «Установить» в адресной строке или пункт «Установить» в дополнительном меню.

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

Критерии установки #

Чтобы запустить событие beforeinstallprompt и показать внутрибраузерное предложение установки, ваше прогрессивное веб-приложение в Chrome должно соответствовать следующим критериям:

• Веб-приложение еще не установлено
• Соответствует эвристике взаимодействия с пользователем
• Поставляется по HTTPS
• Включает манифест веб-приложения, в который входят:
  • short_name или name
  • icons — должно включать значки размером 192 пикселя и 512 пикселей.
  • start_url
  • display — значение должно быть fullscreen, standalone или minimal-ui
  • prefer_related_applications не должен присутствовать или быть false
• Регистрирует сервис-воркер с помощью обработчика fetch

Другие браузеры имеют аналогичные критерии для установки, хотя могут быть незначительные отличия. Чтобы получить подробную информацию, посетите соответствующие сайты:

• Edge
• Firefox
• Opera