← Back to DevBytes
Web July 12, 2026 18 min read

Implementing Web Push Notifications in Modern Web Applications

Introduction to Web Push Notifications

Web Push Notifications allow web applications to send messages to users even when the browser is closed or the user is not actively visiting the site. Unlike in-app notifications that require the application to be open, push notifications are delivered via a persistent service worker that listens for incoming messages from a push server. This technology bridges the gap between native mobile app notifications and web-based experiences, enabling re-engagement, timely alerts, and real-time communication directly through the browser.

What Are Web Push Notifications?

At their core, web push notifications consist of three cooperating components:

The flow works like this: the user visits your web application, you request permission to send notifications, the browser creates a subscription through its push service (each browser has its own, such as Mozilla's autopush for Firefox or Google's FCM for Chrome), and you send the subscription details to your server. Later, when you want to notify the user, your server sends a payload to the push endpoint, the browser wakes the service worker, and the service worker displays the notification.

Why Web Push Notifications Matter

Web push notifications provide several critical benefits for modern web applications:

Prerequisites and Browser Support

Web push notifications require HTTPS (or localhost for development), a modern browser that supports the Push API and service workers, and a server capable of sending HTTP requests to the push endpoint. As of 2024, all major browsers support web push: Chrome, Firefox, Edge, and Safari (with some nuances on iOS). You'll also need VAPID keys (Voluntary Application Server Identification) to authenticate your push server with the browser's push service, which prevents abuse and identifies your application.

Setting Up the Service Worker

🚀 Deploy your AI agent in 10 minutes

Managed Hermes hosting. Zero DevOps. 100M tokens/mo included.

Try it free →

Before anything else, your web application needs a registered service worker. This is the background script that handles push events. Create a file called service-worker.js in the root of your web application (the scope of the service worker is determined by its file location).

// service-worker.js

// Listen for incoming push events
self.addEventListener('push', function(event) {
  if (event.data) {
    // Parse the JSON payload sent from the server
    const data = event.data.json();
    const options = {
      body: data.body,
      icon: '/images/notification-icon.png',
      badge: '/images/badge-icon.png',
      data: {
        url: data.url || '/'  // URL to open when notification is clicked
      },
      vibrate: [200, 100, 200],
      actions: [
        {
          action: 'open',
          title: 'View Details'
        },
        {
          action: 'dismiss',
          title: 'Dismiss'
        }
      ]
    };

    // Keep the service worker alive until notification is shown
    event.waitUntil(
      self.registration.showNotification(data.title, options)
    );
  } else {
    // Fallback for empty push messages
    event.waitUntil(
      self.registration.showNotification('New Update', {
        body: 'Something new is available!',
        icon: '/images/notification-icon.png'
      })
    );
  }
});

// Handle notification click events
self.addEventListener('notificationclick', function(event) {
  event.notification.close();

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

  // Default behavior: open the URL specified in notification data
  const urlToOpen = event.notification.data.url || '/';

  event.waitUntil(
    clients.matchAll({
      type: 'window',
      includeUncontrolled: true
    }).then(function(clientList) {
      // If a window is already open, focus it
      for (const client of clientList) {
        if (client.url === urlToOpen && 'focus' in client) {
          return client.focus();
        }
      }
      // Otherwise open a new window
      if (clients.openWindow) {
        return clients.openWindow(urlToOpen);
      }
    })
  );
});

// Optional: handle notification close
self.addEventListener('notificationclose', function(event) {
  // You could track analytics here
  console.log('Notification closed:', event.notification.tag);
});

This service worker does three critical things: it listens for push events and shows notifications, handles clicks on those notifications to focus or open a window, and uses event.waitUntil() to ensure the service worker stays alive long enough to complete asynchronous operations.

Registering the Service Worker and Requesting Permission

On the client side, you need to register the service worker and then request notification permission. Here's the complete client-side JavaScript code:

// client.js - Main application script

// Check if the browser supports service workers and push messaging
if ('serviceWorker' in navigator && 'PushManager' in window) {
  registerServiceWorker();
} else {
  console.warn('Push notifications are not supported in this browser.');
}

