HTML5通知API怎么用_HTML5NotificationsAPI发送浏览器通知的方法-html教程-PHP中文网

HTML5通知API怎么用_HTML5NotificationsAPI发送浏览器通知的方法

雪夜

发布： 2025-11-21 17:57:05

原创

642人浏览过

答案：HTML5 Notifications API可在浏览器中发送系统级通知，需先请求用户授权。通过Notification.requestPermission()获取权限后，使用new Notification()创建通知，并可监听点击事件。应根据granted、denied、default状态优化提示逻辑，兼顾用户体验与兼容性，适用于消息提醒等场景。

html5通知api怎么用_html5notificationsapi发送浏览器通知的方法

HTML5 Notifications API 允许网页向用户发送系统级通知，即使浏览器最小化或在后台也能显示。这个功能适合用于消息提醒、新闻推送等场景。使用前需要用户授权，以下是具体使用方法。

请求通知权限

在发送通知前，必须先获取用户的许可。通过 Notification.requestPermission() 方法请求权限，该方法返回一个 Promise，状态为 "granted"（允许）、"denied"（拒绝）或 "default"（未决定）。

if ("Notification" in window) {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      console.log("已获得发送通知的权限");
    }
  });
}

登录后复制

发送浏览器通知

权限通过后，就可以使用 new Notification() 构造函数创建通知实例。

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

登录后复制

通知会出现在系统右下角（Windows）或其他系统默认位置。可监听通知的点击事件：

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

MagicStudio

图片处理必备效率神器！为你的图片提供神奇魔法

102

查看详情

notification.onclick = function() {
  window.focus(); // 点击通知后激活页面
};

登录后复制

处理不同权限状态

实际应用中应判断当前权限状态，避免频繁请求打扰用户。

granted：已授权，可直接发送通知
denied：用户已拒绝，无法发送，建议不再提示
default：用户未选择，可以请求一次权限

示例逻辑：

function showNotification() {
  if (!("Notification" in window)) {
    alert("您的浏览器不支持通知功能");
    return;
  }

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

登录后复制

基本上就这些。只要注意权限管理、用户体验和浏览器兼容性，Notifications API 是个很实用的功能。现代主流浏览器都支持，但部分移动端浏览器可能有限制。

以上就是HTML5通知API怎么用_HTML5NotificationsAPI发送浏览器通知的方法的详细内容，更多请关注php中文网其它相关文章！