useWebNotification
响应式 通知
通知 API 的 Web Notification 接口用于配置和向用户显示桌面通知。
演示
用法
提示
在应用程序发送通知之前，用户必须授予应用程序这样做的权利。用户的操作系统设置也可能阻止预期的通知行为。
ts
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()此可组合项还利用了 '@vueuse/shared' 中的 createEventHook 工具
ts
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...
})js
onClick((evt) => {
// Do something with the notification on:click event...
})
onShow((evt) => {
// Do something with the notification on:show event...
})
onError((evt) => {
// Do something with the notification on:error event...
})
onClose((evt) => {
// Do something with the notification on:close event...
})类型声明
显示类型声明
ts
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.cn/useWebNotification
* @see https://mdn.org.cn/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>来源
贡献者
Anthony Fu
Vida Xie
Anthony Fu
Jelf
SerKo
Casper Tollefsen
IlyaL
Sampson Crowley
Michael J. Roberts
丶远方
WuLianN
donotloveshampo
Michael J. Roberts