┌──────────────┐     ┌──────────────────┐     ┌──────────────┐
│  Your Server  │ ──► │  Push Service     │ ──► │  Browser +   │
│  (backend)    │     │  (vendor-operated)│     │  Service Worker│
└──────────────┘     └──────────────────┘     └──────────────┘
      │                     │                        │
  Web Push Protocol     Vendor endpoint          push event
  (RFC 8030)            (FCM, Mozilla, etc.)     in SW

// Request permission
const permission = await Notification.requestPermission();
// Returns: 'granted', 'denied', or 'default'

if (permission === 'granted') {
  new Notification('Hello!', {
    body: 'This is a local notification',
    icon: '/icons/icon-192.png',
    badge: '/icons/badge-72.png',
  });
}

self.addEventListener('push', (event) => {
  const data = event.data?.json() ?? {};

  event.waitUntil(
    self.registration.showNotification(data.title || 'New Update', {
      body: data.body || 'You have a new notification',
      icon: '/icons/icon-192.png',
      badge: '/icons/badge-72.png',
      tag: data.tag || 'default',
      data: { url: data.url || '/' },
      actions: [
        { action: 'open', title: 'Open' },
        { action: 'dismiss', title: 'Dismiss' },
      ],
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();

  if (event.action === 'dismiss') return;

  const targetUrl = event.notification.data?.url || '/';

  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((windowClients) => {
      // Focus an existing tab if one is open
      for (const client of windowClients) {
        if (client.url === targetUrl && 'focus' in client) {
          return client.focus();
        }
      }
      // Otherwise open a new tab
      return clients.openWindow(targetUrl);
    })
  );
});

npx web-push generate-vapid-keys

Public Key:  BNbxGYNMhEIi3hYH0kfJft1_6Gzlhm...
Private Key: 3KzvKMdXaFGkYLaPQMrwBP5pnGkD3R...

async function subscribeToPush() {
  const registration = await navigator.serviceWorker.ready;

  // Check existing subscription
  let subscription = await registration.pushManager.getSubscription();
  if (subscription) return subscription;

  // Convert VAPID public key from base64 to Uint8Array
  const vapidPublicKey = 'BNbxGYNMhEIi3hYH0kfJft1_6Gzlhm...';
  const convertedKey = urlBase64ToUint8Array(vapidPublicKey);

  subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true, // Required: promise to show a notification for every push
    applicationServerKey: convertedKey,
  });

  // Send subscription to your backend
  await fetch('/api/push/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription),
  });

  return subscription;
}

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const raw = atob(base64);
  return Uint8Array.from([...raw].map((char) => char.charCodeAt(0)));
}

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/fD1Jc...",
  "expirationTime": null,
  "keys": {
    "p256dh": "BLQELIDm-6b2Iwh...",
    "auth": "4vQK-SvR..."
  }
}

async function unsubscribe() {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.getSubscription();

  if (subscription) {
    await subscription.unsubscribe();
    // Notify your backend to remove the subscription
    await fetch('/api/push/unsubscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ endpoint: subscription.endpoint }),
    });
  }
}

npm install web-push

import webPush from 'web-push';

webPush.setVapidDetails(
  'mailto:admin@example.com',
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
);

async function sendPushNotification(subscription, payload) {
  try {
    await webPush.sendNotification(
      subscription,
      JSON.stringify(payload),
      { TTL: 60 * 60 } // Time-to-live in seconds
    );
    console.log('Push sent successfully');
  } catch (error) {
    if (error.statusCode === 410 || error.statusCode === 404) {
      // Subscription expired or invalid — remove from database
      await removeSubscription(subscription.endpoint);
    } else {
      console.error('Push failed:', error);
    }
  }
}

// Usage
await sendPushNotification(userSubscription, {
  title: 'New Message',
  body: 'You have a new message from Alice',
  url: '/messages/123',
  tag: 'message-123',
});

function showPermissionDialog() {
  const dialog = document.getElementById('push-dialog');
  dialog.innerHTML = `
    <h3>Stay Updated</h3>
    <p>Get notified when your order ships or when items go on sale.</p>
    <button id="push-accept">Enable Notifications</button>
    <button id="push-decline">Not Now</button>
  `;
  dialog.hidden = false;

  document.getElementById('push-accept').addEventListener('click', async () => {
    dialog.hidden = true;
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      await subscribeToPush();
    }
  });

  document.getElementById('push-decline').addEventListener('click', () => {
    dialog.hidden = true;
    localStorage.setItem('push-declined', Date.now().toString());
  });
}

// Only show after meaningful engagement
function maybePromptForPush() {
  if (Notification.permission !== 'default') return; // Already decided
  const declined = localStorage.getItem('push-declined');
  if (declined && Date.now() - parseInt(declined) < 30 * 24 * 60 * 60 * 1000) return; // Wait 30 days

  showPermissionDialog();
}