const publicVapidKey = "REPLACE_WITH_YOUR_KEY"; 
// Register SW, Register Push, Send Push
async function send() {
    // Register Service Worker
    console.log("Registering service worker...");
    const register = await navigator.serviceWorker.register("./sw.js", {
        scope: "/",
    });
    console.log("Service Worker Registered...");

    // Register Push
    console.log("Registering Push...");
    const subscription = await register.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(publicVapidKey),
    });

    console.log(subscription);

    console.log("Push Registered...");

    // Send Push Notification
    console.log("Sending Push...");
    await fetch("http://localhost:3001/subscribe", {
        method: "POST",
        body: JSON.stringify(subscription),
        headers: {
            "content-type": "application/json",
        },
    });
    console.log("Push Sent...");
}

send();

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;
}

Explaination

• What is a Service Worker? A Service Worker is a JavaScript script that runs in the background of a web browser, separate from the main webpage. It is mainly used for:
  1. Push Notifications
  2. Background Sync
  3. Offline Caching (for Progressive Web Apps - PWAs)
  Since it runs independently, it does not have direct access to the DOM but can intercept network requests, cache resources, and handle push notifications.
• Step 1: Registering the Service Worker

  const register = await navigator.serviceWorker.register("./sw.js", {
      scope: "/",
  });
  

  This registers a Service Worker from sw.js.
  • The scope: "/" means that the service worker will control all pages under the root (/).
  • Once registered, the service worker will run in the background, even when the webpage is closed.
• Step 2: Register for Push Notifications

  const subscription = await register.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(publicVapidKey),
  });

  • pushManager.subscribe() registers the user for Push Notifications.
  • userVisibleOnly: true ensures every push notification will be visible.
  • applicationServerKey is a public VAPID key that allows the browser to verify the notification request.
  • VAPID (Voluntary Application Server Identification) is a way for browsers to authenticate push notification requests securely.
• Step 3: Sending the subscription data to the backend

  await fetch("http://localhost:3001/subscribe", {
      method: "POST",
      body: JSON.stringify(subscription),
      headers: {
          "content-type": "application/json",
      },
  });

• Step 4: Converting Base64 Key to Uint8Array

  Just copy and paste this function don't worry about this. This function converts the public VAPID key from Base64 format into a Uint8Array, which is required for push notifications.

  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;
  }