Настройка Progressive Web Application

Progressive Web Application (PWA) — это веб-приложение, которое работает как мобильное. Оно позволяет пользователям устанавливать Web Shop прямо на главный экран мобильного устройства и переходить в магазин без необходимости открывать браузер и вручную переходить на сайт.

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

Сценарий пользователя для установки PWA

• На iOS-устройствах
• На Android-устройствах

1. Пользователь открывает Web Shop на мобильном устройстве.

2. Web Shop отображает баннер установки приложения в нижней части экрана.

3. Пользователь нажимает Добавить.

4. Web Shop отображает инструкции по установке PWA.

5. Пользователь следует инструкциям. В результате PWA добавляется на главный экран устройства.

1. Пользователь открывает Web Shop на мобильном устройстве.

2. Web Shop отображает баннер установки приложения в нижней части экрана.

3. Пользователь нажимает Добавить.

4. Пользователь подтверждает установку во всплывающем системном окне.

5. PWA устанавливается автоматически и появляется на главном экране и в списке приложений.

Как настроить

1. В проекте в Личном кабинете перейдите в раздел Каналы продаж > Веб-сайты.
2. В панели вашего Web Shop нажмите Открыть Site Builder.
3. Перейдите в раздел Настройки Web App.
4. Установите переключатель Включить Web App в активное положение.

5. Настройте баннер установки приложения (опционально):
   • В меню Выберите оверлей выберите Баннер установки Web App.
   • Измените заголовок баннера.
   • Измените текст баннера.
   • Установите пользовательский фон.
   • Измените стиль кнопки.

6. Измените инструкции по установке (опционально). Для этого в меню Выберите оверлей выберите Инструкция по установке для iOS.

7. Настройте отображение PWA на устройстве пользователя:
   1. Укажите название PWA, оно будет отображаться на главном экране и в списке приложений на устройстве пользователя.
   2. Загрузите значок PWA.

Примечание

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

8. Чтобы изменения вступили в силу, опубликуйте ваш сайт.

Полезные ссылки