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, не потрібно. Тим самим доповненням вітрину можна поставити на головний екран телефона.