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(即使网页已关闭),执行该事件回调:
- 在
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 可配置)
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











