javascript怎样操作浏览器通知？_javascript的Notification API如何请求权限？-js教程-PHP中文网

javascript怎样操作浏览器通知？_javascript的Notification API如何请求权限？

幻影之瞳

发布： 2025-12-18 23:15:07

原创

700人浏览过

JavaScript 使用 Notification API 发送浏览器通知，需用户授权且仅限 HTTPS 或 localhost；调用 requestPermission() 请求权限，检查 permission 状态后创建通知，并监听 onclick 等事件。

javascript怎样操作浏览器通知？_javascript的notification api如何请求权限？

JavaScript 操作浏览器通知主要靠 Notification API，它允许网页向用户发送系统级通知（即使页面不在前台）。但必须先获得用户授权，且仅在安全上下文（https:// 或 localhost）中可用。

如何请求通知权限？

调用 Notification.requestPermission() 发起权限请求。该方法返回一个 Promise，在现代浏览器中推荐用 await 处理：

用户首次访问时会弹出浏览器原生权限提示（如“是否允许此网站发送通知？”）
返回值是 "granted"、"denied" 或 "default"（已废弃，现统一为 "prompt"）
不能自动触发，必须由用户手势（如点击按钮）触发，否则会被静默拒绝

示例：

document.getElementById('notifyBtn').addEventListener('click', async () => {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') {
    new Notification('你好！', { body: '这是一条通知' });
  } else {
    console.log('用户拒绝了通知权限');
  }
});

登录后复制

如何检查当前权限状态？

使用 Notification.permission 可读取当前状态，无需再次请求：

立即学习“Java免费学习笔记（深入）”；

"granted"：已授权，可直接发通知
"denied"：被拒绝，后续调用 requestPermission() 不会再弹窗
"prompt"：未决定，可调用 requestPermission() 弹出授权框

建议每次发通知前都检查该值，避免无意义调用。

芝士饼

芝士饼是一个一站式AI原生应用开发平台，简单几步即可完成应用的创建与发布。

查看详情

如何创建和自定义通知？

权限获准后，用 new Notification(title, options) 创建通知：

title：必填，显示在通知顶部的标题文本
options：对象，常用字段包括：
  – body：正文内容
  – icon：图标 URL（建议 192×192 或 512×512 PNG）
  – badge：小图标（用于 Android 或桌面通知栏摘要）
  – requireInteraction：设为 true 可阻止通知自动关闭

注意：部分选项（如 sound）已被主流浏览器移除，不再支持。

如何监听通知生命周期事件？

通知实例提供几个事件回调，可用于增强交互：

onclick：用户点击通知时触发（常用于跳转页面）
onshow：通知成功显示后触发
onerror：通知因权限/参数等问题失败时触发
onclose：用户手动关闭或超时自动关闭后触发

示例：

const n = new Notification('新消息', { body: '点击查看' });
n.onclick = () => window.focus(); // 点击后聚焦当前窗口

登录后复制

基本上就这些。关键点是：权限需用户主动授予、必须 HTTPS/localhost、不能绕过交互触发、通知内容要简洁明确。

以上就是javascript怎样操作浏览器通知？_javascript的Notification API如何请求权限？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Javascript如何实现语音合成_如何让浏览器说话？ JavaScript如何操作音视频媒体元素？ Javascript的闭包是什么_它有哪些实际用途？ JavaScript WeakMap是什么_它有什么特殊用途？ javascript如何发送HTTP请求_fetch API的基本用法是什么？