createWebNotification

Category Browser

Configure and display desktop notifications to the user.

Demo

Your browser doesn't support the Web Notifications API...

Usage

<script>
	import { createWebNotification } from '@sv-use/core';
 
	const notification = createWebNotification();
</script>
 
<button onclick={notification.show}>
    Show notification
</button>
Type definitions
type CreateWebNotificationData = {
    /** @default '' */
    title?: string;
    /** @default '' */
    body?: string;
    /**
     * The text direction of the notification.
     * @default 'auto'
     */
    dir?: NotificationDirection;
    /**
     * The language of the notification.
     * @default DOMString
     */
    lang?: string;
    /**
     * The tag ID of the notification.
     * @default ''
     */
    tag?: string;
    /**
     * The URL of the image to display in the notification.
     * @default ''
     */
    icon?: string;
    /**
     * Whether the notification should remain active until the user interacts with it or not.
     * @default false
     */
    requireInteraction?: boolean;
    /**
     * Whether the notification should be silent or not, regardless of the device's settings.
     * @default false
     */
    silent?: boolean;
};
type CreateWebNotificationOptions = {
    /**
     * Whether to automatically request permission to show notifications or not.
     * @default true
     */
    autoRequestPermission?: boolean;
    /**
     * A callback for when the notification is shown.
     * @default () => {}
     */
    onShow?: () => void;
    /**
     * A callback for when the notification is clicked.
     * @default () => {}
     */
    onClick?: () => void;
    /**
     * A callback for when the notification is closed.
     * @default () => {}
     */
    onClose?: () => void;
    /**
     * A callback for when the notification has an error.
     * @default () => {}
     */
    onError?: () => void;
};
type CreateWebNotificationReturn = {
    readonly isSupported: boolean;
    readonly isPermissionGranted: boolean;
    readonly notification: Notification | null;
    show: () => Promise<Notification | null>;
    close: () => void;
};
/**
 * Configure and display desktop notifications to the user.
 * @warning Cannot be used in a lifecycle hook as it relies on `onMount`.
 * @see https://svelte-librarian.github.io/sv-use/docs/core/browser/create-web-notification
 */
export declare function createWebNotification(data?: CreateWebNotificationData, options?: CreateWebNotificationOptions): CreateWebNotificationReturn;
export {};

Sources