Push-уведомления и PWA-приложение
Push-уведомления магазина: покупатель один раз разрешает их и узнаёт о заказе, поступлении товара и скидке, даже когда сайт закрыт. Платить за каждое сообщение, как за SMS, не нужно. Push встаёт рядом с почтой и SMS: те же события магазина, те же тексты, тот же журнал; им же можно сделать рассылку по всем подписанным, а в панели виден список подписчиков с устройствами. Разрешение спрашиваем не на пороге, а после того, как человек осмотрелся, — иначе браузер запомнит отказ навсегда. Второе — PWA: витрина становится приложением, покупатель ставит магазин на главный экран телефона и открывает его в одно касание, без адресной строки. Название, значок, цвета, способ запуска и быстрые действия настраиваются для каждой витрины, значки нарезаются из одной картинки. Учтены особенности платформ: на Android установку предлагает кнопка, на iPhone — подсказка, потому что кнопки там не существует.
Снимки экрана скоро появятся.
Что появится в магазине
Так это увидит покупатель после установки.
- В шапку страниц добавляется описание магазина как приложения: имя, значок и цвета для телефона. Ничего видимого на странице не появляется. Имя, значок и цвета берутся из настроек плагина для этой витрины.
- Внизу страницы появляется окошко с вопросом об уведомлениях и предложением поставить магазин на телефон. Тексты и момент показа — в настройках плагина, вид — в редакторе оформления. Кнопка «Вернуть заводской вид» возвращает исходное окошко.
Новые страницы магазина
- /manifest.webmanifest Описание магазина как приложения: по нему телефон предлагает установку и рисует значок.
- /push-worker.js Обработчик, который показывает уведомление, даже когда магазин закрыт. Файл появляется в корне сайта сам: браузер разрешает показывать уведомления только там, где лежит обработчик, и глубже.
- /web-push/… Адреса, которыми браузер сообщает магазину о согласии на уведомления и об отказе.
Уведомления в браузере и магазин на телефоне
Плагин даёт магазину бесплатный канал связи и превращает витрину в приложение.
Что делает
- Уведомления. Покупатель один раз разрешает их и получает сообщения магазина, даже когда сайт закрыт. Канал встаёт рядом с почтой и SMS: те же события, те же шаблоны, тот же журнал. Им же можно сделать рассылку.
- Магазин на телефоне. Витрина описывает себя приложением: имя, значок, цвета, запуск без адресной строки. Покупатель ставит её на главный экран.
Как устроено
| Часть | Где |
|---|---|
| Подпись магазина (ключи VAPID) | подключение канала webpush — шифруется вместе с остальными доступами |
| Подписки браузеров | таблица web_push_subscriptions, по одной на устройство |
| Обработчик уведомлений | маршрут /push-worker.js — с корня сайта, иначе браузер ограничит его одной папкой |
| Описание приложения | маршрут /manifest.webmanifest |
| Окошко на витрине | шаблон темы plugins/web-push/prompt.html + push.js |
Что учтено про платформы
- Разрешение спрашиваем не сразу: отказ браузер запоминает надолго, переспросить магазин не сможет. Момент задаётся настройкой (секунды + страницы).
- iPhone показывает уведомления только установленному магазину (iOS 16.4+). Пока витрина живёт вкладкой, вопрос не задаётся вовсе — иначе покупатель решит, что уведомления сломаны.
- Кнопки установки на iPhone не существует — там показывается подсказка «Поделиться → На экран „Домой“», а кнопка убирается.
- Значки нарезаются из одной картинки: 192, 512, отдельный «обрезаемый» с полями (система вправе вписать его в круг) и 180 для iPhone.
Требования
PHP с openssl (создание ключа P-256) и curl. Отправку выполняет
minishlink/web-push, он лежит в vendor/ плагина.
Понятные названия
Дополнение теперь называется своими именами: push-уведомления и PWA-приложение. Так же названы канал уведомлений и вкладки настроек — искать привычные слова больше не нужно.
Телефон предлагает установить магазин
Витрина отвечает и без интернета — страницей «нет соединения» вместо ошибки браузера, — и телефон наконец предлагает поставить её на главный экран.
Список подписчиков
Видно, кто подписан: устройство и браузер, узнанный покупатель или гость, когда подписался и когда получил последнее уведомление. Устройство можно отписать вручную.
Разрешил — значит подписан
Если браузеру уже разрешили уведомления, магазин подписывается сам. Раньше покупатель мог остаться без уведомлений, будучи уверенным, что подписался.
Подписка с телефона и предложение установки
Разрешение с телефона теперь доходит до магазина, а витрина предлагает поставить себя на главный экран. В настройках подсказано, что для этого нужен значок приложения.
Подписчик не теряется из-за сбоя сети
Неудачная отправка больше не удаляет живого подписчика — магазин попробует ещё раз.
Рассылка доходит до всех
Один испорченный подписчик больше не обрывает отправку остальным: раньше из-за него уведомление не получал никто из пачки.
Готово к работе сразу после установки
Всё нужное для уведомлений появляется с первой же страницей магазина, а не после того, как вы дошли до настроек.
Уведомления работают на всех страницах
Обработчик уведомлений теперь лежит в корне магазина. Раньше часть серверов до него не доходила, и уведомления молча не работали.
Уведомления в браузере и магазин на телефоне
Покупатель один раз разрешает уведомления и узнаёт о заказе, поступлении товара и скидке даже с закрытым сайтом — платить за каждое сообщение, как за SMS, не нужно. Тем же дополнением витрину можно поставить на главный экран телефона.