Как правильно добавить PWA в OpenCart без платных модулей и головной боли

Не знаешь что такое 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 и тестируй на телефоне. Всё проще, чем кажется 😉