PWA Push Notifications

Subscribe

const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY),
});
await fetch('/api/push/subscribe', { method: 'POST', body: JSON.stringify(sub) });

Service Worker Handler

self.addEventListener('push', (e) => {
    const data = e.data?.json() ?? { title: 'Update', body: 'New content' };
    e.waitUntil(self.registration.showNotification(data.title, {
        body: data.body, icon: '/icon-192.png', data: { url: data.url || '/' },
    }));
});
self.addEventListener('notificationclick', (e) => {
    e.notification.close();
    e.waitUntil(clients.openWindow(e.notification.data.url));
});

Server (web-push)

import webpush from 'web-push';
webpush.setVapidDetails('mailto:admin@app.com', PUBLIC_KEY, PRIVATE_KEY);
await webpush.sendNotification(subscription, JSON.stringify(payload));