Як додати сповіщення до застосунку: у застосунку, email і push

Щоб додати сповіщення до веб-застосунку, почніть із сповіщень у застосунку: таблиця сповіщень у вашій базі даних і значок дзвіночка, що показує непрочитані елементи. Додайте email для речей, які людям потрібно знати, коли їх немає поруч, використовуючи провайдера електронної пошти, а web push додавайте лише тоді, коли важливі своєчасні сповіщення, адже для нього потрібні service worker, дозвіл користувача і, на iPhone, збережений на екран «Початок» застосунок. Які б канали ви не використовували, створюйте кожне сповіщення в одному місці на сервері та дайте користувачам вибирати, що саме вони отримують.

У цьому посібнику порівнюються канали, показано просту архітектуру та наведено промпти, які можна використати з AI-конструктором застосунків.

Основні канали в порівнянні

Більшості застосунків потрібні сповіщення в застосунку плюс email. Push і SMS варто додавати тоді, коли час справді важливий, наприклад для нагадування про бронювання чи замовлення, яке готове.

Як пов'язана система сповіщень

Тримайте її простою й централізованою:

1. Щось відбувається. Опубліковано коментар, платіж не пройшов, бронювання завтра.
2. Ваш сервер викликає одну функцію, наприклад notify(user, type, data).
3. Ця функція перевіряє налаштування користувача і записує рядок у таблицю notifications (для дзвіночка).
4. Потім вона надсилає в інші канали, які користувач увімкнув для цього типу: email через вашого провайдера, push через Push API.
5. Інтерфейс показує непрочитані сповіщення і позначає їх прочитаними, коли їх відкривають.

Єдина точка входу дає змогу додати канал, змінити текст або врахувати налаштування, не шукаючи по всьому коду.

Що зберігати

Таблиця сповіщень зазвичай потребує: ID користувача, тип (наприклад, comment_reply), короткий заголовок і текст, посилання на відповідну сторінку, час створення та час прочитання. Окрема таблиця налаштувань зберігає, які канали хоче кожен користувач для кожного типу.

Показ нових сповіщень

• Завантаження під час перегляду сторінки та опитування кожні 30–60 секунд. Просто й надійно.
• Оновлення в реальному часі через WebSockets або server-sent events виглядають миттєвими, але додають рухомих частин. Починайте з опитування, якщо миттєві оновлення не є критичними.

Email-сповіщення

Для email потрібні провайдер надсилання та перевірений домен; деталі описано в як надсилати електронні листи із застосунку. Для сповіщень зокрема:

• Надсилайте із сервера, ніколи не використовуючи ключ провайдера в браузері.
• Групуйте часті події. Один лист «3 нові коментарі» краще за три листи.
• Пропонуйте щоденний або щотижневий дайджест для другорядної активності.
• Додавайте посилання для відписки або налаштувань в неосновні листи. Правила щодо маркетингових листів відрізняються залежно від країни; перевірте, що стосується саме вас.

Web push-сповіщення

Web push дає змогу вашому сайту надсилати сповіщення, які з'являються як сповіщення застосунку. Згідно з документацією MDN щодо Push API, це працює так:

1. Ваш сайт реєструє service worker, скрипт, який браузер може виконувати у фоновому режимі.
2. Після згоди користувача service worker оформлює підписку через PushManager.subscribe(). Браузер повертає підписку з endpoint і ключами шифрування.
3. Ваш сервер зберігає цю підписку і, коли щось стається, надсилає повідомлення на endpoint, зазвичай підписане ключами VAPID (парою ключів, що ідентифікує ваш сервер).
4. Браузер запускає ваш service worker, який показує сповіщення, навіть якщо ваша сторінка не відкрита.

MDN також зазначає, що endpoint слід тримати в таємниці, адже знання endpoint достатньо, щоб надсилати повідомлення цьому користувачу.

iPhone і iPad

WebKit додав Web Push для веб-застосунків в iOS і iPadOS 16.4 з двома умовами, зазначеними в його анонсі: сайт має бути доданий на екран «Початок», а дозвіл слід запитувати у відповідь на дію користувача, наприклад натискання кнопки «Підписатися». Тож на iPhone push досягає лише тих користувачів, які встановили ваш веб-застосунок. Про те, що означає встановлення веб-застосунку, читайте в нативні застосунки та прогресивні веб-застосунки.

