JavaScript推送通知分Notification API（前台主动通知）和Push API（后台离线推送），前者需HTTPS和用户授权后调用new Notification()，后者依赖Service Worker监听push事件并配合后端WebPush服务。
JavaScript 实现推送通知，核心依赖两个 API：Notification API（用于桌面通知）和 Push API（配合 Service Worker 实现真正“后台推送”）。用户常混淆二者——Notification API 只能主动弹出通知，不能在页面关闭后收消息；真正的“推送”必须用 Push API + Service Worker + 后端服务（如 Firebase 或自建 Push 服务）。下面分两部分说明：如何用 Notification API 请求权限并显示通知，以及实现可离线接收的推送通知的关键步骤。
Notification API：请求权限并显示通知
这是最基础、无需后端即可运行的通知方式，适用于用户在当前页面或标签页处于焦点/后台时主动触发提示（比如新消息提醒、表单提交成功）。
- 调用
Notification.requestPermission()请求用户授权，返回 Promise，状态为"granted"、"denied"或"default" - 只有权限为
"granted"时才能创建通知实例：new Notification(title, options) - 常见选项包括
body（正文）、icon（图标路径）、badge（小图标）、tag（去重标识）等 - 注意：Chrome 等浏览器要求页面必须是
https协议（localhost 除外），否则requestPermission会直接拒绝
示例代码：
if ("Notification" in window) {
Notification.requestPermission().then((result) => {
if (result === "granted") {
new Notification("你好！", {
body: "这是一条测试通知",
icon: "/icon.png"
});
}
});
}
Push API：实现真正的“推送通知”（含后台唤醒）
要让网页在关闭状态下仍能收到服务器发来的通知（比如微信网页版离线消息），必须使用 Push API。它依赖 Service Worker 持久监听 push 事件，并配合后端的 Push 服务（如 WebPush 协议兼容的服务）。
立即学习“Java免费学习笔记（深入）”；
- 第一步：注册 Service Worker（需 HTTPS）：
navigator.serviceWorker.register("/sw.js") - 第二步：在 Service Worker 中监听
push事件，调用self.registration.showNotification()弹出通知 - 第三步：前端获取 PushSubscription（含 endpoint、keys 等），发送给后端保存；后端用 WebPush 库（如
web-pushfor Node.js）向浏览器厂商的推送服务（如 Google FCM、Mozilla Autopush）发送加密消息 - 关键限制：用户必须已授予 Notification 权限，且浏览器支持 Push API（Chrome、Edge、Firefox 支持，Safari 不支持）
权限检查与降级处理
不要假设权限一定存在。每次使用前应检查当前状态：
-
Notification.permission返回当前权限状态（"granted"/"denied"/"default"） - 若为
"default"，说明用户尚未选择，可引导点击按钮再次请求（但浏览器通常只允许一次弹窗，后续需用户手动在设置中开启） - 若为
"denied"，无法恢复，只能提示用户前往浏览器设置页手动启用（例如 Chrome：设置 → 隐私和安全 → 网站设置 → 通知） - 建议：将“请求通知权限”按钮放在用户有明确预期的场景（如登录后开启消息提醒），避免自动弹窗被拦截
常见问题与注意事项
实际开发中容易踩坑：
- 本地测试请用
localhost或 HTTPS 站点；HTTP 非本地域名下 Notification 和 Push 均不可用 - Service Worker 的作用域（scope）需正确配置，确保能控制目标页面
- Push 消息体大小有限制（Chrome 约 4KB），敏感数据不应放其中，推荐仅传 ID，通知触发后再拉取详情
- 移动端 Android Chrome 支持良好，iOS Safari 完全不支持 Push API，Notification API 也受限（仅前台可用）
- 用户关闭标签页 ≠ Service Worker 被销毁；但长时间闲置后可能被浏览器终止，因此推送到达有一定延迟
