Установка на устройства покупателей

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

Что должно быть готово

Приглашение появится, только если выполнено всё из списка. Если нет — смотрите FAQ.

На странице Установка → Установка включено «Активировать PWA» (глава 3).
Сайт открыт по HTTPS.
Загружена иконка, заполнены имя и короткое имя (глава 3).
Включён хотя бы один способ приглашения (баннер, снэк-бар, поп-ап, кнопка) и тема подключена (глава 2, шаг 3).
На странице Диагностика проверка «Требования к установке» не красная (глава 7).

Как выглядит приглашение

Рис. 4.1. Баннер установки на тестовой витрине с демонстрационными товарами. Снимок получен в эмуляции Android Chrome на компьютере; установка на настоящем телефоне не выполнялась.

Способы приглашения (баннер, снэк-бар, поп-ап, кнопка, большой и небольшой баннеры на странице, кнопка на странице товара) описаны в главе 3. Если покупатель закрыл баннер, закрытие запоминается для всего сайта, чтобы приглашение не раздражало.

Нажав «Установить», покупатель видит окно установки. Приложение само определяет устройство и показывает подходящие шаги и QR-код, чтобы можно было с компьютера перейти на телефон.

Android: Chrome, Edge, Opera, Яндекс Браузер

Что делает покупатель.

Открывает витрину в браузере телефона.
Нажимает «Установить» в вашем баннере (или в меню браузера — «Установить приложение» / «Добавить на главный экран»).
Подтверждает установку.

Что получится. Иконка магазина появится на главном экране. Открывается в отдельном окне без адресной строки.

Android: Samsung Internet

Покупатель открывает меню браузера (три полоски) и выбирает «Установить приложение» или «Добавить на главный экран». Приглашение в окне установки показывает эти шаги.

iPhone и iPad (Safari)

На iPhone нет единой кнопки «Установить», поэтому окно установки показывает шаги:

Нажмите кнопку «Поделиться» на панели Safari.
Выберите «На экран “Домой”».
Введите название и нажмите «Добавить».
Откройте приложение с экрана «Домой».

Важно.

В других браузерах на iPhone добавлять сайт на экран «Домой» можно, начиная с iOS/iPadOS 16.4. В более старых версиях окно просит открыть страницу в Safari.
Push-уведомления на iPhone работают только у приложения, добавленного на экран «Домой», и запущенного оттуда (iOS 16.4+). Разрешение запрашивается из установленного приложения.
Установка на реальном iPhone разработчиком не проверялась.

Компьютер

Chrome, Edge — справа в адресной строке появляется значок установки. Также можно открыть меню браузера и выбрать «Установить»; в Chrome пункт может находиться в разделе «Трансляция, сохранение и отправка».
Safari на Mac — меню «Файл» или кнопка «Поделиться» на панели, затем пункт добавления сайта в Dock (название зависит от версии macOS).
Firefox на компьютере обычно не предлагает установку сайтов. Сайт работает как обычно; чтобы установить, откройте его в Chrome или Edge.

Если сайт открыт внутри другого приложения

Если покупатель пришёл из мессенджера или соцсети и страница открыта во встроенном просмотрщике, установка невозможна. Окно установки попросит открыть страницу в браузере телефона.

Как проверить самому

Когда это нужно. После настройки убедиться, что приглашение работает.

Где открыть. Мастер настройки → шаг 3 → часть 3 (QR-код) либо просто откройте витрину в браузере.

Что сделать.

На телефоне отсканируйте QR-код (или откройте витрину вручную в Chrome / Safari).
Дождитесь баннера. Нажмите «Установить» и пройдите шаги.

Что должно получиться. Иконка магазина на главном экране; магазин открывается без адресной строки. Через время в плашке вверху страницы настроек увеличится «Счётчик установок PWA».

Если не получилось.

Баннер был закрыт ранее: очистите данные сайта в браузере или откройте витрину в режиме инкогнито.
Окно ведёт себя иначе, чем в этом описании: интерфейс браузеров меняется между версиями. Установка из меню самого браузера работает независимо от вашего баннера.
Дальше — FAQ: не появляется установка и FAQ: не работает на iPhone.

Что проверено, а что нет

Что	Статус
Окно установки, определение платформы, тексты (на тестовом стенде, с подменой окружения)	Проверено
Баннер установки в эмуляции Android Chrome	Проверено
Установка на настоящем Android-телефоне	Не проверялось
Установка на настоящем iPhone, push на iPhone	Не проверялось
Поведение конкретных версий браузеров	Зависит от браузера