🔔 Notifications API

Back

What are Web Notifications?

The Notifications API allows web pages to send notifications to the user's system notification center. Combined with a Service Worker, notifications can be shown even when the page is closed!

Key difference: Regular notifications (new Notification()) only work while the page is open. Service Worker notifications (registration.showNotification()) persist and can respond to push events.

Permission Status

Checking notification permission...

Send Custom Notification

Batch Notifications (for DevTools testing)

Send multiple notifications at once to see them stack up in the DevTools panel:

Event Log

🔧 DevTools: Inspecting Notifications

  1. Open DevTools → Application panel
  2. Expand Background services → click Notifications
  3. Click the record button (âē) to start recording
  4. Send notifications from this page and watch events appear
  5. You'll see: notification displayed, clicked, closed events
  6. Each event shows the notification's tag, title, and origin

📝 Practice Exercise

  1. Start recording notification events in the Application panel
  2. Send notifications with different tags — how are they grouped?
  3. Send two notifications with the same tag — what happens?
  4. Click on a notification — does a "notificationclick" event appear?
  5. Close a notification — does a "notificationclose" event appear?
  6. Send the batch of 5 notifications and observe the events timeline