Настройки приложения

Мастер настройки (глава 2) покрывает основное. Здесь — полные настройки, которые открываются из меню слева. Все изменения применяются кнопкой «Сохранить» внизу страницы; пока не нажали — ничего не изменилось.

Важно. Выбор «Витрина» вверху определяет, для какой витрины вы правите настройки. Если страница пишет «Этот раздел использует настройки витрины: …», значит, эта витрина берёт настройки у другой — править нужно там (см. несколько витрин).

Включение PWA и подключение к теме

Когда это нужно. Включить или выключить PWA на витрине; подключить приложение к сайту, который не «Магазин».

Где открыть. Меню → Установка → Установка.

Что сделать.

1. Поставьте галочку «Активировать PWA».
2. Для приложения «Магазин» (Shop-Script) файлы подключаются автоматически через стандартные точки подключения темы (frontend_head и frontend_footer) — больше ничего делать не нужно.
3. Для остальных приложений или тем, которые этих точек не поддерживают, в разделе «Хелперы» на этой странице скопируйте два фрагмента кода и вставьте в шаблон сайта (index.html темы): первый — внутри тега <head>, второй — перед закрывающим </body>.
4. Нажмите «Сохранить».

Рис. 3.1. Страница «Установка» на тестовом стенде.

Что должно получиться. В плашке вверху страницы: «PWA статус: Активирован».

Если не получилось. Если приглашение установить не появляется, чаще всего причина в отсутствующих помощниках в шаблоне или в выключенной галочке. См. FAQ.

Информация о приложении (Manifest)

Когда это нужно. Задать название, внешний вид, иконки и поведение установленного приложения.

Где открыть. Меню → Информация о приложении. При сохранении создаётся Manifest — служебный файл с описанием вашего приложения, который читает браузер.

Основные поля

Все три поля обязательны.

Поле	Что вводить
Имя приложения	Полное название магазина
Короткое имя	Подпись под иконкой, когда мало места
Описание	Одна строка о том, что делает приложение

Адрес и внешний вид

Поле	Что значит	Рекомендация
Start URL	Страница, которую открывает иконка	Оставьте значение, подставленное приложением (адрес вашей витрины), или укажите путь внутри сайта. Чужой домен не принимается: используется только путь на текущем домене
Область видимости (Application Scope)	Где приложение «живёт»: выход за её пределы возвращает покупателя в обычный браузер	Оставьте подставленное значение
Режим отображения	Как выглядит окно: standalone (как отдельное приложение), fullscreen, minimal-ui, browser (обычная вкладка)	standalone — по умолчанию и лучший выбор для магазина
Ориентация	Принудительная ориентация экрана	any (любая) — по умолчанию
Цвет темы	Цвет рамки окна на телефоне	Фирменный цвет магазина
Цвет фона	Цвет экрана приложения, пока загружается страница	Светлый нейтральный

Осторожно. Изменение Start URL, области видимости и ID приложения у уже установленного у покупателей приложения может потребовать его переустановки. Если не уверены, не меняйте.

Если приложение пишет, что часть сохранённых значений «исправлена» (чужой хост, .. в пути, адрес вне области видимости), это приложение защищает установки: исправленные значения вы увидите в подсказке.

Иконки и maskable-иконка

Когда это нужно. Загрузить или заменить иконку, которая появится на экране телефона.

Где открыть. Меню → Информация о приложении → блок «Генерация иконок».

Что сделать.

1. Загрузите квадратное изображение PNG, JPEG, GIF или WebP не меньше 512×512 пикселей (лучше 1024×1024). Размеры 48, 72, 96, 128, 144, 192, 384 и 512 создаются автоматически. Неквадратное изображение вписывается в квадрат с прозрачными полями.
2. Нажмите «Сохранить».

Maskable-иконка — иконка, которая занимает весь квадрат 1024×1024, а система сама обрезает её до круга, скруглённого квадрата и т. п. Это нужно, чтобы на Android иконка выглядела аккуратно и не получала белую рамку.

1. Поставьте галочку «Использовать maskable».
2. Загрузите отдельное квадратное изображение (лучше ровно 1024×1024). Логотип и текст держите в центре, оставляя примерно 20–25% свободного места от каждого края, иначе их может обрезать.
3. Сохраните.

Если отдельная maskable-иконка не загружена, используется автоматическая копия основной иконки, и она может быть обрезана: приложение об этом предупредит.

Рис. 3.2. Блок «Генерация иконок» и «Maskable-иконка» на тестовом стенде (демонстрационный рисунок).

Что должно получиться. Под полем загрузки появилась картинка. В проверке «Иконки» на странице «Диагностика» — «Пройдено» (глава 7).

Если не получилось. «Разрешены только PNG, JPEG, GIF и WebP, минимум 512×512» — подберите другой файл. Если иконка осталась старой на телефоне: операционная система может хранить иконку уже установленного приложения. Адрес иконки в Manifest меняется сам, но установленное приложение иконку не всегда обновит — удалите приложение с устройства и установите заново. Идентичность приложения (app_id) при замене иконки не меняется.

