Setup Push Notifications

Mohamed Nakhlawy Jul 12, 2025 (2) Comments 181 views

Setup Push Notifications

What You'll Learn: Complete push notification implementation including browser APIs, server setup, subscription management, notification design, testing strategies, and advanced features like action buttons and rich media.

Push notifications are one of the most powerful tools for re-engaging users and driving conversions in modern web applications. With proper implementation, they can increase user retention by up to 88% and boost click-through rates significantly compared to traditional email marketing.

This comprehensive guide covers everything from basic browser notification APIs to advanced server-side integration, subscription management, and notification optimization strategies. Whether you're building a simple blog or a complex web application, you'll learn to implement push notifications that users actually want to receive.

Understanding Web Push Notifications

Web push notifications are messages sent from a server to a user's device through the browser, even when the website isn't actively open. They work through service workers and the Push API to deliver timely, relevant information.

Browser-Based

Works across all modern browsers without requiring app installation or app store approval.

Real-time

Instant delivery to users' devices as soon as they're sent from your server.

Permission-Based

Users explicitly opt-in, ensuring notifications reach engaged audiences.

Push Notification Architecture

Client-Side Components

Permission Request Interface
Service Worker Registration
Subscription Management
Notification Event Handlers

Server-Side Components

VAPID Key Generation
Subscription Storage
Push Service Integration
Notification Sending Logic

Important: Push notifications require HTTPS for security. Service workers and the Push API only work on secure origins.

Browser Support & Compatibility

Browser	Desktop Support	Mobile Support	Key Limitations
Chrome	Full Support	Full Support	None
Firefox	Full Support	Full Support	None
Safari	Limited	No Support	macOS only, iOS unsupported
Edge	Full Support	Full Support	None
Opera	Full Support	Full Support	None

Market Coverage: Push notifications work for approximately 85% of global web users. Always implement feature detection and graceful fallbacks.

Step-by-Step Implementation Guide

Check Browser Support

Detect if the browser supports push notifications and service workers.

Request Permission

Ask user for notification permission with proper UX timing.

Register Service Worker

Set up service worker to handle push events and notifications.

Generate VAPID Keys

Create application server keys for secure communication.

Subscribe User

Create push subscription and send to your server.

Send Notifications

Implement server-side logic to send push notifications.

Frontend Implementation

Feature Detection & Permission Request

First, check if the browser supports push notifications and request permission from the user:

// Check for browser support
functionisPushSupported() {
  return'serviceWorker'innavigator &&
         'PushManager'inwindow &&
         'Notification'inwindow;
}

// Request notification permission
async functionrequestNotificationPermission() {
  if(!isPushSupported()) {
    console.warn('Push notifications not supported');
    return'unsupported';
  }

  // Check current permission status
  if(Notification.permission ==='granted') {
    return'granted';
  }

  // Request permission if not already decided
  if(Notification.permission ==='default') {
    constpermission =awaitNotification.requestPermission();
    returnpermission;
  }

  returnNotification.permission;
}

Service Worker Registration

// Register service worker
async functionregisterServiceWorker() {
  try{
    constregistration =awaitnavigator.serviceWorker
      .register('/sw.js');

    console.log('Service Worker registered:', registration);
    returnregistration;
  }catch(error) {
    console.error('Service Worker registration failed:', error);
    throwerror;
  }
}

// Service Worker file (sw.js)
self.addEventListener('push',function(event) {
  constoptions = {
    body: event.data ? event.data.text() :'Default message',
    icon:'/icon-192x192.png',
    badge:'/badge-72x72.png',
    vibrate: [100, 50, 100],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: 1
    }
  };

  event.waitUntil(
    self.registration.showNotification('Push Notification', options)
  );
});

User Subscription Management

Create and manage push subscriptions for users:

// VAPID public key (get from your server)
constvapidPublicKey ='your-vapid-public-key-here';

// Convert VAPID key to Uint8Array
functionurlBase64ToUint8Array(base64String) {
  constpadding ='='.repeat((4 - base64String.length % 4) % 4);
  constbase64 = (base64String + padding)
    .replace(/\-/g,'+')
    .replace(/_/g,'/');

  constrawData = window.atob(base64);
  constoutputArray =newUint8Array(rawData.length);

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

Advanced Notification Features

Action Buttons

Add interactive buttons to notifications for direct user actions.

// Notification with actions
constoptions = {
  body:'You have a new message',
  actions: [
    {
      action:'reply',
      title:'Reply',
      icon:'/reply-icon.png'
    },
    {
      action:'view',
      title:'View'
    }
  ]
};

Rich Media

Include images, custom icons, and visual elements in notifications.

// Rich notification
constoptions = {
  body:'Check out this article',
  icon:'/app-icon.png',
  image:'/article-preview.jpg',
  badge:'/badge-icon.png',
  vibrate: [200, 100, 200],
  tag:'article-notification'
};

Push Notification Best Practices

Do's

Request permission at the right moment
Provide clear value proposition
Personalize notification content
Use proper timing and frequency
Include relevant action buttons
Test across different devices
Handle subscription failures gracefully

Don'ts

Ask for permission immediately on page load
Send notifications too frequently
Use generic, irrelevant messages
Ignore user preferences and settings
Send notifications at inappropriate times
Forget to handle unsubscribe requests
Neglect proper error handling

Golden Rule: Only send notifications that provide genuine value to your users. Quality over quantity always wins in push notification strategy.

Backend Implementation

VAPID Keys Generation

Generate VAPID (Voluntary Application Server Identification) keys for secure communication:

// Install web-push library
npm install web-push

// Generate VAPID keys (Node.js)
constwebpush =require('web-push');

// Generate keys once and store securely
constvapidKeys = webpush.generateVAPIDKeys();

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

// Set VAPID details
webpush.setVapidDetails(
  'mailto:your-email@example.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

Subscription Storage & Management

Store and manage user subscriptions on your server:

// Express.js endpoint to save subscriptions
constexpress =require('express');
constapp =express();

app.use(express.json());

// Store subscription
app.post('/api/subscribe',async(req, res) => {
  try{
    constsubscription = req.body;

    // Validate subscription object
    if(!subscription || !subscription.endpoint) {
      returnres.status(400).json({
        error:'Invalid subscription object'
      });
    }

    // Save to database
    awaitsaveSubscriptionToDatabase(subscription);

    res.status(201).json({ success:true});
  }catch(error) {
    console.error('Error saving subscription:', error);
    res.status(500).json({ error:'Server error'});
  }
});

Sending Push Notifications

Implement the server logic to send push notifications to subscribed users:

// Send notification to single user
async functionsendNotificationToUser(subscription, payload) {
  try{
    constresult =awaitwebpush.sendNotification(
      subscription,
      JSON.stringify(payload)
    );
    console.log('Notification sent successfully', result);
    returnresult;
  }catch(error) {
    console.error('Error sending notification:', error);

    // Handle expired/invalid subscriptions
    if(error.statusCode === 410) {
      awaitremoveInvalidSubscription(subscription);
    }
    throwerror;
  }
}

Testing & Debugging Push Notifications

Browser Testing
Testing Tools
Debugging

Chrome DevTools

Use Application tab > Service Workers to test push events manually.

Built-in

Firefox DevTools

Console and Network tabs for debugging push subscription issues.

Built-in

Mobile Testing

Test on actual mobile devices for real-world notification behavior.

Manual

Desktop Testing

Verify notification appearance and behavior across desktop browsers.

Easy

Web Push Testing

Online tool for testing push notifications without backend setup.

Free

Postman/Insomnia

Test push service API endpoints directly with HTTP requests.

Recommended

curl Commands

Command-line testing for quick push notification validation.

CLI

Lighthouse

Audit push notification implementation as part of PWA checks.

Google

Common Issues & Solutions

Permission Denied

User has blocked notifications. Provide clear re-enable instructions.

Check: Notification.permission === 'denied'

Service Worker Registration Failed

HTTPS required, check file path and service worker syntax.

Check: navigator.serviceWorker.register() errors

Subscription Creation Failed

Invalid VAPID keys or push service unavailable.

Check: pushManager.subscribe() errors

Frequently Asked Questions

Do push notifications work on iOS Safari?

Push notifications have limited support on iOS. Safari on macOS supports push notifications, but iOS Safari (iPhone/iPad) does not support web push notifications. However, if your PWA is added to the home screen on iOS, it can receive notifications through the PWA framework. Always implement feature detection and provide alternative engagement methods for iOS users.

What happens when a user's subscription expires?

When a push subscription expires or becomes invalid, the push service will return a 410 status code (Gone) when you try to send notifications. Your server should handle this by removing the expired subscription from your database. Implement proper error handling to automatically clean up invalid subscriptions and optionally prompt users to re-subscribe when they next visit your site.

How many notifications can I send per day?

There's no hard technical limit, but each browser and push service has rate limiting and anti-spam measures. Chrome recommends no more than 1-2 notifications per day for most applications. Focus on quality over quantity - sending too many notifications will lead to users unsubscribing or blocking your site. Monitor your click-through rates and user feedback to find the optimal frequency for your audience.

Can I send push notifications without a server?

No, sending push notifications requires a server component. You need a server to store user subscriptions, generate authentication tokens, and send requests to push services. However, you can use serverless functions (like Vercel Functions, Netlify Functions, or AWS Lambda) or third-party services (like Firebase Cloud Messaging) to handle the server-side logic without managing a traditional server.

How do I handle users who deny notification permission?

Once a user denies permission, browsers don't allow you to ask again programmatically. Instead, provide alternative engagement methods like email subscriptions, RSS feeds, or in-app messaging. You can show a helpful message explaining how users can manually enable notifications in their browser settings if they change their mind. Focus on delivering value through your content to encourage users to reconsider.

What's the difference between local and push notifications?

Local notifications are triggered by your website's JavaScript while the user is actively on your site or has it open in a background tab. Push notifications can be sent from your server at any time, even when the user doesn't have your website open, as long as they have a browser running. Push notifications are more powerful for re-engagement but require more complex setup with service workers and server infrastructure.

Got an Idea or Question?

Looking to build, enhance, or fix your website? At Mirage Code, our experienced team can turn your vision into reality. Let's bring your ideas to life

No commitment required. See exactly what's holding your website back.

Get in touch today!

About Mirage Code

Mirage Code specializes in building scalable, high-converting websites for businesses of all sizes. Our team combines technical expertise with conversion optimization strategies to deliver websites that not only look great but also drive real business results.

Ready to discuss your project? Contact us today for a free consultation and discover how we can transform your website into a powerful conversion machine.