跳至主要内容

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>
  );
}
結果
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-