要在浏览器中接收推送通知，核心是使用 push api 配合 service worker，流程包括注册 service worker、请求用户授权、订阅推送服务、后端发送加密消息；必须在 https 环境下运行（localhost 除外），且用户需主动授予通知权限。
要在浏览器中接收推送通知，核心是使用 Push API 配合 Service Worker，整个流程包括注册 Service Worker、请求用户授权、订阅推送服务、后端发送消息。关键点在于：必须在 HTTPS 环境下运行（本地 localhost 除外），且用户需主动授予通知权限。
注册并激活 Service Worker
Push API 依赖 Service Worker 来接收后台推送消息，因此第一步是注册一个有效的 Service Worker 脚本：
- 确保页面已通过 HTTPS 加载（生产环境必需）
- 调用 navigator.serviceWorker.register() 注册脚本，例如
register('/sw.js') - 注册成功后，Service Worker 会进入 installed → waiting → active 状态；只有 active 状态才能处理 push 事件
- 可在 sw.js 中监听
self.addEventListener('push', ...)来响应推送
获取用户通知权限并订阅
需要用户明确授权才能发送通知，且只有授权后才能向推送服务发起订阅请求：
- 调用 Notification.requestPermission() 获取权限（返回 'granted' / 'denied' / 'default'）
- 权限为 'granted' 后，使用 serviceWorkerRegistration.pushManager.subscribe() 创建订阅
- subscribe() 接收配置对象，至少包含
userVisibleOnly: true（表示所有推送都应触发可见通知） - 成功后返回一个 PushSubscription 对象，其中包含 endpoint（推送地址）、keys（用于加密 payload 的 p256dh 和 auth）
后端发送推送消息
前端订阅后，需将 PushSubscription 数据（尤其是 endpoint 和 keys）发送给你的服务器。后端用该信息向对应推送服务（如 Chrome 使用 Google 的 FCM，Firefox 使用 Mozilla 的 Autopush）发送加密 HTTP POST 请求：
- 请求地址即 subscription.endpoint，如
https://fcm.googleapis.com/fcm/send/xxx - 必须设置 Content-Encoding: aes128gcm（或
enc+crypto-key头，取决于浏览器版本） - 消息体需按 Web Push 协议加密（推荐使用 Node.js 的 web-push 库自动处理密钥和加密）
- 若只发通知不带数据，可省略 payload，但需确保
userVisibleOnly: true且后端不传无效字段
在 Service Worker 中显示通知
当推送到达时，Service Worker 的 push 事件被触发，此时可调用 self.registration.showNotification() 显示通知：
- showNotification() 第一个参数是标题，第二个是配置对象（
body、icon、badge、data等） - 可从 event.data 取出推送负载（前提是后端发送了加密 payload）
- 建议添加
click事件监听器，点击通知时打开指定页面：event.notification.addEventListener('click', () => clients.openWindow('/')) - 注意：Chrome 92+ 要求所有通知必须有
userVisibleOnly: true，否则会被静默丢弃
不复杂但容易忽略：HTTPS、权限检查、Service Worker 生命周期、加密头与 payload 格式，每一步出错都会导致推送失败。调试时优先检查浏览器控制台的 Service Worker 状态和 Network 中 push 请求的响应码。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
