websocket与notification配合实现系统级消息提醒需满足三前提：https/localhost环境、用户主动授权通知权限、图标路径合法；收到消息后须检查notification.permission状态再创建通知，并可用tag去重、onclick聚焦、requireinteraction保显，safari需降级为标题闪烁或toast。
WebSocket 和 Notification 配合，能实现在用户离开页面或切换标签时，依然收到系统级消息提醒。关键不在“连上 WebSocket”，而在于权限、触发时机和环境是否合规。
必须满足的三个前提条件
缺一不可，否则通知根本不会弹出：
- HTTPS 或 localhost 环境：HTTP 站点下 Notification API 完全静默失效，WebSocket 连接可能建立成功，但 new Notification() 会直接不执行，也不报错；
- 用户主动授权通知权限：Notification.requestPermission() 必须由真实用户操作（如点击按钮）触发，自动调用（onload、setTimeout 延迟、WebSocket onopen 里调用）会被浏览器直接拒绝，返回 "denied"；
- 图标路径合法：icon 参数必须是 HTTPS 协议地址或 data URL，HTTP 图标路径在 Chrome 中被丢弃，通知仍会显示，但无图标。
WebSocket 收到消息后发通知的标准流程
不是一收到消息就 new Notification()，而是先确认权限状态，再安全创建：
- 监听 WebSocket 的 message 事件；
- 检查
Notification.permission === 'granted'； - 若为 'granted'，直接调用
new Notification(title, { body, icon, tag })； - 若为 'default'，说明用户还没选，此时不能自动申请——需引导用户点击一次按钮来触发 requestPermission()；
- 若为 'denied'，不再尝试，可提示用户去浏览器设置中手动开启。
增强体验的实用技巧
让通知不只是“弹一下”，还能真正被用户感知和响应：
- 用 tag 控制去重：相同 tag 的新通知会自动替换旧通知，避免刷屏，比如按会话 ID 或消息类型设 tag；
-
绑定 onclick 行为：点击通知后聚焦页面并滚动到对应消息位置，或跳转到聊天页：
notify.onclick = () => { window.focus(); /* 业务逻辑 */ };； - requireInteraction 设为 true：适合重要提醒（如订单支付、告警），通知不会自动消失，必须用户手动关闭；
- 降级方案要写实：Safari（iOS/macOS）完全不支持 Notification API，需检测后 fallback 到标题闪烁（修改 document.title）或页面内 Toast 提示。
常见失败原因速查
通知没弹出来？别急着改逻辑，先看这几点：
- 页面是否通过 Web 服务器访问（非 file:// 协议）；
- 当前标签页是否已被完全关闭（WebSocket 可能还连着，但 new Notification() 会静默失败）；
- 浏览器地址栏左端是否显示“已允许通知”图标（可点击管理权限）；
- 控制台是否有 CORS 或 Mixed Content 警告（影响 icon 加载，间接导致通知异常）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
