JavaScript Notifications API: Complete Tutorial

function checkNotificationSupport() {
  if (!("Notification" in window)) {
    console.warn("Notifications not supported");
    return false;
  }
  return true;
}
 
function getPermissionStatus() {
  if (!checkNotificationSupport()) return "unsupported";
  return Notification.permission; // "default", "granted", or "denied"
}
 
async function ensurePermission() {
  if (!checkNotificationSupport()) return false;
 
  if (Notification.permission === "granted") return true;
  if (Notification.permission === "denied") return false;
 
  const result = await Notification.requestPermission();
  return result === "granted";
}

async function showNotification(title, options = {}) {
  const allowed = await ensurePermission();
  if (!allowed) return null;
 
  const notification = new Notification(title, {
    body: options.body || "",
    icon: options.icon || "/icons/default-96.png",
    badge: options.badge || "/icons/badge-72.png",
    image: options.image,
    tag: options.tag,
    data: options.data,
    requireInteraction: options.requireInteraction || false,
    silent: options.silent || false,
    dir: options.dir || "auto",
    lang: options.lang || "en",
    renotify: options.renotify || false,
  });
 
  return notification;
}
 
// Simple notification
showNotification("New Message", {
  body: "You have 3 unread messages",
  icon: "/icons/message.png",
});
 
// Rich notification
showNotification("Order Shipped", {
  body: "Your order #12345 is on its way!",
  icon: "/icons/shipping.png",
  image: "/images/package-tracking.png",
  tag: "order-12345",
  data: { orderId: 12345, url: "/orders/12345" },
  requireInteraction: true,
});

function createInteractiveNotification(title, options = {}) {
  const notification = new Notification(title, options);
 
  notification.addEventListener("click", (event) => {
    event.preventDefault();
    // Focus the window
    window.focus();
 
    // Navigate if data contains a URL
    if (notification.data && notification.data.url) {
      window.location.href = notification.data.url;
    }
 
    notification.close();
  });
 
  notification.addEventListener("close", () => {
    console.log("Notification closed:", title);
  });
 
  notification.addEventListener("error", (event) => {
    console.error("Notification error:", event);
  });
 
  notification.addEventListener("show", () => {
    console.log("Notification shown:", title);
  });
 
  return notification;
}
 
// Usage
createInteractiveNotification("Invoice Ready", {
  body: "Click to view invoice #789",
  data: { url: "/invoices/789" },
  tag: "invoice-789",
});

// First notification
new Notification("2 new emails", {
  body: "From: Alice, Bob",
  tag: "email-count",
});
 
// Seconds later, this replaces the first notification
new Notification("5 new emails", {
  body: "From: Alice, Bob, Charlie, Dana, Eve",
  tag: "email-count",
  renotify: true, // Re-alert the user
});

function showTimedNotification(title, options = {}, duration = 5000) {
  const notification = new Notification(title, options);
 
  const timer = setTimeout(() => {
    notification.close();
  }, duration);
 
  notification.addEventListener("click", () => {
    clearTimeout(timer);
    notification.close();
  });
 
  notification.addEventListener("close", () => {
    clearTimeout(timer);
  });
 
  return notification;
}
 
// Disappears after 8 seconds
showTimedNotification(
  "Quick Update",
  { body: "Sync complete" },
  8000
);

class NotificationQueue {
  constructor(maxConcurrent = 3, spacing = 300) {
    this.maxConcurrent = maxConcurrent;
    this.spacing = spacing;
    this.queue = [];
    this.active = new Set();
    this.processing = false;
  }
 
  add(title, options = {}, duration = 0) {
    return new Promise((resolve) => {
      this.queue.push({ title, options, duration, resolve });
      this.process();
    });
  }
 
  async process() {
    if (this.processing) return;
    this.processing = true;
 
    while (this.queue.length > 0) {
      if (this.active.size >= this.maxConcurrent) {
        await new Promise((resolve) => setTimeout(resolve, 100));
        continue;
      }
 
      const item = this.queue.shift();
      this.showItem(item);
 
      await new Promise((resolve) => setTimeout(resolve, this.spacing));
    }
 
    this.processing = false;
  }
 
  showItem(item) {
    const notification = new Notification(item.title, item.options);
    this.active.add(notification);
 
    const cleanup = () => {
      this.active.delete(notification);
      item.resolve(notification);
    };
 
    notification.addEventListener("close", cleanup);
 
    if (item.duration > 0) {
      setTimeout(() => {
        notification.close();
      }, item.duration);
    }
  }
 
  clearQueue() {
    this.queue = [];
  }
 
  closeAll() {
    this.active.forEach((n) => n.close());
    this.active.clear();
    this.clearQueue();
  }
}
 
// Usage
const queue = new NotificationQueue(2, 500);
 
queue.add("Alert 1", { body: "First notification" }, 5000);
queue.add("Alert 2", { body: "Second notification" }, 5000);
queue.add("Alert 3", { body: "Third (queued)" }, 5000);

class NotificationManager {
  constructor() {
    this.supported = "Notification" in window;
    this.queue = new NotificationQueue(3);
    this.history = [];
    this.maxHistory = 50;
    this.listeners = new Map();
  }
 
  async requestPermission() {
    if (!this.supported) return false;
    if (Notification.permission === "granted") return true;
    if (Notification.permission === "denied") return false;
 
    const result = await Notification.requestPermission();
    return result === "granted";
  }
 
  isPermitted() {
    return this.supported && Notification.permission === "granted";
  }
 
  async send(title, options = {}) {
    if (!this.isPermitted()) {
      const granted = await this.requestPermission();
      if (!granted) {
        this.fallbackNotification(title, options);
        return null;
      }
    }
 
    const notification = await this.queue.add(
      title,
      options,
      options.duration || 0
    );
 
    this.history.push({
      title,
      options,
      timestamp: Date.now(),
    });
 
    if (this.history.length > this.maxHistory) {
      this.history.shift();
    }
 
    this.emit("sent", { title, options, notification });
    return notification;
  }
 
  fallbackNotification(title, options) {
    // In-app fallback when notifications are blocked
    const container = document.getElementById("notification-fallback");
    if (!container) return;
 
    const el = document.createElement("div");
    el.className = "in-app-notification";
    el.innerHTML = `
      <strong>${title}</strong>
      <p>${options.body || ""}</p>
      <button onclick="this.parentElement.remove()">Dismiss</button>
    `;
 
    container.prepend(el);
 
    setTimeout(() => {
      if (el.parentElement) el.remove();
    }, options.duration || 8000);
  }
 
  on(event, callback) {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set());
    }
    this.listeners.get(event).add(callback);
  }
 
  off(event, callback) {
    const cbs = this.listeners.get(event);
    if (cbs) cbs.delete(callback);
  }
 
  emit(event, data) {
    const cbs = this.listeners.get(event);
    if (cbs) cbs.forEach((cb) => cb(data));
  }
 
  getHistory() {
    return [...this.history];
  }
 
  clearHistory() {
    this.history = [];
  }
 
  closeAll() {
    this.queue.closeAll();
  }
}
 
// Usage
const notifier = new NotificationManager();
 
notifier.on("sent", ({ title }) => {
  console.log("Notification sent:", title);
});
 
notifier.send("Welcome Back", {
  body: "You have 3 pending tasks",
  icon: "/icons/tasks.png",
  data: { url: "/dashboard" },
  duration: 6000,
});