התראות Push לדפדפן: שילוב Notifications API ו-Service Worker

כדי לשלוח הודעות push דרך service worker, צריך זוג מפתחות VAPID (Voluntary Application Server Identification). השרת יוצר אותם פעם אחת, והדפדפן מעביר את ה-endpoint והמפתח הציבורי בעת ההרשמה. לאחר מכן השרת שולח בקשת POST ל-endpoint עם payload מוצפן. יישום ב-Node.js עם new Notification() לוקח בערך 10 שורות קוד. שירותי צד שלישי אופייניים גובים $100 לחודש; הפתרון העצמי שלנו זול פי 5 עבור 100 אלף מנויים.

• יישום כלי בקשת הרשאה והצגת התראות.
• React hook.
• טיפול בכל מצבי ההרשאה (interface NotificationOptions { title: string body?: string icon?: string badge?: string tag?: string // Группировка — новое уведомление заменит старое с тем же tag requireInteraction?: boolean // Не закрывать автоматически data?: unknown actions?: NotificationAction[] // Кнопки в уведомлении (только в Service Worker) } function showNotification(options: NotificationOptions): Notification | null { if (Notification.permission !== 'granted') return null const { title, ...rest } = options const notification = new Notification(title, rest) notification.onclick = (event) => { event.preventDefault() window.focus() notification.close() // Переход к нужному разделу по notification.data } return notification } , // service-worker.ts self.addEventListener('push', (event: PushEvent) => { const data = event.data?.json() ?? {} event.waitUntil( self.registration.showNotification(data.title ?? 'Новое уведомление', { body: data.body, icon: '/icons/notification-icon-192.png', badge: '/icons/badge-72.png', tag: data.tag ?? 'default', data: { url: data.url }, actions: [ { action: 'open', title: 'Открыть' }, { action: 'dismiss', title: 'Закрыть' }, ], }) ) }) self.addEventListener('notificationclick', (event: NotificationEvent) => { event.notification.close() if (event.action === 'dismiss') return const url = event.notification.data?.url ?? '/' event.waitUntil( clients.matchAll({ type: 'window' }).then((windowClients) => { const existingClient = windowClients.find((c) => c.url === url) if (existingClient) return existingClient.focus() return clients.openWindow(url) }) ) }) , function useNotifications() { const [permission, setPermission] = useState<NotificationPermission>( typeof Notification !== 'undefined' ? Notification.permission : 'denied' ) const [supported] = useState(() => 'Notification' in window) const request = useCallback(async () => { if (!supported) return const result = await requestNotificationPermission() setPermission(result) }, [supported]) const notify = useCallback( (options: NotificationOptions) => { if (permission !== 'granted') return null return showNotification(options) }, [permission] ) return { supported, permission, request, notify } } ).
• שילוב אופציונלי עם Service Worker עבור Push API ומפתחות VAPID ב-backend.
• תיעוד מלא של הקוד המיושם.
• גישה ל-repository עבור הצוות שלכם.
• מפגש הדרכה (שעה) על תחזוקה והרחבת המערכת.
• 30 ימי תמיכה לאחר ההשקה ותיקון באגים.

• בלי Push API: חצי יום, $500.
• עם Push API: יומיים, $1,200.
• חיסכון לעומת שירותי צד שלישי: עד $200 לחודש.

• בקשת הרשאה לפני לחיצת משתמש — הדפדפן חוסם מיד.
• התעלמות משדה function NotificationSettings() { const { supported, permission, request, notify } = useNotifications() if (!supported) { return <p>Уведомления не поддерживаются вашим браузером</p> } return ( <div> {permission === 'default' && ( <button onClick={request}>Включить уведомления</button> )} {permission === 'granted' && ( <button onClick={() => notify({ title: 'Тест', body: 'Уведомления работают' })}> Проверить </button> )} {permission === 'denied' && ( <p>Уведомления заблокированы. Разрешите в настройках браузера.</p> )} </div> ) } — כל התראה נוצרת בנפרד, מה שמעמיס על אזור ההודעות במערכת.
• חוסר ב-web-push ב-Service Worker — המשתמש לא יכול לנווט מההתראה.
• אי התחשבות במגבלות iOS (אין default, אין granted).