Установка адресной строки для прогрессивных веб-приложений на рабочем столе

Прогрессивные веб-приложения легко установить благодаря новой кнопке установки в адресной строке Chrome (омнибоксе).

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

В Chrome 76 (бета-версия, середина июня 2019 г.) мы упрощаем пользователям установку Progressive Web Apps на рабочем столе, добавляя кнопку установки в адресную строку (омнибокс). Если сайт соответствует критериям установки Progressive Web App , Chrome автоматически отобразит значок установки в адресной строке. Нажатие кнопки предложит пользователю установить PWA.

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

Добавление собственного приглашения на установку

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

Чтобы добавить собственную кнопку установки, прослушайте событие beforeinstallprompt . При его запуске сохраните ссылку на событие и обновите пользовательский интерфейс, чтобы пользователь знал, что он может установить ваше Progressive Web App.

Шаблоны для продвижения установки вашего PWA

Существует три основных способа продвижения установки PWA:

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

Дополнительные сведения см. в разделе «Шаблоны продвижения установки PWA (мобильные устройства)» . Его основное внимание уделяется мобильности, но многие шаблоны применимы и для настольных компьютеров или могут быть легко изменены для работы на настольных компьютерах.