Skip to main content

notifications

Request permission and show desktop notifications via the Notifications API.

Import: @rtorcato/browser-common/notifications

📖 MDN: Notifications API · 📊 caniuse: notifications

Needs a secure context and user permission (requestNotificationPermission).

Browser support​

APIChromeEdgeFirefoxSafariiOS SafariBaseline
Notification✅ 20+ [1,2]✅ 14+✅ 22+✅ 7+◐ partial 16.4+ [3,4]Limited
Notification.requestPermission✅ 20+✅ 14+✅ 22+ [5,6]✅ 15+◐ partial 16.4+ [7]Limited
  1. Chrome: Starting in Chrome 49, notifications do not work in incognito mode.
  2. Chrome: Before Chrome 42, service worker additions were not supported.
  3. iOS Safari: The Notification interface is undefined, unless the page is a web app saved to the home screen. The app's manifest must have a non-default display value.
  4. iOS Safari: A notification can only be sent from a service worker. To show a notification, see ServiceWorkerRegistration.showNotification().
  5. Firefox: From Firefox 70 onwards, cannot be called from a cross-origin iframe.
  6. Firefox: From Firefox 72 onwards, can only be called in response to a user gesture such as a click event.
  7. iOS Safari: The parent Notification interface is undefined unless the page is a web app saved to the home screen. The app's manifest must have a non-default display value.

Needs: secure context (HTTPS), a user gesture

✅ supported · ◐ partial · ❌ not supported · [n] see note. Generated from MDN browser-compat-data and web-features. caniuse: Notification · Notification.requestPermission_static

Example​

import { isNotificationAvailable, notifyIfPermitted } from '@rtorcato/browser-common/notifications'

button.addEventListener('click', async () => {
  if (isNotificationAvailable()) {
    await notifyIfPermitted('Done', { body: 'Upload complete' })
  }
})

Exports​

  • isNotificationAvailable() — feature check
  • requestNotificationPermission() — asks the user for notification permission
  • showNotification(title, options?) — shows a notification if permission is already granted
  • notifyIfPermitted(title, options?) — requests permission if needed, then shows a notification

See the API reference for full signatures.