The Notifications API is a really neat feature for keepings users engaged with your web app. It allows you to send notifications to the user's device, even when the browser is closed. This is a great way to keep users informed about new content, messages, or other important updates.

• Example
• Benefits
• Use Cases
• Have Some Respect

Example

Here's a simple example of how you can use the Notifications API in your web app:

// useNotification hook
interface CustomNotificationOptions extends NotificationOptions {
  title?: string
  duration?: number
}

export const useNotification = () => {
  const requestPermissions = async () => {
    if ('Notification' in window) {
      const status = await Notification.requestPermission()
      if (status === 'granted') {
        return true
      }
    }
    return false
  }

  const sendNotification = (options: CustomNotificationOptions) => {
    const notification = new Notification(options.title, {
      body: options.body,
      icon: options.icon,
    })

    setTimeout(() => notification.close(), options.duration)
  }

  return {
    send: async (
      options: CustomNotificationOptions = {
        title: 'New Message',
        body: 'You have a new message.',
        icon: 'static/images/logo.svg',
        duration: 5000,
      }
    ) => {
      if (await requestPermissions()) {
        sendNotification(options)
      }
    },
  }
}

Now that this is packaged up in a nice utility function, you can use it anywhere in your app. Here's an example of how you might use it in a React component:

// implementation
import { useNotification } from '@/lib/notifications/use-notification'

export const NotifyMe = () => {
  const { send } = useNotification()

  return (
    <button
      onClick={() =>
        send({
          title: 'Delightful Engineering',
          body: 'Check out the latest article on our blog.',
        })
      }
    >
      Example Notification 🔔
    </button>
  )
}

Benefits

• Engagement: Keep users engaged with your app by sending them notifications about new content or updates.
• Permission Management: The Notifications API handles all the permission management for you. You just need to request permission once and then you can send notifications whenever you like. Users can also manage their notification settings in the browser. Implementing this yourself can be a lot of work.
• External to your application: Notifications can be sent even when the user is not actively using your app.
• Cross-Platform: Notifications work on all modern browsers and devices. You don't need to worry about compatibility issues.

Use Cases

Here are a few examples of things you might use the Notifications API in your web app:

• New Content: Notify users when new content is available on your site.
• Messages: Notify users when they receive a new message.
• Updates: Notify users when there is an update available for your app.
• Reminders: Notify users about upcoming events or deadlines.

Have Some Respect

Your users probably get bombarded with notification from all sorts of apps and websites. It's important to respect their time and attention. Reserve these notifications for the most important updates. Don't send them for every little thing. Consider using an in-app toast or alert for less critical updates.

The goal should be to not make the user regret giving you permission to send notifications.