j*ascript的notification api是什么_如何发送通知？_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

j*ascript的notification api是什么_如何发送通知？

2025-12-15

浏览次数：次

返回列表

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）：

QoQo

QoQo是一款专注于UX设计的AI工具，可以帮助UX设计师生成用户角色卡片、用户旅程图、用户访谈问卷等。

172 查看详情 QoQo

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: "授权成功！" });
    }
  });
}