useWebNotification

リアクティブなNotification

Notifications API の Web Notification インターフェースは、ユーザーにデスクトップ通知を設定および表示するために使用されます。

使用法

::: tip アプリが通知を送信する前に、ユーザーはアプリケーションにその権限を与える必要があります。ユーザーのOS設定によっては、期待される通知の動作が妨げられることもあります。 :::

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 ユーティリティも利用しています:

import { useWebNotification } from '@vueuse/core'

const { onClick, onShow, onError, onClose, } = useWebNotification()
// ---cut---
onClick((evt: Event) => {
  // 通知の on:click イベントで何かを行う...
})

onShow((evt: Event) => {
  // 通知の on:show イベントで何かを行う...
})

onError((evt: Event) => {
  // 通知の on:error イベントで何かを行う...
})

onClose((evt: Event) => {
  // 通知の on:close イベントで何かを行う...
})