notifications

Ask for permission and show local or scheduled notifications that open the right page when tapped.

Device featuresClient

What it is

@kitr/notifications asks for permission, shows a notification now or later, replaces or cancels one by id, and tells you which one was tapped so the app opens the right page.

Runs in the browser and in desktop and mobile shells. Push from your server while the app is closed needs a push service on top.

Install

kitr add notifications

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

Adds @kitr/notifications, its provider and config/notifications.ts. Every change.

Quick start

Ask for permission from a button, then show a notification:

// app/features/invoices/notify-me.tsx
import { useNotificationPermission, useNotifications } from '@kitr/notifications/react'

export function NotifyMe() {
  const { permission, request } = useNotificationPermission()
  const notifications = useNotifications()
  if (permission === 'unsupported' || permission === 'denied') return null
  if (permission !== 'granted')
    return (
      <button type="button" onClick={request}>
        Turn on notifications
      </button>
    )
  return (
    <button
      type="button"
      onClick={() =>
        notifications.show({
          title: 'Invoice inv_1042 is due',
          body: 'Acme Corp, $1,280.00, due Friday',
          url: '/invoices/inv_1042',
        })
      }
    >
      Test a notification
    </button>
  )
}

Click Turn on notifications and allow it. Then Test a notification shows a system notification with the app's icon. Next in the guide: Send your first notification.

Built on

kitr adds stable ids, a url carried to the tap, the permission and tap hooks, a memory driver and the NotificationsDriver interface.

Problems it solves

Further reading