17370845950

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 协议兼容的服务）。

• 第一步：注册 Service Worker（需 HTTPS）：navigator.serviceWorker.register("/sw.js")
• 第二步：在 Service Worker 中监听 push 事件，调用 self.registration.showNotification() 弹出通知
• 第三步：前端获取 PushSubscription（含 endpoint、keys 等），发送给后端保存；后端用 WebPush 库（如 web-push for 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 被销毁；但长时间闲置后可能被浏览器终止，因此推送到达有一定延迟