async function registerServiceWorker() {
  try {
    // Register the service worker
    const registration = await navigator.serviceWorker.register('/service-worker.js');
    console.log('Service Worker registered:', registration);

    // Wait for the service worker to be ready
    await navigator.serviceWorker.ready;

    // Now request notification permission
    await requestNotificationPermission(registration);
  } catch (error) {
    console.error('Service Worker registration failed:', error);
  }
}

async function requestNotificationPermission(registration) {
  // Request permission from the user
  const permission = await Notification.requestPermission();

  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Get the push subscription
    await subscribeToPush(registration);
  } else if (permission === 'denied') {
    console.warn('User denied notification permission.');
    // Update UI to reflect that notifications are blocked
    updateNotificationUI('denied');
  } else {
    // permission === 'default' — user dismissed the prompt
    console.log('Notification permission dismissed.');
    updateNotificationUI('dismissed');
  }
}

async function subscribeToPush(registration) {
  // Retrieve the public VAPID key from your server
  const publicVapidKey = await fetchPublicVapidKey();

  if (!publicVapidKey) {
    console.error('Failed to retrieve VAPID public key.');
    return;
  }

  // Convert the base64 public key to Uint8Array
  const applicationServerKey = urlBase64ToUint8Array(publicVapidKey);

  try {
    // Subscribe the user to push notifications
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: applicationServerKey
    });

    console.log('Push subscription obtained:', subscription);

    // Send the subscription object to your server
    await sendSubscriptionToServer(subscription);

    // Update UI to show subscription status
    updateSubscriptionUI(true);
  } catch (error) {
    console.error('Push subscription failed:', error);
    updateSubscriptionUI(false);
  }
}

// Helper: fetch VAPID public key from your server
async function fetchPublicVapidKey() {
  try {
    const response = await fetch('/api/vapid-public-key');
    if (response.ok) {
      const data = await response.json();
      return data.publicKey;
    }
  } catch (error) {
    console.error('Error fetching VAPID key:', error);
  }
  return null;
}

// Helper: convert base64 string to Uint8Array for pushManager
function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

// Helper: send subscription to your backend
async function sendSubscriptionToServer(subscription) {
  try {
    const response = await fetch('/api/subscribe', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        subscription: subscription,
        // Optional: include user identifier or device info
        userAgent: navigator.userAgent,
        timestamp: Date.now()
      })
    });

    if (response.ok) {
      console.log('Subscription saved on server.');
    } else {
      console.error('Server rejected subscription:', response.status);
    }
  } catch (error) {
    console.error('Failed to send subscription to server:', error);
  }
}

// UI helper functions (implement based on your UI framework)
function updateNotificationUI(state) {
  const btn = document.getElementById('notification-btn');
  if (btn) {
    if (state === 'granted') {
      btn.textContent = 'Notifications Enabled';
      btn.classList.add('active');
    } else if (state === 'denied') {
      btn.textContent = 'Notifications Blocked';
      btn.classList.add('blocked');
    }
  }
}

function updateSubscriptionUI(subscribed) {
  const status = document.getElementById('subscription-status');
  if (status) {
    status.textContent = subscribed ? 'Subscribed to push' : 'Not subscribed';
  }
}

The userVisibleOnly: true option is mandatory — browsers require that every push notification shows something visible to the user, preventing silent tracking. The applicationServerKey is your VAPID public key, which identifies your server to the push service.

Generating VAPID Keys

VAPID keys are essential for web push security. You generate them once and store them securely. Here's how to generate them using Node.js and the web-push library:

// generate-vapid-keys.js
const webpush = require('web-push');

// Generate VAPID keys (run this once and save the output securely)
const vapidKeys = webpush.generateVAPIDKeys();

console.log('Public Key:', vapidKeys.publicKey);
console.log('Private Key:', vapidKeys.privateKey);

// Example output:
// Public Key: BCl6VN7k0TQ4xQG4B7e9J8vL2... (save this, it's used client-side)
// Private Key: MIGfMA0GCSqGSIb3... (save this securely on your server, NEVER expose to client)

