跳到主要内容

useWebNotification

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

注意

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

Usage​

实时编辑器

function Demo() {
  const { isSupported, show, close }
    = useWebNotification(true);
  return (
    <div>
      <p>Supported: {JSON.stringify(isSupported)}</p>
      {isSupported
        ? (
          <div>
            <button
              onClick={() => {
                show("Hello, world from ReactUse!");
              }}
            >
              Show Notification
            </button>
            <button onClick={close}>Close</button>
          </div>
          )
        : (
          <div>The Notification Web API is not supported in your browser.</div>
          )}
    </div>
  );
}
结果
Loading...

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-