useWebNotification

Demo

支持情况: false

你的浏览器不支持通知 Web API。

用法

const {
  isSupported,
  notification,
  show,
  close,
  onClick,
  onShow,
  onError,
  onClose,
} = useWebNotification({
  title: 'Hello, VueUse world!',
  dir: 'auto',
  lang: 'en',
  renotify: true,
  tag: 'test',
})

if (isSupported.value)
  show()

这个组合式还利用了 @vueuse/shared 中的 createEventHook 工具:

TypeScript

onClick((evt: Event) => {
  // 处理通知的点击事件...
})

onShow((evt: Event) => {
  // 处理通知的显示事件...
})

onError((evt: Event) => {
  // 处理通知的错误事件...
})

onClose((evt: Event) => {
  // 处理通知的关闭事件...
})

onClick((evt) => {
  // 处理通知的点击事件...
})
onShow((evt) => {
  // 处理通知的显示事件...
})
onError((evt) => {
  // 处理通知的错误事件...
})
onClose((evt) => {
  // 处理通知的关闭事件...
})

类型声明

显示类型声明

typescript

export interface WebNotificationOptions {
  /**
   * Notification 的标题，只读属性，指示通知的标题。
   *
   * @default ''
   */
  title?: string
  /**
   * Notification 的正文字符串，指定在构造函数的 options 参数中。
   *
   * @default ''
   */
  body?: string
  /**
   * Notification 的文本方向，指定在构造函数的 options 参数中。
   *
   * @default ''
   */
  dir?: "auto" | "ltr" | "rtl"
  /**
   * Notification 的语言代码，指定在构造函数的 options 参数中。
   *
   * @default DOMString
   */
  lang?: string
  /**
   * Notification 的 ID（如果有），指定在构造函数的 options 参数中。
   *
   * @default ''
   */
  tag?: string
  /**
   * 作为通知图标使用的图像的 URL，指定在构造函数的 options 参数中。
   *
   * @default ''
   */
  icon?: string
  /**
   * 指定是否在新通知替换旧通知后应通知用户。
   *
   * @default false
   */
  renotify?: boolean
  /**
   * 一个布尔值，指示通知是否应该保持活动状态，直到用户点击或解除通知，而不是自动关闭。
   *
   * @default false
   */
  requireInteraction?: boolean
  /**
   * Notification 的 silent 只读属性指定通知是否应该是静音的，即，无论设备设置如何，都不应发出声音或振动。
   *
   * @default false
   */
  silent?: boolean
  /**
   * 为具有振动硬件的设备指定振动模式以发出的震动模式。
   * 一个振动模式，如 Vibration API 规范中所指定的那样。
   *
   * @see https://w3c.github.io/vibration/
   */
  vibrate?: number[]
}
export interface UseWebNotificationOptions
  extends ConfigurableWindow,
    WebNotificationOptions {
  /**
   * 如果权限未授予，则在 onMounted 时请求权限。
   *
   * 可以禁用，并在之后调用 `ensurePermissions` 以授予权限。
   *
   * @default true
   */
  requestPermissions?: boolean
}
/**
 * 用于响应式地使用 Web 通知
 *
 * @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: Ref<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>