javascript的notification api是什么_如何发送通知？-js教程-PHP中文网

javascript的notification api是什么_如何发送通知？

紅蓮之龍

发布： 2025-12-15 21:26:02

原创

326人浏览过

Notification API 是浏览器提供的系统级通知接口，需用户授权且仅限 HTTPS 或 localhost 环境；先调用 requestPermission() 获取许可，再用 new Notification() 创建通知，注意兼容性与频率限制。

javascript的notification api是什么_如何发送通知？

Notification API 是浏览器提供的一套接口，用来在用户设备上显示系统级通知（即使网页不在前台也能弹出）。它不依赖第三方服务，但需要用户明确授权，且只在 HTTPS 环境或 localhost 下可用。

用户授权是前提

浏览器默认禁止自动发送通知，必须先请求用户许可：

调用 Notification.requestPermission() 弹出权限提示框
返回值是 "granted"、"denied" 或 "default"（未选择）
建议在用户有明确意图时再请求（比如点击“开启提醒”按钮），避免被直接拒绝

创建并显示通知

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

title 是必填的字符串，显示为通知标题
options 可选对象，常用字段包括：
  • body：正文内容
  • icon：图标 URL（建议 192×192 或 512×512 PNG）
  • badge：小徽章图标（用于桌面通知栏聚合）
  • tag：唯一标识符，相同 tag 的新通知会替换旧通知

简单示例代码

把下面代码放在按钮点击事件里运行（确保已启用 HTTPS）：

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319

查看详情

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

if (Notification.permission === "granted") {
  new Notification("你好", {
    body: "这是一条测试通知",
    icon: "/icon.png"
  });
} else if (Notification.permission !== "denied") {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      new Notification("你好", { body: "授权成功！" });
    }
  });
}

登录后复制