❯
fn

useWebNotification

v0.0.14testeddemo

Reactive, SSR-safe wrapper around the Web Notification API with permission handling and onClick/onShow/onError/onClose event hooks.

Source Tests

Examples

ts
const { show, isSupported, onClick } = useWebNotification({
  title: 'Hello',
  body: 'You have a new message',
  icon: '/icon.png',
});
onClick(() => console.log('clicked'));
if (isSupported.value)
  show();
ts
// Override options per call
const { show } = useWebNotification();
show({ title: 'Override', body: 'Per-call body' });

Demo

Loading demo…

Signature

ts
export function useWebNotification(
  options: UseWebNotificationOptions ={ ... }

Parameters

ParameterTypeDescription
options?UseWebNotificationOptionsDefault notification options plus behavior flags

Returns

UseWebNotificationReturnisSupported, notification, permissionGranted, show, close, ensurePermissionGranted, and the onClick/onShow/onError/onClose hooks
PropertyTypeDescription
isSupportedComputedRef<boolean>Whether the Notification API is supported in the current environment.
notificationShallowRef<Notification | null>The currently displayed Notification, or null when none is shown.
permissionGrantedShallowRef<boolean>Whether notification permission has been granted.
show(overrides?: WebNotificationOptions) => Promise<Notification | undefined>Display a notification, optionally overriding the default options for this call. Resolves with the created Notification, or undefined when unsupported or permission is not granted.
close() => voidClose the currently displayed notification (if any).
ensurePermissionGranted() => Promise<boolean | undefined>Request permission if it has not yet been granted (and was not denied). Resolves with the resulting granted state, or undefined when unsupported.
onClickEventHookOn<Event>Register a listener fired when the notification is clicked.
onShowEventHookOn<Event>Register a listener fired when the notification is shown.
onErrorEventHookOn<Event>Register a listener fired when the notification errors.
onCloseEventHookOn<Event>Register a listener fired when the notification is closed.