HTML中Notification API请求权限并发送桌面通知的方法-html教程-PHP中文网

notification.permission有"granted"、"denied"、"default"三种状态；需在用户手势（如点击）后调用requestpermission()获取授权，不可在页面加载时检查或调用，且safari不支持new notification()。

html中notification api请求权限并发送桌面通知的方法

Notification.permission 的三种状态及判断时机

用户是否允许通知，由 Notification.permission 决定，它只有三个可能值："granted"、"denied"、"default"。注意："default" 不代表“还没点”，而是浏览器尚未记录用户选择（比如首次访问、隐身模式、或用户清除了站点数据），此时调用 Notification.requestPermission() 才会真正弹出授权框。

常见错误是页面一加载就检查 Notification.permission === "granted" 并直接发通知——如果值是 "default"，通知会静默失败，且不会触发任何提示或回调。

务必在用户有明确交互后（如点击按钮）再调用 requestPermission()
不要依赖初始页面加载时的 permission 值做逻辑分支
"denied" 状态下再次调用 requestPermission() 不会弹框，且返回 Promise 永远 resolve 为 "denied"

requestPermission() 必须由用户手势触发

Chrome、Edge、Firefox 等主流浏览器强制要求：调用 Notification.requestPermission() 必须发生在用户手势（如 click、tap、keydown）的事件处理函数中。在 setTimeout、fetch 回调、或页面 onload 里直接调用，会报错或被静默忽略。

示例错误写法：

document.addEventListener("DOMContentLoaded", () => {
  Notification.requestPermission(); // ❌ 无效，无手势上下文
});

正确写法：

button.addEventListener("click", async () => {
  const permission = await Notification.requestPermission();
  if (permission === "granted") {
    new Notification("你好", { body: "这是桌面通知" });
  }
});

不能用 onload、DOMContentLoaded 或定时器触发授权
移动端 Safari 对手势要求更严格，部分版本甚至不支持非 click/tap 的手势（如 touchstart 可能不被认可）
如果用户之前点过“拒绝”，这里返回的 permission 是 "denied"，无法再次唤起弹窗

new Notification() 的兼容性与基础参数

new Notification(title, options) 在 Chrome 58+、Firefox 47+、Edge 14+ 支持，但 Safari 完全不支持（包括 iOS 和 macOS）。调用前必须确保 Notification.permission === "granted"，否则抛出 DOMException: The user has blocked notifications。

皮卡智能

一款面向电商和商业视觉创作的AI图片处理平台，提供智能抠图、图片生成和视觉设计等能力，帮助提升图片制作效率。

下载

常用参数：

title：必填字符串，显示在通知顶部
options.body：正文文本（可选）
options.icon：图标 URL，建议使用绝对路径或同源资源，跨域图标会被忽略
options.tag：用于去重，相同 tag 的新通知会替换旧通知
options.silent：设为 true 可禁用声音（部分浏览器仍可能震动）

注意：options.data 和 options.actions 在部分浏览器中支持有限（如 Chrome 支持 actions，Safari 完全不支持），生产环境慎用。

监听 notificationclick 与 service worker 的关系

仅靠 new Notification() 发出的通知，点击后默认打开当前页面的 tab。若想实现「点击跳转到指定 URL」或「后台唤醒逻辑」，必须配合 service worker，并在其 notificationclick 事件中处理。

关键点：

页面中注册 service worker 是前提：navigator.serviceWorker.register("/sw.js")
通知必须在 service worker 的上下文中创建（即用 self.registration.showNotification()），才能响应 notificationclick
页面 JS 中的 new Notification() 创建的通知，无法在 service worker 中被监听到 click 事件
即使只用页面 API 发通知，也建议提前注册 service worker——否则未来升级为后台通知时会卡在注册阶段

这一步容易被跳过，结果就是通知能发，但点击无反应，或只能刷新当前页。