Notification API仅负责前端主动显示弹窗，不支持后台接收消息；Web Push需Service Worker持久监听并调用showNotification()，且依赖VAPID、PushManager订阅及后端合规推送协议。
HTML通知（Notification API）和消息推送（Web Push）不是一回事，前者是前端单次触发的桌面弹窗，后者是后端主动下发、Service Worker 持久接收的完整推送链路。混淆这两者，会导致权限请求成功却收不到远程消息、或误以为注册了 Service Worker 就能绕过用户授权。
为什么 Notification.requestPermission() 成功了，却收不到服务器发来的消息
因为 Notification API 只负责「显示」，不负责「接收」。它必须由页面 JavaScript 主动调用 new Notification() 才能弹出；而真正的「推送消息」需要浏览器后台的 Service Worker 接收并手动调用 showNotification()。如果你只写了权限请求和弹窗逻辑，但没注册 Service Worker、没调用 PushManager.subscribe()、也没在后端走 Web Push 协议（含 VAPID），那服务器根本没法把消息投递到你的设备。
- 常见错误现象：
Notification.permission === 'granted'为 true，但用户关闭标签页后，再也收不到任何新消息 - 本质区别：
Notification是“你喊一声，系统帮你播”，Push是“你留个地址（Push Endpoint），别人随时能寄信” - 兼容性注意：iOS Safari 完全不支持
PushManager，即 Web Push 在 iPhone 上不可用；但NotificationAPI 在 iOS 上也受限（仅支持前台页面触发）
什么时候该用 Notification，什么时候必须上 Web Push
判断依据只有一个：消息是否需要在页面关闭、标签页失焦、甚至浏览器最小化时仍能抵达用户。
- 用
Notification就够了：用户正在操作页面，比如表单提交成功、实时聊天收到新消息、文件上传完成——这些场景下页面始终存活，你直接调用new Notification()即可 - 必须走 Web Push：需要唤醒用户，比如订单支付成功提醒、定时任务完成、离线状态下他人@你——此时只有 Service Worker 能在后台运行并响应推送事件
- 性能影响：
Notification几乎无开销；Web Push 需要额外维护 Service Worker 生命周期、处理订阅更新、实现 VAPID 密钥管理，且推送服务（如 FCM）有配额限制
serviceWorker.register() 后为什么 push 事件不触发
Service Worker 注册成功 ≠ 推送功能就绪。它只是第一步，后续至少还有三道关卡没过：
立即学习“前端免费学习笔记（深入）”；
-
navigator.serviceWorker.ready必须 resolve 后，才能调用registration.pushManager.subscribe()，否则报错Registration is not ready - 订阅时若未传
userVisibleOnly: true和有效的applicationServerKey（VAPID 公钥），Chrome 会静默失败，subscribe()返回 rejected Promise 且不抛异常 - 后端发送推送时，必须使用正确的
Content-Encoding: aes128gcm和Authorization头，否则推送服务直接丢弃请求，不会返回错误，浏览器也收不到任何事件 - 调试建议：在 Service Worker 文件里加
self.addEventListener('push', e => console.log('push received', e))，再用cURL模拟推送，确认事件是否到达
移动端 PWA 中 Notification 显示异常的典型原因
Android Chrome 对 PWA 的通知行为做了额外限制，不是所有「看起来像 PWA」的页面都能正常弹出桌面通知。
- 必须满足 PWA 安装条件：有合法
manifest.json、注册了 Service Worker、HTTPS 环境，且用户至少访问过两次以上（Chrome 的安装提示阈值） - Android 上
requireInteraction: true会被忽略，通知默认 4 秒自动关闭；iOS 则完全不支持该选项 - 图标路径必须是绝对 URL（如
/icons/notify.png），相对路径或 blob URL 在部分 Android 版本中无法加载 - 容易被忽略的坑：很多安卓厂商（华为、小米）会默认关闭第三方网页的推送权限，需引导用户手动进入「设置 > 应用管理 > 浏览器 > 通知管理」开启
真正难的从来不是写几行 new Notification()，而是搞清「谁在什么时机、以什么身份、通过什么通道、把什么数据交到谁手上」。Web Push 的每个环节都可能断在无声处，尤其当用户换了一台手机、升级了系统、或者只是清空了浏览器缓存——这些地方没有报错，但消息就是停在路上。
