Notifications API

1. Introduction

The Notifications API allows web applications to display system notifications to the user. These notifications are displayed outside the browser tab, usually matching the operating system's native notification style, even if the browser is running in the background.

2. Why It Matters

Displaying notifications is key to building real-time collaboration tools, like chat applications or calendar reminders. Knowing how to request permissions and handle notification clicks ensures users stay updated and engaged.

3. Real-World Analogy

Think of a Paging system at a Hospital:

• Permission check: The clinic desk receptionist asks: "Do we have permission to call your phone when the doctor is ready?" (Permission prompt). You select: Granted, Denied, or Default (unset).
• Granted state: If you select "Granted", the desk pager flashes and plays a sound (the notification) when your turn arrives. Even if you are sitting in the courtyard outside (browser is in the background), you receive the update.

4. The Notifications API

Using the API involves requesting permission and then creating a Notification instance:

1. Requesting Permission:

Call the static method Notification.requestPermission(). This returns a Promise that resolves to the permission state (granted, denied, or default).

2. Creating a Notification:

Create a new Notification instance, passing the title and an optional configuration options object (containing body text, icons, or actions).

5. Practical Example

This script demonstrates wrapping the permission and creation logic into a single helper function:

6. Common Mistakes

• Requesting permission on page load: Bombarding users with a permission prompt immediately when they load the page often leads to them clicking "Block". Instead, request permission after a user action (like clicking a "Notify Me" button) to explain why the permission is needed.
• Assuming Notification is supported on mobile browsers: Many mobile browsers (like iOS Safari) do not support the standard new Notification() constructor in the main thread. To send notifications on mobile, use the Web Push API combined with Service Worker registrations instead.

7. Quick Quiz

8. Scenario-Based Challenge

9. Debugging Exercise

// Objective: alert task completion
const alert = new Notification('Timer Ended', { body: 'Finished!' }); // Crashes on iOS! Why?

if ('Notification' in window) {
  if (Notification.permission === 'granted') {
    new Notification('Timer Ended', { body: 'Finished!' });
  }
} else {
  // Geolocation / fallback sound or custom modal toast alert
  alert('Timer Ended: Finished!');
}

10. Interview Questions

11. Production Considerations

• • User Experience (UX): Avoid showing unsolicited notifications. Let users customize which events trigger notifications in their settings panel to prevent them from blocking notifications entirely.