Store the private key in environment variables or a secure secrets manager. Never expose it in client-side code. The public key, however, is meant to be shared with the browser.

Server-Side Implementation with Node.js

Your server needs two endpoints: one to provide the public VAPID key to the client, and another to accept and store push subscriptions. It also needs the ability to send push notifications. Here's a complete Node.js + Express implementation:

// server.js - Node.js + Express backend for web push

const express = require('express');
const webpush = require('web-push');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'public')));

// --- VAPID Configuration ---
// Store these in environment variables in production!
const VAPID_SUBJECT = 'mailto:your-email@example.com'; // Contact for push service
const VAPID_PUBLIC_KEY = process.env.VAPID_PUBLIC_KEY || 'YOUR_PUBLIC_KEY_HERE';
const VAPID_PRIVATE_KEY = process.env.VAPID_PRIVATE_KEY || 'YOUR_PRIVATE_KEY_HERE';

webpush.setVapidDetails(
  VAPID_SUBJECT,
  VAPID_PUBLIC_KEY,
  VAPID_PRIVATE_KEY
);

// --- In-memory subscription store (use a database in production) ---
const subscriptions = new Map(); // Map of user/device identifiers to subscription objects

// --- Routes ---

// Endpoint: Provide VAPID public key to clients
app.get('/api/vapid-public-key', (req, res) => {
  res.json({
    publicKey: VAPID_PUBLIC_KEY
  });
});

// Endpoint: Save push subscription from client
app.post('/api/subscribe', (req, res) => {
  const { subscription, userAgent, timestamp } = req.body;

  if (!subscription || !subscription.endpoint) {
    return res.status(400).json({ error: 'Invalid subscription object' });
  }

  // Generate a unique ID for this subscription (use user ID in production)
  const subscriptionId = generateSubscriptionId(subscription);

  subscriptions.set(subscriptionId, {
    subscription,
    userAgent,
    createdAt: timestamp || Date.now()
  });

  console.log(`New subscription added: ${subscriptionId}`);
  console.log(`Total subscriptions: ${subscriptions.size}`);

  res.status(201).json({
    message: 'Subscription saved successfully',
    subscriptionId
  });
});

// Endpoint: Trigger push notifications (admin/automated)
app.post('/api/send-notification', async (req, res) => {
  const { title, body, url, targetUsers } = req.body;

  if (!title || !body) {
    return res.status(400).json({ error: 'Title and body are required' });
  }

  const payload = JSON.stringify({
    title,
    body,
    url: url || '/',
    timestamp: Date.now()
  });

  let sentCount = 0;
  let failedCount = 0;

  // Send to all subscriptions (or filter by targetUsers)
  for (const [id, entry] of subscriptions) {
    try {
      await webpush.sendNotification(
        entry.subscription,
        payload,
        {
          TTL: 86400, // Time-to-live: 24 hours in seconds
          urgency: 'normal' // 'very-low', 'low', 'normal', or 'high'
        }
      );
      sentCount++;
      console.log(`Notification sent to: ${id}`);
    } catch (error) {
      failedCount++;
      console.error(`Failed to send to ${id}:`, error.statusCode, error.body);

      // Remove invalid subscriptions (410 Gone, 404 Not Found)
      if (error.statusCode === 410 || error.statusCode === 404) {
        subscriptions.delete(id);
        console.log(`Removed expired subscription: ${id}`);
      }
    }
  }

  res.json({
    message: 'Notification push completed',
    totalSubscriptions: subscriptions.size,
    sent: sentCount,
    failed: failedCount
  });
});

// Endpoint: List all subscriptions (for debugging/admin)
app.get('/api/subscriptions', (req, res) => {
  const list = Array.from(subscriptions.entries()).map(([id, entry]) => ({
    id,
    endpoint: entry.subscription.endpoint,
    createdAt: entry.createdAt
  }));
  res.json(list);
});

// Helper: generate a unique subscription ID
function generateSubscriptionId(subscription) {
  const hash = subscription.endpoint.split('/').pop();
  return `sub_${hash.substring(0, 16)}`;
}

