vueuse 中文文档

Vue useWebNotification 显示桌面通知

Vue useWebNotification 显示桌面通知,当用户打开我们的网页后又去浏览其他网页,这时你发送一个桌面通知可以把用户来回到我们的网页。

代码示例

import { useWebNotification } from '@vueuse/core'
const {
  isSupported,
  notification,
  show,
  close,
  onClick,
  onShow,
  onError,
  onClose,
} = useWebNotification({
  title: '你有新的消息', //标题
  body:"Hello, 欢迎使用 www.itxst.com",
  dir: 'auto',// "auto" | "ltr" | "rtl" 对齐方式
  lang: 'zh-CN',//语言
  renotify: true, //是否一直显示消息直到用户关闭
  tag: 'test',//标签
})

//发送消息通知
const sentMessage=()=>{
  if (isSupported.value)
  show()
}

//相关事件
onClick((evt: Event)=>{
 console.log('用户点击了消息')
 //当前网页获取焦点
 window.focus();
})

onShow((evt: Event)=>{
 console.log('显示了消息')
})

onError((evt: Event)=>{
 console.log('通知异常')
})

onClose((evt: Event)=>{
 console.log('用户关闭了消息')
})

在线例子

例子

类型定义

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>
  ensurePermissions: () => Promise<boolean | undefined>
  permissionGranted: Ref<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>
Catalog
vueuse 入门 State 状态 Elements 元素 Browser 浏览器 useBluetooth 蓝牙函数 useBreakpoints 网页网格断点 useBroadcastChannel 跨网页通讯 useBrowserLocation 响应式location useClipboard 粘贴复制 useColorMode 皮肤颜色切换 useCssVar 修改css变量 useEventListener 事件监听 useEyeDropper 取色器 useFavicon 设置浏览器窗口图标 useFileDialog 文件选择器 useFileSystemAccess 操作本地文件 useFullscreen 全屏模式 useGamepad 游戏手柄 useImage 图片 useMediaControls 视频音频控制 useMediaQuery 媒体查询 useMemory 响应式内存信息 useObjectUrl 响应式对象URL usePerformanceObserver 性能指标 usePermission 判断 api 权限 usePreferredColorScheme 获取系统主题 usePreferredContrast 色彩对比度 usePreferredDark 黑暗主题 usePreferredLanguages 用户系统语言 useScreenOrientation 屏幕方向API useScreenSafeArea 屏幕安全区域 useScriptTag 动态加载js文件 useShare 分享功能 useStyleTag 动态注入CSS useTextareaAutosize textarea自适应高度 useUrlSearchParams 获取设置URL参数 useTextDirection 文字方向 useTitle 修改网页标题 useVibrate 手机振动功能 useWakeLock 防止屏幕变黑或锁屏 useWebNotification 显示桌面通知 useWebWorker 创建多线程任务 useWebWorkerFn 多线程函数 Sensors 感应监测