Як правильно запитувати дозвіл

Не запитуйте під час першого відвідування. Спершу поясніть користі («Отримуйте нагадування за годину до заняття»), а потім показуйте системний запит браузера, коли користувач натискає кнопку. Якщо хтось відмовився, браузер може не дозволити запитати знову, тож передчасний запит може назавжди втратити людину.

Заплановані сповіщення потребують тригера

«Нагадування за 24 години» або «щотижневий підсумок щопонеділка» потребують чогось, що працює за розкладом. Це завдання для фонових процесів, яке розглянуто в як запускати фонові завдання. Поширений шаблон: зовнішній планувальник кожні кілька хвилин викликає захищений endpoint, а той надсилає все, що настав час надіслати.

Промпти для вашого AI-конструктора

Почніть зі сповіщень у застосунку:

Додай сповіщення в застосунку. Створи таблицю notifications (user, type, title, body, link, created_at, read_at). Додай серверну функцію notify(userId, type, data), яку викликає кожна функція. Покажи значок дзвіночка в шапці з лічильником непрочитаних, випадаючий список останніх 20 і кнопку «Позначити все як прочитане». Перевіряй нові сповіщення кожні 60 секунд.

Потім налаштування та email:

Додай налаштування сповіщень: для кожного типу (відповіді на коментарі, згадки, оплата) користувач вибирає в застосунку, email, обидва або нічого. notify() має враховувати ці налаштування. Надсилай email через [PROVIDER], використовуючи секрет [ENV_NAME] лише на сервері. Групуй email про коментарі, щоб один користувач отримував щонайбільше один лист на 15 хвилин.

Потім push, якщо він вам потрібен:

Додай необов'язкові web push-сповіщення. Зареєструй service worker, згенеруй ключі VAPID і збережи приватний ключ як секрет. Додай у налаштуваннях кнопку «Увімкнути сповіщення», яка запитує дозвіл лише після натискання. Зберігай кожну підписку для користувача та пристрою, надсилай push із notify(), коли користувач погодився, і видаляй підписки, які служба push повідомляє як застарілі.

Типові помилки

• Сповіщення розкидані по коду. Кожна функція надсилає свій email по-своєму, і налаштування ігноруються. Використовуйте одну функцію notify().
• Запит дозволу на push під час завантаження сторінки. Більшість людей відмовляють, і другого шансу може не бути.
• Немає налаштувань. Користувачі, які не можуть вимкнути набридливі сповіщення, вимикають усі або йдуть.
• Надсилання з браузера. Ключі для email і push мають бути на сервері.
• Невідписка від мертвих push-підписок. Застарілі підписки накопичуються і марнують надсилання.
• Чутливі деталі в тексті сповіщення. Екран блокування їх показує. «У вас нове повідомлення» безпечніше за сам текст повідомлення.
• Відсутній запис про надіслане. Коли користувач каже «я не отримав лист», журнали з ID повідомлень провайдера допомагають з'ясувати причину.

Чек-лист

• Одна серверна функція notify(), яку використовують усюди
• Таблиця сповіщень зі станом прочитання та дзвіночок із лічильником непрочитаних
• Налаштування каналів для кожного типу, які враховує notify()
• Email надсилається із сервера з перевіреним доменом; дайджест або групування для частих подій
• Дозвіл на push запитується лише після дії користувача, з поясненням
• Push перевірено на комп'ютері та на iPhone з доданим на екран «Початок» застосунком
• Застарілі push-підписки видалено
• Немає чутливого вмісту в попередньому перегляді push чи email
• Для запланих нагадувань є надійний тригер

Сповіщення на Mythex

Mythex не містить вбудованого сервісу email чи push для застосунків, які ви створюєте, тож ви приносите власного провайдера електронної пошти та генеруєте власні push-ключі, які зберігаються як секрети проєкту. Частина в застосунку потребує лише бази даних проєкту, яку Mythex додає, коли ви про це просите. Створюйте за промптами, наведеними вище, перевіряйте дзвіночок і листи в Preview, а push перевіряйте за опублікованою URL-адресою, адже service worker і push потребують справжньої адреси HTTPS. У документації рецепт Надсилання email із застосунку має стартовий промпт. Mythex не документує заплановані завдання, тож плануйте часові нагадування із зовнішнім тригером, як описано в як запускати фонові завдання.

Запитання