// Start server
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
  console.log(`VAPID public key: ${VAPID_PUBLIC_KEY.substring(0, 20)}...`);
});

This server stores subscriptions in memory — for production, you would use a database like PostgreSQL, MongoDB, or Redis to persist subscriptions across server restarts. The send-notification endpoint iterates through all subscriptions and sends the payload. It also handles expired subscriptions by removing them when the push service returns a 410 Gone or 404 status.

Sending Notifications Programmatically

Beyond the REST endpoint, you might want to send notifications from background jobs, cron tasks, or event-driven systems. Here's a standalone function you can use anywhere in your backend:

// notification-sender.js
const webpush = require('web-push');

// Configure VAPID once during application startup
webpush.setVapidDetails(
  'mailto:contact@yourapp.com',
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
);

/**
 * Send a push notification to a single subscription
 * @param {Object} subscription - The push subscription object
 * @param {Object} notificationData - { title, body, url, icon, badge, tag }
 * @param {Object} options - { TTL, urgency }
 */
async function sendPushNotification(subscription, notificationData, options = {}) {
  const payload = JSON.stringify({
    title: notificationData.title || 'Update',
    body: notificationData.body || '',
    url: notificationData.url || '/',
    icon: notificationData.icon || '/images/notification-icon.png',
    badge: notificationData.badge || '/images/badge-icon.png',
    tag: notificationData.tag || 'default', // Tag groups notifications and replaces old ones
    timestamp: Date.now()
  });

  try {
    const result = await webpush.sendNotification(
      subscription,
      payload,
      {
        TTL: options.TTL || 86400, // 24 hours default
        urgency: options.urgency || 'normal',
        topic: notificationData.tag || 'general'
      }
    );

    console.log('Push notification sent successfully:', result);
    return { success: true, result };
  } catch (error) {
    console.error('Push notification failed:', {
      statusCode: error.statusCode,
      endpoint: subscription.endpoint,
      message: error.message
    });

    // Return detailed error for handling
    return {
      success: false,
      statusCode: error.statusCode,
      message: error.message
    };
  }
}

// Example usage
async function notifyUserAboutNewMessage(userSubscription, message) {
  await sendPushNotification(userSubscription, {
    title: `New message from ${message.sender}`,
    body: message.preview,
    url: `/messages/${message.conversationId}`,
    tag: `conversation-${message.conversationId}` // Replaces previous notifications for same conversation
  });
}

module.exports = { sendPushNotification };

Handling Notification Click Events in the Service Worker

When a user clicks a notification, you have several options for how to respond. The service worker can open a specific URL, focus an existing window, or perform API calls in the background. Here's an enhanced version of the click handler:

// Inside service-worker.js - Enhanced notification click handler

self.addEventListener('notificationclick', function(event) {
  const notification = event.notification;
  const action = event.action;

  // Close the notification immediately
  notification.close();

  // Handle custom action buttons
  if (action === 'archive') {
    // Perform background API call to archive something
    event.waitUntil(
      fetch('/api/archive-from-notification', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          itemId: notification.data.itemId,
          action: 'archive'
        })
      }).catch(err => console.error('Archive API call failed:', err))
    );
    return;
  }

  if (action === 'reply') {
    // Open a reply interface
    const replyUrl = notification.data.replyUrl || '/';
    event.waitUntil(
      clients.openWindow(replyUrl)
    );
    return;
  }

  // Default behavior: navigate to the notification's target URL
  const targetUrl = notification.data.url || '/';

  event.waitUntil(
    clients.matchAll({
      type: 'window',
      includeUncontrolled: true
    }).then(function(clientList) {
      // Look for an existing window to focus
      for (const client of clientList) {
        if (client.url === targetUrl && 'focus' in client) {
          return client.focus();
        }
      }
      // No matching window, open a new one
      if (clients.openWindow) {
        return clients.openWindow(targetUrl);
      }
    }).catch(function(error) {
      // Fallback: open a new window directly
      console.error('Error matching clients:', error);
      return clients.openWindow(targetUrl);
    })
  );
});

