Push-уведомления давно стали неотъемлемой частью веб-приложений. С помощью Web Push API можно отправлять уведомления даже когда пользователь не находится на сайте. Для реализации push-уведомлений нам понадобится:// 1. Проверяем поддержку и запрашиваем разрешение if ('serviceWorker' in navigator && 'PushManager' in window) { // Регистрируем Service Worker navigator.serviceWorker.register('/sw.js') .then(registration => { console.log('Service Worker зарегистрирован'); // Запрашиваем разрешение на отправку уведомлений return Notification.requestPermission(); }) .then(permission => { if (permission === 'granted') { console.log('Разрешение на уведомления получено'); subscribeUserToPush(); } }); } // 2. Подписываем пользователя на push-уведомления function subscribeUserToPush() { const applicationServerKey = urlBase64ToUint8Array( 'YOUR_PUBLIC_VAPID_KEY' ); navigator.serviceWorker.ready .then(registration => { return registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }); }) .then(subscription => { // Отправляем данные подписки на сервер return sendSubscriptionToServer(subscription); }); } Объясняю: Web Push API работает на основе Service Worker, который обрабатывает уведомления даже когда сайт закрыт. Для начала мы проверяем поддержку API, регистрируем Service Worker и запрашиваем разрешение у пользователя. После этого подписываем пользователя, используя VAPID-ключи для аутентификации. Преимущества: — Вовлечение пользователей: даже когда они не на сайте — Нативный вид: уведомления выглядят как системные — Широкая поддержка: большинство современных браузеров Важно помнить: — Требуется HTTPS для работы API — Необходимо получить явное разрешение пользователя — Нельзя злоупотреблять уведомлениями, чтобы не раздражать пользователей Используя Web Push API грамотно, вы сможете значительно повысить вовлеченность пользователей и создать более интерактивный пользовательский опыт, не выходя за рамки веб-платформы. Подписывайся на @frontendino