Дополнительная информация (необязательные поля)

Блок «Дополнительная информация» помечен «Не обязательно». В большинстве магазинов его можно не заполнять.

Поле	Зачем
ID приложения	Уникальный идентификатор приложения. Не меняйте у работающего приложения
Категории	Подсказка каталогам приложений (например, shopping)
Display override	Дополнительные режимы отображения через запятую
Dir, Язык	Направление и основной язык текста
Iarc rating id	Возрастной рейтинг
Скриншоты	Картинки для витрин приложений (кнопка «Добавить скриншот»)
Shortcuts	Быстрые действия по долгому нажатию на иконку (имя, URL, иконка 96×96)

Несколько витрин и разные домены

Когда это нужно. У магазина несколько витрин: основной сайт, зеркало на другом домене, витрина в подкаталоге.

Как это устроено. Для каждой витрины создаётся своё приложение. В верхнем выборе «Витрина» вы выбираете, какую настраиваете. Витрины Shop-Script показаны первыми, группа «Другие витрины» — служебные приложения Webasyst.

Варианты выбора для витрины (поле «Выбор настроек для витрины» / «Использовать настройки»):

Вариант	Что означает
Использовать собственные настройки витрины	Витрина настраивается отдельно
Использовать настройки от витрины …	Витрина берёт настройки у другой. Страницы настроек покажут «Этот раздел использует настройки витрины…»
Все витрины (пункт в выборе витрины; в плашке вверху это пишется «Для всех витрин»)	Общий набор значений по умолчанию, из которого витрины могут брать настройки

Что учесть:

• Разные домены: Manifest, иконки и Service Worker строятся от адреса каждой витрины. Приложение на одном домене не влияет на другое.
• Мастер настройки не меняет все витрины сразу — выбирайте витрины по очереди.
• Диагностика браузера администратора видит только витрины того же адреса, что и бэкенд; для витрин на других доменах доступны только серверные проверки, а браузерную часть откройте прямо на домене витрины (глава 7).
• Смена адреса витрины (глава 8) — отдельная процедура: Start URL и область видимости привязаны к адресу.

Шаблоны для установки PWA

Когда это нужно. Изменить тексты, цвета и условия показа приглашений установить приложение.

Где открыть. Меню → Установка → Шаблоны для установки PWA. Каждый способ приглашения виден покупателю только тогда, когда PWA настроено и готово к установке.

Шаблон	Что это	Когда и где показывается
Простая кнопка	Кнопка «Установить приложение» (стандартная или со своим видом)	Там, куда вы вставили её код в шаблон сайта; рекомендуется шапка и подвал
Снэк-бар	Небольшое сообщение поверх страницы	Автоматически: после более чем 3 просмотров страниц, показывается 7 секунд, не чаще одного раза в неделю
Баннер сверху сайта	Полоса вверху страницы	Автоматически, например после авторизации или регистрации (условие указано на странице шаблона)
Большой баннер на странице	Крупный баннер; рекомендуется главная страница	Только там, куда вы вставили код (хелпер вывода)
Небольшой баннер на странице	Компактный баннер, например внутри каталога	Только там, куда вы вставили код
Поп-ап	Окно поверх страницы	Автоматически: когда товар добавлен в корзину, но заказ не оформлен, или при попытке уйти с сайта
Кнопка на странице товара	Кнопка в карточке товара	Автоматически, когда в корзине есть товары, в выбранном месте («Добавить в корзину», секция Aux) или вручную хелпером

Во вкладках каждого шаблона одинаковая схема: Установка (кнопка «Активировать» или хелпер вывода), Вид → Контент (тексты и картинка), Вид → Стилизация (цвета, размеры, скругление) и Пользовательский CSS для опытных. Не включайте много способов сразу: достаточно одного-двух.

Интерфейс приложения для пользователя

Где открыть. Меню → Разное → Интерфейс приложения для пользователя.

Здесь настраиваются элементы, видимые покупателю внутри установленного приложения: «Кнопка назад» (видна только в установленном приложении: в окне без адресной строки покупателю нужна кнопка возврата; вставляется в шаблон хелпером, положение и цвет настраиваются) и «Прелоад предкеш» (индикатор загрузки при использовании предварительного кеширования; включается кнопкой «Активировать» на его вкладке).

Дополнительные настройки

Где открыть. Меню → Разное → Дополнительные настройки.

Поле	Что делает	Рекомендация
Минификация файлов service-worker	Сжимает служебные файлы	Оставьте как есть, если нет причин менять
Отладка в консоли браузера	Выводит сообщения приложения в консоль разработчика	Включайте только по просьбе поддержки
Исключить URL	Адреса, на которых PWA отключено; по одному на строку, допускаются регулярные выражения	По умолчанию уже исключены бэкенд и страница входа

Обновления кеша

Страница описана в главе 5.