JavaScript通知推送_NotificationAPI

陆砚码

2026-09-23 • 👁 1人浏览过

答案：网页应用可通过JavaScript的Notification API在桌面显示系统级通知。首先检查浏览器是否支持，若支持则在用户交互时请求授权，授权通过后使用new Notification()创建通知，并可监听点击、关闭等事件。需注意仅在HTTPS环境下运行（localhost除外），避免频繁打扰用户，且移动端支持有限。封装工具函数可简化调用流程，提升开发效率。网页应用想要在用户桌面显示通知，比如收到新消息、提醒或系统公告，可以通过 JavaScript 的 Notification API 实现。这个 API 允许网站请求权限，并在用户的设备上弹出系统级通知，即使浏览器不在前台也能展示。如何使用 Notification API 要使用通知功能，需先检查浏览器是否支持 Notification 接口，然后请求用户授权，最后创建通知实例。 1. 检查浏览器支持大多数现代浏览器都支持 Notification API，但使用前最好判断是否存在：

if ('Notification' in window) {
  // 支持
} else {
  console.log('当前浏览器不支持通知');
}

2. 请求用户授权通知必须获得用户许可才能显示。调用

Notification.requestPermission()

会弹出权限请求框：

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    console.log('已授权通知');
  }
});

立即学习 “ Java免费学习笔记（深入） ”；用户可能选择 "granted"（允许）、"denied"（拒绝）或 "default"（未决定）。建议只在用户有明确交互（如点击按钮）时请求权限，避免影响体验。 3. 创建并显示通知授权通过后，可通过 new Notification() 发送通知：

if (Notification.permission === 'granted') {
  const notification = new Notification('标题', {
    body: '这是通知内容',
    icon: '/icon.png'
  });
}

Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载 Notification 构造函数接收两个参数：标题字符串和配置对象。常用配置项包括： body ：通知正文文本 icon ：通知图标路径 tag ：用于去重或更新通知的标识符 data ：附加数据，可在事件中读取 requireInteraction ：true 表示通知不会自动关闭 4. 监听通知事件通知对象提供几个事件回调，可用于追踪用户行为：

notification.onclick = function() {
  // 用户点击通知
  window.focus();
  self.close();
};

notification.onclose = function() {
  console.log('通知被关闭');
};

notification.onerror = function() {
  console.log('通知发生错误');
};

常见问题与注意事项实际使用中需要注意以下几点： HTTPS 环境下才能使用 Notification API，本地开发（localhost）除外用户拒绝权限后，再次请求可能无效，需引导用户手动开启移动端支持有限，部分 Android 浏览器行为不一致频繁发送通知会影响用户体验，应结合业务合理控制频率某些浏览器会合并相同 tag 的通知封装一个简单的通知工具函数可以封装一个通用方法，简化调用流程：

function showNotification(title, options = {}) {
  if (!('Notification' in window)) {
    alert('您的浏览器不支持通知');
    return;
  }

  if (Notification.permission === 'granted') {
    new Notification(title, options);
  } else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        new Notification(title, options);
      }
    });
  }
}

调用方式：

showNotification('新消息', { body: '您有一条未读消息' });

基本上就这些。Notification API 使用简单，关键是处理好权限逻辑和用户体验。

相关文章