通知API使用指南_桌面通知的权限管理-js教程-PHP中文网

通知API使用指南_桌面通知的权限管理

幻影之瞳

发布： 2025-12-04 20:16:02

原创

706人浏览过

桌面通知需先获用户授权，使用Notification.requestPermission()请求权限，根据返回的granted、denied或default状态决定是否创建new Notification发送消息，并在用户拒绝后引导其手动开启，避免频繁打扰。

通知api使用指南_桌面通知的权限管理

桌面通知功能可以让网页应用在用户的桌面上弹出消息提醒，提升用户体验。要实现这一功能，需正确使用浏览器的通知 API 并妥善管理权限。以下是如何使用通知 API 及进行权限管理的实用指南。

请求通知权限

在发送桌面通知前，必须先获得用户的许可。浏览器不会默认允许网页发送通知，需通过 Notification.requestPermission() 主动请求。

调用 Notification.requestPermission() 会弹出浏览器原生的权限提示框
用户可选择“允许”、“拒绝”或关闭对话框（表示未决定）
返回 Promise，结果为 'granted'、'denied' 或 'default'

示例代码：

if (window.Notification) {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      new Notification('你好！通知已启用');
    }
  });
}

登录后复制

检查当前权限状态

每次使用通知前应检查当前权限状态，避免重复请求或在无权限时尝试发送。

Notification.permission 返回当前权限值
'granted'：已授权，可直接发送通知
'denied'：用户已拒绝，无法发送，且不能再次请求
'default'：未做选择，可再次请求权限

建议在页面加载或用户触发操作时检查：

function showNotification() {
  if (Notification.permission === 'granted') {
    new Notification('最新消息提醒');
  } else if (Notification.permission === 'default') {
    Notification.requestPermission();
  }
  // 若为 'denied'，则不执行任何操作
}

登录后复制

发送桌面通知

当权限被授予后，可通过 new Notification() 创建通知实例。

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

224

查看详情

构造函数接收标题字符串和配置对象（可选）
配置项包括 body（正文）、icon（图标）、tag（分组标识）等
通知会在系统托盘区域显示，点击后可触发事件

示例：

const notification = new Notification('新邮件到达', {
  body: '你有一封来自同事的重要邮件',
  icon: '/images/email-icon.png'
});

notification.onclick = () => {
  window.focus();
  notification.close();
};

登录后复制