html实现Notification通知推送_html浏览器Notification API消息通知【附代码】-html教程-PHP中文网

notification api 无法自动推送，必须用户主动点击触发且在https/localhost下运行；http、file://协议或权限被拒时均静默失败，最常见原因是非用户手势调用或环境不合规。

html实现notification通知推送_html浏览器notification api消息通知【附代码】

Notification API 不能“自动推送”，必须用户点过一次按钮才可能弹出通知；HTTP 页面、本地 file://、权限被拒后不处理，这三类情况会直接静默失败。

为什么 new Notification() 总是不弹窗

最常见原因不是代码写错，而是触发时机或环境违规：

在 window.onload、DOMContentLoaded 或定时器里直接调用 new Notification() —— 浏览器强制拦截，控制台可能无报错
页面跑在 http://（非 localhost）或 file:// 协议下 —— Notification.requestPermission() 直接返回 "denied"，且无法重试
用户之前点过“禁止”，此时 Notification.permission 永远是 "denied"，requestPermission() 不再弹窗，也无回调
Chrome 91+ 对非交互上下文更严格：哪怕你在 button.onclick 里调用了，但该 button 是 JS 动态插入且未绑定事件委托，也可能被判定为“无真实用户手势”

怎么正确请求并使用通知权限

必须由明确的用户点击触发，且要分步判断权限状态：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

先检查 Notification.permission：值为 "granted" 可直接发；"denied" 就别再调 requestPermission()；"default" 才需要申请
Notification.requestPermission() 是异步 Promise，必须用 await 或 .then() 拿结果，不能靠 setTimeout 猜
权限拿到后，new Notification() 的 title 是必填字符串，body 是可选字符串 —— 不支持 HTML、\n 在 Safari 和部分 Chrome 版本中会被忽略
图标 icon 必须是 HTTPS 或同源绝对路径，比如 /img/logo-192.png；相对路径如 ./icon.png 在 Service Worker 环境中大概率 404

document.getElementById('notifyBtn').addEventListener('click', async () => {
  if (Notification.permission === 'granted') {
    new Notification('新消息', { body: '您有1条未读', icon: '/img/icon-192.png' });
  } else if (Notification.permission === 'default') {
    const result = await Notification.requestPermission();
    if (result === 'granted') {
      new Notification('欢迎', { body: '通知已启用' });
    }
  }
});

后台运行时还能发通知吗

能，但有限制条件：

只要标签页没被完全关闭（哪怕最小化、切到其他标签页），主页面 JS 仍可执行，new Notification() 就能触发
但页面若进入冻结状态（如 Chrome 后台节流、iOS Safari 挂起），定时器和 fetch 回调可能延迟或失效，不能依赖 setInterval 做轮询
真正可靠的后台通知必须用 Service Worker + Push API：服务端发加密 push 消息 → SW 收到 push 事件 → 调用 self.registration.showNotification()
requireInteraction: true 在桌面 Chrome 有效（防止自动关闭），但 Safari 完全忽略，iOS 不支持；别把它当跨平台常驻方案

用户点了通知后怎么跳转页面

不能在 new Notification() 里直接跳，得靠事件监听和页面上下文配合：

必须在创建通知后**立刻**绑定 onclick，不能等几秒后再赋值：n.onclick = () => window.open('https://a.com/msg')
这个回调运行在当前页面上下文中，所以页面必须处于可见/未被冻结状态；如果用户从其他应用切回来再点通知，回调可能被丢弃
想确保跳转，建议在 data 字段里存目标 URL：new Notification('标题', { data: { url: '/chat/123' } })，然后在 onclick 中用 clients.openWindow()（Service Worker 环境）或 window.open()（主页面）打开
移动端 Safari 和所有 iOS 浏览器基本不支持 Notification API，别指望它在那里生效

最容易被忽略的是：权限一旦被用户手动设为 "denied"，前端就彻底失去重试能力，连提示都弹不出来。这时候要么引导用户去浏览器地址栏手动开启，要么降级用 alert() 或页面内 Toast 提示——但别把降级逻辑写在权限请求的 .catch() 里，因为 denied 状态根本不会进 catch。