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/ плагина.
Що виправили
У списку підписників час підписки й останнього сповіщення тепер показується за годинником магазину. Раніше підписка, оформлена о 22:39 за Києвом, значилася о 19:39.
Що полагодили
Сторінка «немає з’єднання», яку застосунок завантажує заздалегідь, більше не зараховується в статистиці вітрини як перегляд сторінки.
Що виправили
Сторінка «Немає з’єднання з інтернетом» з’являлася й тоді, коли інтернет був, а сайт просто не відповів: наприклад, браузер не прийняв адресу чи сертифікат. Покупець думав, що в нього зник зв’язок, а ви не бачили справжньої причини. Тепер ця сторінка показується лише за справжньої відсутності мережі, а в інших випадках браузер показує свою помилку.
Що нового
Віконце з пропозицією отримувати сповіщення та встановити магазин на телефон більше не блимає неоформленим: його стиль приходить разом з іншими. Якщо ви правили шаблон віконця в редакторі оформлення, правки збережуться.
Оформлення й скрипти доповнення тепер склеюються з файлами теми в спільний стиснений файл, і сторінка вантажиться меншою кількістю запитів. Це працює разом із ядром 2.86.0, тому доповнення потребує його: спершу оновіть магазин, потім доповнення. Як влаштоване склеювання: https://cartixx.com/docs/theme/assets?lang=uk
Що нового
Оформлення віконця з пропозицією підписатися на сповіщення тепер оновлюється в темі саме, якщо ви його не правили: раніше файл стилів клали в тему один раз, і виправлення до магазину не доходили. Правлене оформлення доповнення не чіпає.
Якщо в теми на телефоні є нижня панель, як у нової теми CartiX, віконце стає над нею й більше не закриває її пункти.
Що полагодили
Екран додатка виглядає так само, як решта панелі: кнопки, розміри та кольори беруться з її набору, а не задані в додатку окремо. Раніше він жив своїм життям — панель змінювала вигляд, а екран додатка залишався попереднім і виглядав чужим.
Налаштування повернулися в панель
Сповіщення знову налаштовуються: коли питати дозвіл, що писати в запитанні і де показувати віконце. Поруч — магазин на телефоні: назва, значок з однієї картинки, кольори і спосіб запуску. Видно й список підписників, зайвого можна прибрати.
Якщо ключі підпису ще не заведені, екран каже про це прямо й заводить їх кнопкою: без ключів вітрина взагалі не питає дозволу, а зрозуміти це не було звідки.
Доповнення говорить мовою панелі
Назва каналу, підписи ключів і підказки до них переїхали в саме доповнення і перекладаються російською, українською та англійською. Раніше вони лежали в рушії, і вимкнене доповнення все одно займало там місце.
Свій значок у доповнення
У розділі «Плагіни» та у списку встановленого доповнення тепер видно за власним значком, а не за однаковою коробкою. Потрібне ви знаходите поглядом, а не читанням усього списку. Значок з’являється на магазині версії 1.30.0 і новіше.
Зрозумілі назви
Доповнення тепер називається своїми іменами: push-сповіщення та PWA-застосунок. Так само названі канал сповіщень і вкладки налаштувань — шукати звичні слова більше не потрібно.
Телефон пропонує встановити магазин
Вітрина відповідає й без інтернету — сторінкою «немає з’єднання» замість помилки браузера, — і телефон нарешті пропонує поставити її на головний екран.
Список підписників
Видно, хто підписаний: пристрій і браузер, впізнаний покупець чи гість, коли підписався й коли отримав останнє сповіщення. Пристрій можна відписати вручну.
Дозволив — отже підписаний
Якщо браузеру вже дозволили сповіщення, магазин підписується сам. Раніше покупець міг лишитися без сповіщень, будучи впевненим, що підписався.
Підписка з телефона й пропозиція встановлення
Дозвіл із телефона тепер доходить до магазину, а вітрина пропонує поставити себе на головний екран. У налаштуваннях підказано, що для цього потрібен значок застосунку.
Підписник не втрачається через збій мережі
Невдале надсилання більше не видаляє живого підписника — магазин спробує ще раз.
Розсилка доходить до всіх
Один зіпсований підписник більше не обриває надсилання іншим: раніше через нього сповіщення не отримував ніхто з пачки.
Готово до роботи одразу після встановлення
Усе потрібне для сповіщень з’являється з першою ж сторінкою магазину, а не після того, як ви дійшли до налаштувань.
Сповіщення працюють на всіх сторінках
Обробник сповіщень тепер лежить у корені магазину. Раніше частина серверів до нього не доходила, і сповіщення мовчки не працювали.
Сповіщення у браузері та магазин на телефоні
Покупець один раз дозволяє сповіщення й дізнається про замовлення, надходження товару та знижку навіть із закритим сайтом — платити за кожне повідомлення, як за SMS, не потрібно. Тим самим доповненням вітрину можна поставити на головний екран телефона.