javascript如何实现推送通知_Push API的基本步骤是什么

JavaScript推送通知需结合Push API和Notifications API：前者接收后台消息，后者前台显示；依赖HTTPS、Service Worker注册、用户授权及VAPID身份验证，前后端协同完成订阅与推送。

JavaScript 实现推送通知依赖浏览器的 Push API 和 Notifications API，两者配合使用：Push API 负责接收服务器发来的后台消息（即使页面关闭），Notifications API 负责在前台显示通知。整个流程需要服务端配合，且必须在 HTTPS 环境下运行（本地 localhost 除外）。

1. 检查浏览器支持并请求用户授权

先确认当前环境是否支持 Push API 和 Notification API，并向用户申请通知权限：

• 调用 Notification.requestPermission() 获取用户授权（返回 "granted"、"denied" 或 "default"）
• 检查 'serviceWorker' in navigator 和 'PushManager' in window
• 权限必须是 "granted" 才能继续注册推送服务

2. 注册 Service Worker 并获取 PushSubscription

Push 消息必须通过 Service Worker 接收，所以需先注册一个 SW 脚本：

• 使用 navigator.serviceWorker.register('/sw.js') 注册服务工作线程
• 注册成功后，调用 registration.pushManager.subscribe(options)
• options 至少包含 { userVisibleOnly: true }（Chrome 强制要求），推荐加上 applicationServerKey（VAPID 公钥）用于身份验证
• 成功后返回 PushSubscription 对象，含 endpoint、keys.p256dh 和 keys.auth —— 这些需发送给你的服务器保存

3. 后端保存订阅信息并发送推送

前端把 PushSubscription 发给服务端（如 POST 到 /api/subscribe），后端需：

标签： javascript java js 前端 node.js json node 浏览器 app 后端 win