Не знаешь что такое PWA? Загугли, тебе понравится! Если коротко, то это возможность "устанавливать" сайт как приложение на смартфон/компьютер пользователя. По факту это иконка на рабочем столе и браузер без адресной строки, но впечатление и UX будто это нативное приложение. Уже понял к чему это я? Нет??? Читай дальше!
Естественно в стоковом OpenCart ничего подобного нет, поэтому я добавил базовую, но рабочую реализацию PWA прямо в сборку.
Динамический manifest.json из настроек магазина
Manifest генерируется автоматически на основе данных из админки:
- Название приложения (из настроек магазина)
- Короткое имя (для иконки на рабочем столе)
- Описание
- Цвет темы (theme-color) и фон (background-color)
- Иконка (отказался от базового favicon в пользу одного изображения 512х512 пикселей, закрывает вопрос на 100%)
- start_url - главная страница
- display: standalone (открывается как приложение, без браузерной рамки)
Никаких ручных правок json-файла - всё берётся из конфига, меняешь название магазина - manifest сразу обновляется.
Простое кастомное предложение установки
Когда пользователь заходит с мобильного устройства и браузер понимает, что сайт может быть установлен как PWA, появляется предложение (custom prompt, не нативный от браузера):
- Текст: "Добавьте [Название] на главный экран для быстрого доступа"
- Кнопки: "Добавить" / "Не сейчас"
- Краткие инструкции для iOS (Safari), Android, Desktop
Всё это показывается только один раз (если пользователь нажал "Не сейчас" - больше не беспокоим). Дизайн в стиле сайта само собой.
Управление в админке
В настройках системы два переключателя:
- Включить поддержку PWA (генерация manifest и service worker).
- Показывать предложение установки на мобильных устройствах.
Хочешь чистый сайт без PWA - выключи оба. Хочешь только manifest без попапа - оставь первый включённым, второй выключи. Всё под контролем.
Поставил сборку - включил PWA в настройках и твой сайт уже можно "установить" как приложение. Особенно круто работает для кафе, ресторанов, доставки еды, кофеен, пиццерий, баров - там где клиент возвращается часто и ему важно быстро открыть меню/корзину. Хочешь увидеть вживую? Качай сборку, включай PWA и тестируй на телефоне. Всё проще, чем кажется 😉