如何使用HTML5中PushAPI配合服务器实现关闭网页后的即时消息推送-H5教程-PHP中文网

html5 push api实现网页关闭后推送需满足https、service worker注册成功、用户授权通知权限三大前提，缺一不可；前端完成注册、授权、订阅获取推送地址，后端用vapid加密发送，service worker监听push事件并调用shownotification显示通知。

如何使用html5中pushapi配合服务器实现关闭网页后的即时消息推送

HTML5的Push API确实能实现网页关闭后的消息推送，但必须满足几个硬性前提：HTTPS环境、Service Worker注册成功、用户明确授权通知权限。它不是“前端调个API就发出去”，而是一套从前端订阅、后端加密发送、到浏览器服务中转的完整链路。

前置条件必须全部满足

缺一不可，否则整个流程会在第一步就中断：

网站必须部署在HTTPS下（本地localhost除外），HTTP协议下Chrome/Firefox会直接禁用Notification API和Push API；
必须成功注册并激活一个Service Worker脚本（如/sw.js），且响应头为Content-Type: application/javascript；
通知权限请求Notification.requestPermission()必须由用户手势触发（例如点击“开启通知”按钮），不能在页面加载时自动调用；
用户已在系统级设置中允许该域名的通知（如macOS通知中心、Windows系统设置里未禁用）。

前端完成三件事：注册、授权、订阅

核心是让浏览器生成一个可被后端复用的“推送地址”。代码逻辑如下：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

调用navigator.serviceWorker.register('/sw.js')，确保返回registration对象；
用registration.pushManager.subscribe()发起订阅，传入VAPID公钥（需先Base64转码为Uint8Array）；
拿到返回的subscription对象（含endpoint、p256dh密钥、auth令牌），通过fetch POST发送给你的后端接口保存。

后端负责安全发送与Service Worker响应

前端只管“留门”，真正“送信”和“敲门”的是后端与Service Worker协作完成：

后端收到subscription后，存入数据库（建议用用户ID或设备标识关联）；
需要推送时，用web-push等库，配合VAPID私钥，向subscription.endpoint发起加密POST请求；
浏览器接收到后，自动触发Service Worker中的push事件——这里必须手动写self.registration.showNotification()，否则不会弹窗；
务必用event.waitUntil()包裹通知逻辑，防止Service Worker在显示前被系统终止。