Imagine you’re playing a game on your computer, and suddenly you see a little popup on the corner of your screen saying:

“⚡ Your friend just came online!”

Or maybe you’re watching YouTube, and you see:

“🔔 New video from your favorite channel.”

That little popup is called a Notification. It doesn’t matter if you’re browsing another website or looking at something else on your computer — the notification still shows up.

The Notifications API in JavaScript allows websites to do this: send you small pop-up messages outside the web page.

🔑 How Notifications Work

To use notifications in JavaScript, there are 3 main steps:

  1. Ask for Permission

    • Websites can’t just send you random notifications.

    • The browser asks:

      “Do you want to allow notifications from this site?”

    • You can choose Allow or Block.

  2. Create a Notification

    • If the user says Allow, the website can now create a popup message.

    • Example:

      new Notification("Hello! Thanks for allowing notifications.");

  3. Add Options (title, body, image, icon, etc.)

    • Notifications can be customized with:

      • Title → the main heading.
      • Body → extra text.
      • Icon → a small picture (like a logo).
      • Image → a bigger picture (for rich notifications).

🖼 Example – Simple Notification

// First, ask for permission
Notification.requestPermission().then(function(permission) {
  if (permission === "granted") {
    new Notification("Welcome!", {
      body: "You’ll now get updates from us 😊",
      icon: "https://example.com/icon.png"
    });
  }
});

👉 What happens here:

  • The browser asks if the user wants notifications.
  • If yes, a pop-up shows with a title “Welcome!”, text saying “You’ll now get updates from us 😊”, and a small icon.

🎮 Real-Life Examples for a 14-Year-Old

  • Gaming websites: “Your daily reward is ready!”
  • School apps: “You have a new assignment to submit.”
  • Chat apps: “New message from Alex.”
  • YouTube-like sites: “A new video is live now.”

⚡ Important Rules

  1. Permission is a must → The user decides.
  2. Don’t spam → Too many notifications = Annoying!
  3. Notifications work even when the user is not on your page → That’s their power.

✅ Summary

  • Notifications are like mini pop-ups from websites.
  • They can appear even if you’re doing something else.
  • JavaScript can create these using the Notifications API.
  • First, ask the user politely. If they say yes → you can send them cool reminders, updates, or alerts.

📝 Review – Fill in the Blanks

  1. Notifications are small _______ that appear on your screen.
  2. To use notifications, websites must first ask for _______.
  3. The JavaScript object used to create a notification is called _______.
  4. A notification can have a title, body, icon, and _______.
  5. Too many notifications can _______ the user.
  6. If permission is _______ , a site cannot send notifications.
  7. Notifications are useful for alerts, updates, and _______ messages.
  8. The code new Notification("Hi!") shows a notification with the text _______.
  9. Notifications can appear even when the site is not _______.
  10. The method Notification.requestPermission() is used to _______ permission.
<
Previous Post
JavaSript File API, Blobs, and FileReaders: A Comprehensive Explanation
>
Next Post
JavaScript Vibration API: How To Make The Device Buzz