useWebNotification

反应式 通知

¥Reactive Notification

通知 API 的 Web 通知接口用于配置并向用户显示桌面通知。

¥The Web Notification interface of the Notifications API is used to configure and display desktop notifications to the user.

示例

源代码演练场

Supported: false

The Notification Web API is not supported in your browser.

用法

¥Usage

提示

在应用发送通知之前，用户必须授予应用发送通知的权限。用户的操作系统设置也可能会阻止预期的通知行为。

¥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()

此可组合项还利用“@vueuse/shared”中的 createEventHook 工具：

¥This composable also utilizes the createEventHook utility from '@vueuse/shared`:

TypeScript

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...
})

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...
})