Best Practices for Web Push Notifications

1. Request Permission at the Right Time

Never ask for notification permission immediately when a user lands on your page. Instead, wait for a relevant moment — after they complete a meaningful action, or when they explicitly click a "Enable Notifications" button. Contextual permission requests have dramatically higher acceptance rates. Many browsers also penalize sites that show permission prompts without user interaction by automatically denying them or showing a quieter prompt.

// Good approach: Show a button that triggers permission request
document.getElementById('enable-notifications-btn').addEventListener('click', async () => {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') {
    // Proceed with subscription
    subscribeToPush(registration);
  }
});

// Bad approach: Request permission on page load without context
// Notification.requestPermission(); // Don't do this!

2. Use Tags to Group and Replace Notifications

When you send multiple notifications about the same topic (like messages in a conversation), use the same tag field. The browser will replace older notifications with the new one, keeping the notification tray clean and relevant.

3. Set Appropriate TTL Values

The TTL (Time To Live) parameter in seconds tells the push service how long to keep trying to deliver a notification if the user is offline. For time-sensitive alerts like chat messages, use a shorter TTL (e.g., 300 seconds). For less urgent content like weekly digests, a longer TTL (e.g., 86400 seconds or more) is appropriate.

4. Handle Subscription Expiry Gracefully

Push subscriptions can become invalid for many reasons: the user clears browser data, uninstalls the browser, or revokes permission. Your server must handle delivery failures gracefully and clean up stale subscriptions:

// When sending notifications, catch and clean up expired subscriptions
try {
  await webpush.sendNotification(subscription, payload);
} catch (error) {
  if (error.statusCode === 410 || error.statusCode === 404) {
    // Subscription is gone — remove from database
    await db.removeSubscription(subscription.endpoint);
  } else if (error.statusCode >= 500) {
    // Temporary server error — retry later
    await scheduleRetry(subscription, payload);
  }
}

5. Keep Notification Content Concise and Actionable

The notification title should be short and descriptive. The body should provide enough context for the user to decide whether to click. Always include a relevant deep link so the user lands on the exact page related to the notification, not just the homepage.

6. Respect User Preferences and Provide Controls

Allow users to customize which types of notifications they receive. Implement a notification preferences page where users can toggle categories (e.g., "Messages," "Promotions," "System Alerts"). Store these preferences server-side and filter notifications before sending.

7. Monitor and Test Across Browsers

Each browser uses a different push service. Chrome uses Firebase Cloud Messaging (FCM), Firefox uses Mozilla's autopush, and Safari uses Apple's push service. Test your implementation across all target browsers. Pay special attention to Safari on iOS, which has specific requirements for web push support (the site must be added to the home screen as a PWA).

8. Secure Your VAPID Keys

Never commit VAPID private keys to version control. Store them in environment variables or a secure secrets management system. If your private key is compromised, regenerate the keys and update all subscriptions, as the old subscriptions will be invalidated by the push service.

Testing and Debugging Web Push

Debugging web push can be tricky because it involves multiple components. Here are some practical tips:

// Example cURL command to test a push endpoint manually
// curl -X POST "https://fcm.googleapis.com/fcm/send/..." \
//   -H "Content-Type: application/json" \
//   -H "Authorization: Bearer YOUR_SERVER_KEY" \
//   -d '{"to":"SUBSCRIPTION_ENDPOINT_TOKEN","notification":{"title":"Test","body":"Manual test"}}'
//
// Note: This only works with FCM-style endpoints; for VAPID-based push,
// use the web-push library or construct the proper signed request.

Complete HTML Page Example

