Notification API

Notifications API

The Notifications API sends system-level notifications. Request permission first, then show notifications even when the page is in the background.

Example

async function showNotification() {
  const permission = await Notification.requestPermission();
  if (permission === "granted") {
    new Notification("New Message", {
      body: "You have a message from Alice.",
      icon: "/img/icon.png",
      badge: "/img/badge.png"
    });
  }
}

document.getElementById("notifyBtn").addEventListener("click", showNotification);

JAVASCRIPT

Full Editor

Pro Tip

Only request notification permission in response to a user gesture (click).

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned