HTML5 Push API需配合Service Worker和后端推送服务才能实现应用未打开时的促销提醒；用户须授权通知权限并完成订阅，订阅信息存于服务器，Service Worker监听push事件显示通知，后端通过浏览器推送服务（如FCM）加密发送消息。
HTML5 的 Push API 本身无法在应用未启动（即页面未打开、Service Worker 未激活）时直接接收推送，它依赖于浏览器的 Service Worker 持久运行机制。真正实现“应用未打开也能收到促销提醒”的关键，在于结合 Push API + Service Worker + 后端推送服务（如 Firebase Cloud Messaging 或 Web Push 服务器），并满足浏览器的启用条件。
前提条件：用户必须完成权限授权与订阅
用户首次访问网站时，需主动授予通知权限，并触发订阅流程，生成唯一的 Push Subscription 对象（含 endpoint、p256dh、auth 等字段）。该订阅信息需安全上传至你的服务器存储——这是后续精准推送的基础。
- 权限请求不能自动触发，必须由用户手势（如点击“开启促销提醒”按钮）触发
- 订阅成功后，即使关闭标签页或重启浏览器，只要用户未手动取消订阅，Service Worker 仍可在后台被系统唤醒以处理推送事件
- Chrome、Edge、Firefox 支持较完善；Safari 目前不支持标准 Push API（仅支持 APNs 配合 macOS/iOS 原生应用）
核心实现：Service Worker 必须注册并监听 push 事件
你需要一个独立的 sw.js 文件，在页面中注册，并在其中监听 push 事件。当推送到达时，浏览器会自动唤醒 Service Worker（即使网页已关闭），执行该事件回调：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 在
sw.js中调用self.registration.showNotification()显示系统级通知（标题、正文、图标、跳转链接等可自定义） - 通知点击后可通过
notificationclick事件控制页面行为，例如自动打开促销活动页：clients.openWindow('/promotion/summer-sale') - 确保
sw.js在 HTTPS 下托管（本地localhost也允许），否则注册失败
后端推送：向浏览器推送服务发送加密消息
你不能直接向用户设备发推送，而是要将消息发给浏览器厂商提供的推送服务（如 Google 的 FCM 或 Mozilla 的 Autopush）：
立即学习“前端免费学习笔记（深入）”；
- 使用保存的 Push Subscription 中的
endpoint，构造 HTTP POST 请求 - 消息体需用
Web Push Protocol加密（推荐使用 Node.js 的web-push库自动处理 VAPID 密钥、加密和发送） - 后端可按需触发推送，例如：运营人员在后台创建促销活动 → 服务器读取所有订阅该品类的用户 endpoint → 批量发送个性化推送
注意事项与常见限制
实际部署中需注意以下限制，否则推送可能静默失败：
- Chrome 可能对长时间未交互的 Service Worker 进行节流，但推送事件始终有最高优先级，不受影响
- 用户清除浏览器站点数据（或禁用通知）会自动取消订阅，需在后端定期清理失效 endpoint（通过推送返回的 404/410 状态判断）
- 推送消息体最大约 4KB（含加密开销），不适合传大量内容，建议只传轻量数据（如活动 ID），点击后再拉取详情
- 无网络时推送会缓存，待联网后送达；但若设备长期离线，部分推送服务可能丢弃过期消息（TTL 可配置）
