HTML通知仅为前端展示层，真后台推送需Service Worker+Web Push API；Notification API仅支持页面开启时的桌面通知，iOS Safari完全不支持；Web Push需HTTPS、用户授权、后端VAPID推送服务配合。
HTML通知本身不等于消息推送，它只是最终展示层；真要实现“关着页面也能收消息”，必须搭配 Service Worker + Web Push API，否则就是个网页内弹窗。
Notification API 只能发桌面通知，不是系统级推送
很多人以为调用 new Notification() 就算“做了推送”，其实它只在浏览器窗口焦点外时显示桌面通知，一旦用户关闭标签页或退出浏览器，就彻底失效。它不依赖网络请求、不走推送服务、也不需要后端参与——纯前端同步行为。
- 适用场景：页面还开着，想提醒用户（比如聊天新消息、表单提交成功）
- 常见错误：在 HTTPS 页面里直接调用
Notification.requestPermission()却没等用户点击触发，导致 Chrome 拒绝授权（权限请求必须由用户手势触发，如click事件） - 兼容性坑：iOS Safari 完全不支持
NotificationAPI，连降级提示都看不到；Android Chrome 支持但需 HTTPS - 权限状态只有三种：
granted、denied、default；default不代表“还没点”，而是用户关闭了弹窗——此时再调一次requestPermission()会直接返回denied
Web Push API 才是真正的“后台推送”能力
要让页面关掉后还能收到消息，必须走 Web Push 流程：注册 Service Worker → 订阅推送服务（获得 endpoint）→ 后端用 VAPID 密钥向 Google/Firebase 或 Mozilla 的推送服务发请求 → 浏览器唤醒 Service Worker → 调用 self.registration.showNotification() 显示通知。
- 硬性前提：HTTPS 环境（localhost 除外），否则
navigator.serviceWorker.register()直接失败 - 关键区别：推送订阅的
endpoint是临时的，每次重新订阅都会变；不能存一次用 forever - Android 上表现较好，但 iOS Safari 仍不支持 Web Push（包括
PushManager和showNotification在 SW 中调用） - 常见报错：
Failed to execute 'showNotification' on 'ServiceWorkerRegistration': Notification permission denied——说明虽然 SW 注册成功，但用户没给网站通知权限，得先在页面里补上Notification.requestPermission()
HTML5 转 APP 后的通知，本质是绕过浏览器限制
打包成安卓/iOS App 后，Notification API 失效，你实际用的是原生容器桥接的厂商推送 SDK（如华为 HMS、小米 MiPush）。这时候 HTML 页面只是 WebView 容器里的内容，通知逻辑完全由原生层控制。
立即学习“前端免费学习笔记（深入）”；
- 必须对接各厂商通道，配置
CID、token、签名证书等参数，不能只靠前端 JS - 调试难点：厂商 token 获取时机不稳定，常因 WebView 初始化慢于原生推送模块而丢失首次注册
- 别指望 PWA 方案在 iOS 上落地：Safari 不支持
PushManager，也没法注册有效的Service Worker来接收推送 - 如果用 Cordova/ Capacitor，注意插件版本兼容性——老版
cordova-plugin-local-notification只支持前台通知，后台需换@capacitor/push-notifications并启用原生配置
真正卡住项目的往往不是代码怎么写，而是权限链路没理清：用户授权通知 ≠ 推送服务订阅成功 ≠ 厂商 token 上报完成 ≠ 后端密钥配对正确。每一步都有独立失败可能，得逐层验证，不能只盯着 new Notification() 是否弹出来。
