Installation

Props

The hook returns an object with the following properties:

Options

The showNotification function accepts an optional options parameter:

Key Features & Details

Browser Support

The Notifications API is supported in most modern browsers with varying feature support:

• Chrome: Full support
• Firefox: Full support
• Safari: Partial support (some features may not be available)
• Edge: Full support
• Opera: Full support

Note: The API requires a secure context (HTTPS) to work, except for localhost.

Feature Detection

• The hook automatically detects browser support for various notification features
• Provides boolean flags for each supported feature
• Handles cases where certain features might not be available
• Gracefully degrades functionality based on browser capabilities

Permission Management

• Tracks the current permission status
• Provides a function to request permission
• Handles permission changes across browser tabs
• Manages permission state persistence

Best Practices & Caveats

1. Always check for browser support before using the hook
2. Request permission only after a user interaction
3. Provide clear feedback about the notification permission status
4. Implement fallback UI notifications for unsupported browsers
5. Use appropriate icons and badges to improve notification visibility
6. Consider the user's context when showing notifications
7. Handle notification errors gracefully
8. Clean up notifications when they're no longer needed

Examples

Basic Usage

const { permission, requestPermission, showNotification } = useNotifications();
 
const handleShowNotification = () => {
  showNotification('New Message', {
    body: 'You have a new message from John',
    icon: '/path/to/icon.png',
  });
};

With Feature Detection

const { isSupported, supportsActions, supportsBadge, showNotification } =
  useNotifications();
 
const handleShowNotification = () => {
  showNotification('New Message', {
    body: 'You have a new message from John',
    icon: '/path/to/icon.png',
    badge: supportsBadge ? '/path/to/badge.png' : undefined,
    actions: supportsActions
      ? [
          {
            action: 'view',
            title: 'View Message',
          },
        ]
      : undefined,
  });
};

With Permission Management

const { permission, requestPermission } = useNotifications();
 
const handleRequestPermission = async () => {
  try {
    await requestPermission();
  } catch (error) {
    console.error('Failed to request permission:', error);
  }
};

Common Use Cases

1. Real-time Updates: Notify users of new messages or events
2. Background Tasks: Alert users when long-running tasks complete
3. System Alerts: Inform users about system status or errors
4. User Engagement: Remind users about important actions or deadlines
5. Multi-tab Coordination: Synchronize state across multiple tabs

Related

• MDN Notifications API
• Web Push Notifications
• Notification API Browser Support