Frontend & Design

Web Push Notifications

Implement browser push notifications to re-engage users with timely updates even when your site is not open.

Claude Code Cursor Copilot Windsurf

Overview

The Web Push API enables your web application to send notifications to users even when the browser is closed. AI agents can implement the complete push notification flow: requesting permission, subscribing to push, storing subscriptions server-side, and sending notifications via the Web Push protocol.

The implementation requires both client-side code (service worker registration, push subscription) and server-side code (storing subscriptions, sending push messages using VAPID keys). Your AI agent can generate the complete stack: the service worker that handles push events, the client-side subscription flow with proper permission UX, and the server-side endpoint using libraries like `web-push`.

AI agents can also help you implement notification best practices: asking for permission at the right moment (not on page load), providing clear value propositions, implementing notification preferences, handling subscription expiration, and creating rich notifications with actions, images, and badges.

Who Is This For?

SaaS teams implementing real-time user notifications
E-commerce developers sending order status and price alerts
Content platforms notifying users about new publications
Teams building collaborative apps with activity notifications

Installation

Setup for Claude Code

npm install web-push
# Generate VAPID keys: npx web-push generate-vapid-keys

Configuration

// Server-side push
import webpush from "web-push";

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

await webpush.sendNotification(subscription, JSON.stringify({
  title: "New Message",
  body: "You have a new notification",
  icon: "/icon-192.png",
}));