useWebNotification

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

注意

注意：对于Mac系统的用户，需要在系统设置中启用Chrome的通知功能。 如果系统中没有启用Chrome的通知，即使前端页面请求权限成功，也不会显示通知。

Usage

实时编辑器

function Demo() {
  const { isSupported, show, close }
    = useWebNotification(true);
  return (
    <div>
      <p>支持状态: {JSON.stringify(isSupported)}</p>
      {isSupported
        ? (
          <div>
            <button
              onClick={() => {
                show("你好，来自 ReactUse 的问候！");
              }}
            >
              显示通知
            </button>
            <button onClick={close}>关闭</button>
          </div>
          )
        : (
          <div>您的浏览器不支持通知 Web API。</div>
          )}
    </div>
  );
}

结果

支持状态: true

API

useWebNotification

Returns

UseWebNotificationReturn

Arguments

参数名	描述	类型	默认值
requestPermissions	自动请求权限	boolean | undefined	-

UseWebNotificationReturn

参数名	描述	类型	默认值
isSupported	浏览器是否支持	boolean (必填)	-
show	展示函数	UseWebNotificationShow (必填)	-
close	关闭函数	() => void (必填)	-
ensurePermissions	请求权限函数	() => Promise<boolean | undefined> (必填)	-
permissionGranted	权限状态	React.MutableRefObject<boolean> (必填)	-

UseWebNotificationShow

Returns

Notification | undefined

Arguments

参数名	描述	类型	默认值
title	通知标题	string (必填)	-
options	通知选项	NotificationOptions | undefined	-