Advance JavaScript (DOM, BOM, Web API) / Web API

Notification

🔔 Notification API

The Notification API lets your website show desktop notifications using JavaScript—similar to how apps display alerts.

👉 Notification Permissions

Because notifications can be annoying or misused, browsers enforce two rules:

  1. Users must grant permission before any site can send notifications.

  2. Notifications only work on HTTPS websites (secure context).

Other important points:

  • Users may grant, deny, or ignore the permission request.

  • If they deny, you cannot ask again.

  • If they ignore the prompt, you can request again later.

To ask for permission:

let permission = await Notification.requestPermission();

Possible results:

  • 'granted' → user allows notifications

  • 'denied' → user blocks notifications

  • 'default' → user ignored the prompt (treated like denied)

🎯 Showing & Closing Notifications

To show a notification, use the Notification constructor:

const greeting = new Notification('Hi, How are you?');

You can add options like body text or an icon:

const greeting = new Notification('Hi, How are you?', {
  body: 'Have a good day',
  icon: './img/goodday.png'
});

Close a notification

greeting.close();

Close it automatically after 10 seconds:

setTimeout(() => greeting.close(), 10000);

📱 Notification Events

A notification can trigger these events:

  • show → when it appears

  • click → when the user clicks it

  • error → when something goes wrong

  • close → when the user closes it or you call .close()

Attach event listeners like this:

const greeting = new Notification('Hi, How are you?', {
  body: 'Have a good day',
});

greeting.addEventListener('click', () => {
    window.open('<https://www.codeveda.dev/>');
});

Shortcut using properties:

greeting.onclick = () => window.open('<https://www.codeveda.dev/>');

🟨 Notification API example

In this example, we’ll build a simple web application that shows a desktop notification to the users.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>JavaScript Notification API</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div class="container">
    <h1>JavaScript Notification API Demo</h1>
    <div class="error"></div>
  </div>
  <script src="js/app.js"></script>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background: linear-gradient(135deg, #e0f7fa, #e1bee7);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: #fff;
  padding: 2rem 3rem;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 450px;
  width: 100%;
}

h1 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1rem;
}

.error {
  display: none;
  background-color: #f8d7da;
  color: #721c24;
  padding: 1rem;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  margin-top: 1rem;
  font-weight: bold;
}
(async () => {
  // create and show the notification
  const showNotification = () => {
    const notification = new Notification('JavaScript Notification API', {
      body: 'This is a JavaScript Notification API demo',
    });

    // close the notification after 10 seconds
    setTimeout(() => {
      notification.close();
    }, 10 * 1000);

    // navigate to a URL when clicked
    notification.addEventListener('click', () => {
      window.open('<https://www.codeveda.dev/>', '_blank');
    });
  };

  // show an error message
  const showError = () => {
    const error = document.querySelector('.error');
    error.style.display = 'block';
    error.textContent = 'You blocked the notifications';
  };

  // check notification permission
  let granted = false;

  if (Notification.permission === 'granted') {
    granted = true;
  } else if (Notification.permission !== 'denied') {
    let permission = await Notification.requestPermission();
    granted = permission === 'granted';
  }

  // show notification or error
  granted ? showNotification() : showError();
})();

  • When you open the page, it’ll request notification permission.

  • If you click the allow button, you’ll see the following notification on your desktop :

  • If you click the notification, it’ll open the URL https://www.codeveda.dev/ :