🔔 How i added a web push notification feature in my project

#webdev #programming #javascript #beginners

Hey everyone! 👋

I am thrilled to announce to you that I have implemented a push notification feature on my ChatX project.
Now you can get real-time updates even when you’re not on the ChatX tab. Anytime someone sends you a message, you’ll get a notification straight to your device.

How it works

1. Service Worker

A Service worker is a JavaScript file that runs in the background of your browser independently from the web page. It allows your app to handle things like push notifications, background syncing, and caching even when the user is not actively on your site.

2. VAPID Keys

These are cryptographic keys that authenticate your server with the browser’s push service. They allow you to send web push notifications securely and directly, without relying on external services like Firebase Cloud Messaging (FCM).

3. Subscription

When a user allows push notifications, the browser creates a subscription object containing an endpoint URL and encryption keys. This subscription is sent to your backend and used to identify and securely send push messages to that user’s device.

Overall Idea

We prompt the user to accept permissions for notification

Service Worker: We register a Service worker. Its job is to listen for push events and trigger notifications sent from the server.
Subscribing to PushManager:
After permission is granted, we subscribe the user to push notifications through the browser’s PushManager. This returns a subscription object with the endpoint and keys, which we send to our backend to store.

async function subscribeUser() {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: '<YOUR_PUBLIC_VAPID_KEY>'
  });
  // Send the subscription payload to the server to store 
  await fetch('/api/save-subscription', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription)
  });
}

3 Sending Notifications from the Server:
When there is a new chat message, the server uses the saved subscriptions to send push notifications via the Web Push Protocol using VAPID keys.

const webpush = require('web-push');

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

async function sendNotification(subscription, payload) {
  await webpush.sendNotification(subscription, JSON.stringify(payload));
}

4. Handling Push Events in the Service Worker:

The Service Worker listens for push events and displays notifications to the user.

self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icon.png',
      data: { url: data.url }
    })
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data.url));
});

Next up:

Video Chatting functionality using WebRTC
Add and remove users from a group

You can check it out live: ChatX

Top comments (8)

Nathan Tarbert • May 17

pretty cool stuff tbh - always makes me curious if adding features like this ever feels like it speeds things up too much for users or if it keeps stuff more connected - you ever second-guess which features actually help the most long-term