Here's a minimal but complete HTML page that ties everything together on the frontend:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Push Demo</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 600px; margin: 2rem auto; padding: 0 1rem; }
    .status-box { background: #f0f0f0; padding: 1rem; border-radius: 8px; margin: 1rem 0; }
    button { padding: 0.75rem 1.5rem; font-size: 1rem; cursor: pointer; border: none; border-radius: 6px; }
    .btn-enable { background: #0066cc; color: white; }
    .btn-disable { background: #cc3333; color: white; }
    .btn-send { background: #2e7d32; color: white; }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
  </style>
</head>
<body>
  <h1>Web Push Notifications Demo</h1>

  <div class="status-box">
    <p>Push Status: <span id="push-status">Checking...</span></p>
    <p>Subscription: <span id="subscription-status">None</span></p>
  </div>

  <button id="enable-btn" class="btn-enable" onclick="enableNotifications()">
    Enable Notifications
  </button>

  <button id="test-notification-btn" class="btn-send" onclick="requestTestNotification()" disabled>
    Send Test Notification
  </button>

  <script>
    let pushRegistration = null;
    let currentSubscription = null;

    // Check support on page load
    window.addEventListener('load', () => {
      if ('serviceWorker' in navigator && 'PushManager' in window) {
        document.getElementById('push-status').textContent = 'Supported';
        navigator.serviceWorker.register('/service-worker.js')
          .then(reg => {
            pushRegistration = reg;
            console.log('Service Worker registered');
            checkExistingSubscription();
          })
          .catch(err => console.error('SW registration failed:', err));
      } else {
        document.getElementById('push-status').textContent = 'Not Supported';
      }
    });

    async function checkExistingSubscription() {
      if (!pushRegistration) return;
      const subscription = await pushRegistration.pushManager.getSubscription();
      if (subscription) {
        currentSubscription = subscription;
        document.getElementById('subscription-status').textContent = 'Active';
        document.getElementById('enable-btn').disabled = true;
        document.getElementById('test-notification-btn').disabled = false;
      }
    }

    async function enableNotifications() {
      const permission = await Notification.requestPermission();
      if (permission !== 'granted') {
        alert('Permission denied. Please enable notifications in browser settings.');
        return;
      }

      const publicKeyResponse = await fetch('/api/vapid-public-key');
      const { publicKey } = await publicKeyResponse.json();

      const applicationServerKey = urlBase64ToUint8Array(publicKey);

      try {
        const subscription = await pushRegistration.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey
        });

        await fetch('/api/subscribe', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ subscription, timestamp: Date.now() })
        });

        currentSubscription = subscription;
        document.getElementById('subscription-status').textContent = 'Active';
        document.getElementById('enable-btn').disabled = true;
        document.getElementById('test-notification-btn').disabled = false;
        document.getElementById('push-status').textContent = 'Enabled';
      } catch (error) {
        console.error('Subscription error:', error);
        alert('Failed to subscribe to push notifications.');
      }
    }

    async function requestTestNotification() {
      const response = await fetch('/api/send-notification', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          title: 'Test Notification',
          body: 'This is a test push notification from your app!',
          url: '/'
        })
      });
      const result = await response.json();
      alert(`Notification request sent! ${result.sent} delivered, ${result.failed} failed.`);
    }

    function urlBase64ToUint8Array(base64String) {
      const padding = '='.repeat((4 - base64String.length % 4) % 4);
      const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
      const rawData = window.atob(base64);
      const outputArray = new Uint8Array(rawData.length);
      for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
      }
      return outputArray;
    }
  </script>
</body>
</html>

Conclusion

Web push notifications represent one of the most powerful engagement tools available to modern web applications. By combining service workers, the Push API, and a properly configured server, you can deliver timely, relevant notifications that rival native mobile experiences — all from within the browser. The implementation requires careful orchestration across client-side permission requests, service worker event handling, VAPID key management, and server-side push delivery with proper error handling. When implemented thoughtfully — with contextual permission requests, concise messaging, user preference controls, and robust subscription lifecycle management — web push notifications become a valuable channel that keeps users connected to your application without being intrusive. Start with the patterns shown in this tutorial, adapt them to your specific stack and use cases, and you'll have a solid foundation for real-time user engagement on the web.

🚀 Need a reliable AI agent for your project?

Deploy Hermes Agent in 10 minutes. Managed hosting, zero DevOps.

Get Started — $23.99/mo
← Back to all articles