DEV Community

AYUSH SRIVASTAVA
AYUSH SRIVASTAVA

Posted on

Ship real‑time alerts without WebSocket's: Web Push for enterprise constraints 🔔

#api #architecture #javascript

Some organizations restrict persistent connections like WebSockets, yet teams still need timely notifications even when the app isn’t open or focused.
With Web Push—the Push API, a Service Worker, and VAPID—servers can push messages reliably without keeping a socket alive, including when the page is backgrounded or closed.

Why Web Push

  • Works in the background via a Service Worker and shows native notifications using the Notifications API for consistent, system‑level UX.
  • Standards‑based, requires HTTPS, and uses VAPID keys so your server is identified securely to push services.

How it fits together

  • App registers a Service Worker and requests notification permission from the user on a secure origin.
  • App subscribes with Push Manager to get a unique subscription endpoint and keys for that browser/device.
  • Server stores subscriptions and later sends payloads signed with VAPID using a lightweight library.
  • The Service Worker receives the push event and displays a native notification immediately.

Client: register SW and subscribe 

// Convert base64 VAPID public key to Uint8Array
function base64ToUint8Array(base64) {
  const padding = '='.repeat((4 - (base64.length % 4)) % 4);
  const b64 = (base64 + padding).replace(/-/g, '+').replace(/_/g, '/');
  const raw = atob(b64);
  const output = new Uint8Array(raw.length);
  for (let i = 0; i < raw.length; ++i) output[i] = raw.charCodeAt(i);
  return output;
}

async function subscribeToPush(vapidPublicKeyBase64) {
  const registration = await navigator.serviceWorker.register('/sw.js');
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') return;

  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: base64ToUint8Array(vapidPublicKeyBase64),
  });

  await fetch('/api/push/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription),
  });
}
Enter fullscreen mode Exit fullscreen mode

The app subscribes via the Push API on a secure context and sends the resulting subscription to the backend for later use.

Service Worker: receive and notify 


// /sw.js
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : { title: 'Update', body: 'New alert' };
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icon.png',
      data: data.url || '/',
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const url = event.notification.data || '/';
  event.waitUntil(clients.openWindow(url));
});
Enter fullscreen mode Exit fullscreen mode

The Service Worker handles the push event payload and displays a native notification using the Notifications API.

Server (Node/Express): VAPID and send 


// npm i express web-push
import express from 'express';
import webpush from 'web-push';

const app = express();
app.use(express.json());

// 1) Configure VAPID (generate once and set via env)
webpush.setVapidDetails(
  'mailto:admin@example.com',
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
);

// 2) Store subscriptions (replace with MongoDB in production)
const subscriptions = new Map();

app.get('/api/push/public-key', (_req, res) => {
  res.json({ publicKey: process.env.VAPID_PUBLIC_KEY });
});

app.post('/api/push/subscribe', (req, res) => {
  const sub = req.body;
  subscriptions.set(sub.endpoint, sub);
  res.status(201).json({ ok: true });
});

app.post('/api/push/send', async (req, res) => {
  const payload = JSON.stringify({
    title: 'Policy update',
    body: 'Click to review changes',
    url: '/inbox',
  });
  const results = [];
  for (const sub of subscriptions.values()) {
    try {
      await webpush.sendNotification(sub, payload);
      results.push({ ok: true });
    } catch {
      results.push({ ok: false });
    }
  }
  res.json({ sent: results.length });
});

app.listen(3000, () => console.log('Server running on 3000'));
Enter fullscreen mode Exit fullscreen mode

The web‑push library signs payloads with VAPID and delivers to each saved subscription endpoint, letting servers send messages without maintaining a persistent connection.

Practical tips

  • Only request permission at meaningful moments to avoid prompt fatigue and improve opt‑in rates.
  • Subscriptions can expire; handle send failures by pruning invalid endpoints and re‑subscribing when needed.
  • Push requires HTTPS and secure contexts; keep VAPID keys safe and reuse the same key pair across deploys per environment policy

If WebSocket's are off the table, Web Push gives reliable, secure, background delivery with a small footprint—perfect for “must‑know” alerts in constrained environments.

Top comments (0)