Notifications API and Permission Handling

Notification.permission is a static string that reflects the current permission state. It can be "granted" (user allowed), "denied" (user blocked), or "default" (never asked). Check this property before trying to show notifications to avoid unnecessary errors.

Notification.requestPermission() returns a Promise that resolves with the new permission string. Call it only in response to a clear user action, not on page load. Browsers ignore or suppress permission prompts that fire immediately on load, and users find them annoying when they appear without context.

The most effective pattern is to show an in-app prompt explaining the benefit, then let the user click "Enable notifications" before calling requestPermission(). This gives context, increases acceptance rates, and avoids the browser marking your site as spammy. Never request permission on page load.

new Notification(title, options) creates and displays a system notification. The first argument is the title string. The options object is the second argument and accepts properties like body (subtitle text), icon (image URL), and tag for deduplication. This only works if permission is "granted".

Key notification options include: body for descriptive text below the title, icon for a small image, badge for the small monochrome icon shown in the OS notification area, image for a large inline image, tag to replace a previous notification with the same tag, and requireInteraction: true to keep the notification until the user acts.

The Notification instance fires several events: onclick fires when the user clicks the notification (use it to focus the window and navigate), onclose fires when it is dismissed, and onerror fires if there was a problem creating it. Attach handlers to the returned instance after calling new Notification().

Store the returned Notification instance in a variable and call notification.close() to dismiss it programmatically. This is useful for time-sensitive notifications that become irrelevant after a period. Combine with setTimeout to auto-close after a few seconds.

The Notifications API requires a secure context. On HTTP pages, typeof Notification === 'undefined' or the API is disabled entirely depending on the browser. This is a security measure to prevent malicious sites from flooding users with fake system messages. Always check availability before using.

A useNotifications hook can expose two methods: requestPermission() and showNotification(title, options). It internally tracks the current permission state and updates it after requesting. Components call showNotification without worrying about permission checks, since the hook handles that internally.

The Page Visibility API exposes document.hidden and the visibilitychange event. Notifications make most sense when the user is not already viewing the tab. Check document.hidden === true before showing a notification to avoid redundant alerts when the page is already in the foreground.

The Notifications API shown here is for locally triggered notifications from the page itself. For push notifications that arrive even when the page is closed, you need the Push API combined with a service worker. The service worker receives the push event and calls self.registration.showNotification() from the background.

Which of the following is NOT a valid value for Notification.permission?

Notification.permission can be granted, denied, or default. Always request permission on a user action, not on page load. Use new Notification(title, options) to create notifications and handle onclick to focus the window. Combine with the Visibility API to show notifications only when the tab is hidden.