Notification Lifecycle Events

Technical Deep Dive & Specifications

The Four Notification Instance Events

Every Notification instance inherits from EventTarget and implements four lifecycle event handlers:

interface Notification : EventTarget {
  attribute EventHandler onshow;   // Dispatched when OS displays the toast
  attribute EventHandler onclick;  // Dispatched when user clicks notification
  attribute EventHandler onclose;  // Dispatched when dismissed by user or system
  attribute EventHandler onerror;  // Dispatched if OS fails to render/display
  
  void close();                    // Programmatically dismisses the notification
};

Focusing the Window with window.focus()

When a user interacts with a notification, the browser tab is often hidden in the background or minimized. Inside the onclick handler, you can bring the origin window into focus:

notification.onclick = (event) => {
  event.preventDefault(); // Prevent default OS behavior
  
  // 1. Bring browser window and tab to the foreground
  window.focus();

  // 2. Navigate to the relevant in-app view
  window.location.hash = `#message-${event.target.data.messageId}`;

  // 3. Programmatically close the notification toast
  notification.close();
};

Security Note: Browsers only permit window.focus() during a verified User Activation window. Because onclick is triggered directly by a physical user click on the notification, modern browsers grant the activation privilege to bring the tab forward.

The Garbage Collection (GC) Memory Trap

One of the most elusive bugs in JavaScript notification programming is the Garbage Collector Drop:

// ❌ DANGEROUS: The notification variable is scoped locally and unreferenced
function sendFragileNotification() {
  const notif = new Notification('New Message', { body: 'Click to open' });
  notif.onclick = () => {
    window.focus(); // ⚠️ May never execute!
  };
} // 'notif' goes out of scope here.

If the V8 / JavaScriptCore engine runs a garbage collection cycle before the user clicks the notification, the unreferenced JavaScript Notification object may be destroyed in memory. When the OS bridge sends the click event back to the browser process, there is no longer a JS event listener to receive it!

The Enterprise Retention Pattern:

// ✅ ROBUST: Retain active notification references in a Set
const activeNotifications = new Set();

function sendRobustNotification(title, options) {
  const notif = new Notification(title, options);
  activeNotifications.add(notif);

  notif.onclick = (event) => {
    window.focus();
    notif.close();
  };

  // Clean up memory only after the notification is completely closed
  notif.onclose = () => {
    activeNotifications.delete(notif);
  };

  notif.onerror = () => {
    activeNotifications.delete(notif);
  };
}

💻 Interactive Code Playground

Starter Code

Save this file as index.html and test it in your browser:

Line-by-Line Code Breakdown

• Line 99: activeSet.add(notif) stores a strong reference to the Notification instance, preventing JavaScript garbage collection from pruning the instance before the user clicks it.
• Lines 103–109: The onclick handler executes window.focus(), updates the DOM target element, and invokes notif.close() to immediately remove the desktop banner.
• Lines 111–114: notif.onclose acts as the deterministic lifecycle destructor, removing the closed instance from activeSet to prevent memory leaks.
• Lines 134–137: Inside onshow, a setTimeout invokes notif.close() after 4000ms, proving programmatic closure control.

Expected Browser Render Output

+────────────────────────────────────────────────────────────+
| 📡 Notification Lifecycle Monitor                          |
| Trigger alerts, minimize or switch tabs...                 |
|                                                            |
| [ Send Alert in 3s (Switch Tab!) ]  [ Send Auto-Dismiss ]  |
|                                                            |
| +────────────────────────────────────────────────────────+ |
| | [10:32:01] SYSTEM: System initialized.                 | |
| | [10:32:04] SHOW: Native notification displayed on OS.  | |
| | [10:32:07] CLICK: User clicked notification payload... | |
| | [10:32:07] CLOSE: Notification closed and dismissed.   | |
| +────────────────────────────────────────────────────────+ |
|                                                            |
| 🎯 Destination Target Area (Highlighted Green on Click)    |
+────────────────────────────────────────────────────────────+