fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
4.3 KiB
4.3 KiB
category
| category |
|---|
| Browser |
useWebNotification
Reactive Notification
The Web Notification interface of the Notifications API is used to configure and display desktop notifications to the user.
Usage
::: tip Before an app can send a notification, the user must grant the application the right to do so. The user's OS settings may also prevent expected notification behaviour. :::
import { useWebNotification } from '@vueuse/core';
const {
isSupported,
notification,
permissionGranted,
show,
close,
onClick,
onShow,
onError,
onClose,
} = useWebNotification({
title: 'Hello, VueUse world!',
dir: 'auto',
lang: 'en',
renotify: true,
tag: 'test',
});
if (isSupported.value && permissionGranted.value) show();
This composable also utilizes the createEventHook utility from '@vueuse/shared`:
import { useWebNotification } from '@vueuse/core';
const { onClick, onShow, onError, onClose } = useWebNotification();
// ---cut---
onClick((evt: Event) => {
// Do something with the notification on:click event...
});
onShow((evt: Event) => {
// Do something with the notification on:show event...
});
onError((evt: Event) => {
// Do something with the notification on:error event...
});
onClose((evt: Event) => {
// Do something with the notification on:close event...
});
Type Declarations
export interface WebNotificationOptions {
/**
* The title read-only property of the Notification interface indicates
* the title of the notification
*
* @default ''
*/
title?: string;
/**
* The body string of the notification as specified in the constructor's
* options parameter.
*
* @default ''
*/
body?: string;
/**
* The text direction of the notification as specified in the constructor's
* options parameter.
*
* @default ''
*/
dir?: 'auto' | 'ltr' | 'rtl';
/**
* The language code of the notification as specified in the constructor's
* options parameter.
*
* @default DOMString
*/
lang?: string;
/**
* The ID of the notification(if any) as specified in the constructor's options
* parameter.
*
* @default ''
*/
tag?: string;
/**
* The URL of the image used as an icon of the notification as specified
* in the constructor's options parameter.
*
* @default ''
*/
icon?: string;
/**
* Specifies whether the user should be notified after a new notification
* replaces an old one.
*
* @default false
*/
renotify?: boolean;
/**
* A boolean value indicating that a notification should remain active until the
* user clicks or dismisses it, rather than closing automatically.
*
* @default false
*/
requireInteraction?: boolean;
/**
* The silent read-only property of the Notification interface specifies
* whether the notification should be silent, i.e., no sounds or vibrations
* should be issued, regardless of the device settings.
*
* @default false
*/
silent?: boolean;
/**
* Specifies a vibration pattern for devices with vibration hardware to emit.
* A vibration pattern, as specified in the Vibration API spec
*
* @see https://w3c.github.io/vibration/
*/
vibrate?: number[];
}
export interface UseWebNotificationOptions extends ConfigurableWindow, WebNotificationOptions {
/**
* Request for permissions onMounted if it's not granted.
*
* Can be disabled and calling `ensurePermissions` to grant afterwords.
*
* @default true
*/
requestPermissions?: boolean;
}
/**
* Reactive useWebNotification
*
* @see https://vueuse.org/useWebNotification
* @see https://developer.mozilla.org/en-US/docs/Web/API/notification
*/
export declare function useWebNotification(options?: UseWebNotificationOptions): {
isSupported: ComputedRef<boolean>;
notification: Ref<Notification | null, Notification | null>;
ensurePermissions: () => Promise<boolean | undefined>;
permissionGranted: ShallowRef<boolean, boolean>;
show: (overrides?: WebNotificationOptions) => Promise<Notification | undefined>;
close: () => void;
onClick: EventHookOn<any>;
onShow: EventHookOn<any>;
onError: EventHookOn<any>;
onClose: EventHookOn<any>;
};
export type UseWebNotificationReturn = ReturnType<typeof useWebNotification>;