JavaScript

🔔 Notification API in JavaScript – Complete Tutorial

The Notification API allows web applications to display system-level notifications to users, even when the webpage is not currently in focus (subject to browser support, user permission, and other platform requirements).

📌 What is the Notification API?

The Notification API is a browser API used to send desktop or mobile notifications from web applications. Notifications can display a title, body, icon, image, badge, vibration pattern (where supported), and other options.

>>"Notifications help keep users informed about important events even when they're not actively viewing your webpage."

💡 Why Use the Notification API?

💬 Chat message alerts
📧 Email notifications
📅 Calendar reminders
🛒 Order and delivery updates
📢 Important application alerts

🛠 Checking Browser Support

Check Support

if ("Notification" in window) {
  console.log("Notifications supported");
} else {
  console.log("Notifications not supported");
}

🔐 Requesting Permission

Before showing notifications, the user must grant permission.

Request Permission

Notification.requestPermission()
  .then((permission) => {
    console.log(permission);
  });

📊 Permission States

State	Description
"granted"	User allowed notifications.
"denied"	User blocked notifications.
"default"	User has not made a choice yet.

🔔 Creating a Notification

After permission is granted, create a notification using theNotification constructor.

Basic Notification

new Notification("Hello!", {
  body: "Welcome to our website."
});

🖼 Adding an Icon

Notification with Icon

new Notification("Download Complete", {
  body: "Your file is ready.",
  icon: "images/icon.png"
});

⚙️ Notification Options

Option	Description
body	Notification message.
icon	Notification icon.
image	Large image (where supported).
badge	Small badge icon (where supported).
tag	Identifier used to replace similar notifications.
lang	Language of the notification.
dir	Text direction ("ltr", "rtl", or "auto").
requireInteraction	Keeps the notification visible until dismissed (browser dependent).
silent	Suppresses notification sounds (where supported).
vibrate	Vibration pattern on supported devices.

📢 Notification Events

Event	Description
show	Notification becomes visible.
click	User clicks the notification.
close	Notification is closed.
error	An error occurred while displaying it.

🖱 Handling Click Events

Notification Click

const notification =
  new Notification("New Message", {
    body: "Click to open."
  });

notification.onclick = () => {
  window.focus();

  console.log("Notification clicked");
};

❌ Closing a Notification

Close Notification

const notification =
  new Notification("Reminder");

setTimeout(() => {
  notification.close();
}, 5000);

🚀 Complete Example

Notification Example

if ("Notification" in window) {

  Notification.requestPermission()
    .then((permission) => {

      if (permission === "granted") {

        const notification =
          new Notification(
            "Welcome!",
            {
              body: "Thanks for visiting.",
              icon: "images/logo.png"
            }
          );

        notification.onclick = () => {
          window.focus();
        };

      }

    });

}

📊 Notification API vs Alert()

Feature	Notification API	alert()
Requires Permission	✅ Yes	❌ No
Blocks JavaScript	❌ No	✅ Yes
Works Outside Page Focus	✅ Often, depending on platform and browser	❌ No
Supports Icons	✅ Yes	❌ No
User Friendly	✅ Yes	⚠️ Limited

⚠️ Important Notes

🔒 Notifications require user permission.
🌐 Most browsers require a secure context (HTTPS).
🖱️ Permission requests should generally be triggered by a user action (such as clicking a button).
📱 Supported features can vary between browsers and operating systems.

Note

Notifications shown while a website is closed or in the background typically use the Service Worker and Push API, not just the basic Notification constructor shown here.

✅ Best Practices

🎯 Request permission only when notifications provide clear value.
📢 Avoid sending excessive or unnecessary notifications.
🖼️ Use meaningful titles, icons, and concise messages.
🖱️ Handle notification click events to guide users to relevant content.
🔄 Respect the user's notification preferences and permission choices.

🎯 Summary

The Notification API enables web applications to display system-level notifications after the user grants permission. It supports customizable notification content, icons, and interaction events, making it useful for messaging, reminders, alerts, and application updates. For background notifications when a web app isn't open, it is commonly used together with Service Workers and the Push API.