无需登录 数据私有 本地保存

Web推送测试客户端 - 订阅并接收测试通知

15
0
0
0

Web推送测试客户端

生成VAPID密钥 · 订阅推送 · 发送测试通知 · 调试Web Push

VAPID 密钥生成器

使用 ECDSA P-256 曲线生成符合规范的 VAPID 密钥对，用于应用服务器标识。

点击上方按钮生成 VAPID 密钥对

推送订阅状态
未订阅
通知权限
检测中...
Service Worker
检测中...
需要HTTPS或localhost环境，且浏览器支持Push API
发送测试通知
自定义通知参数并发送
"发送测试通知"使用Notification API直接发送；"通过SW发送"模拟真实Push事件（需SW已注册）。
通知发送历史

  • 暂无通知发送记录

常见问题与知识点
🔍 什么是 Web Push API？
Web Push API 是一套浏览器标准，允许应用服务器在用户不打开网页的情况下向浏览器发送推送消息。它由两部分组成：Push API（消息传递通道）和 Notifications API（消息展示）。即使用户关闭了网页，只要浏览器在运行，就能接收到推送通知。这对于提升用户再参与度非常有效，广泛应用于新闻更新、消息提醒、营销活动等场景。
🔑 什么是 VAPID 密钥？为什么需要它？
VAPID（Voluntary Application Server Identification）是一种自愿性的应用服务器标识协议。它使用一对 ECDSA P-256 密钥对（公钥+私钥）来标识你的应用服务器。公钥用于浏览器订阅时，私钥用于服务器发送推送消息时签名。使用VAPID可以：① 标识发送方身份；② 防止推送服务被滥用；③ 让推送服务商能够联系开发者。大多数浏览器推送服务（如Firebase Cloud Messaging、Mozilla的autopush）都要求使用VAPID。
⚙️ Web Push 和 Notification API 有什么区别？
Notification API 只能从当前打开的页面发送通知，页面关闭后就无法发送。它不需要Service Worker。
Web Push API 允许服务器在任意时间向浏览器推送消息，即使页面未打开。它依赖Service Worker在后台接收push事件并显示通知。简单来说：Notification API是"页面内通知"，Web Push是"真正的远程推送"。本工具同时支持两种方式的测试。
📡 为什么需要 Service Worker？
Service Worker 是运行在浏览器后台的独立线程，不依赖任何页面。Web Push的消息到达浏览器时，由Service Worker接收push事件，然后调用self.registration.showNotification()来显示通知。没有Service Worker，浏览器就无法在页面关闭后接收推送消息。Service Worker还必须注册在HTTPS或localhost环境下。
📋 Push Subscription 包含哪些信息？
当用户订阅推送后，浏览器会生成一个PushSubscription对象，包含：
① endpoint：推送服务提供商的URL（如fcm.googleapis.com），服务器向此URL发送推送请求；
② keys.p256dh：客户端生成的ECDH公钥，用于加密推送消息；
③ keys.auth：客户端生成的认证密钥，用于消息验证。
这些信息需要发送到你的应用服务器保存，用于后续发送推送消息。
🌐 浏览器兼容性如何？
Web Push API 在主流浏览器中得到了广泛支持：Chrome（桌面+Android）✅、Edge ✅、Firefox（桌面+Android）✅、Opera ✅、Safari（macOS 13+）✅。需要注意的是：iOS Safari 从iOS 16.4开始支持Web Push（需将网站添加到主屏幕）。IE浏览器不支持。使用前请检查'PushManager' in window。
🛠️ 如何在生产环境中使用Web Push？
生产环境使用Web Push的典型流程：
1. 使用本工具生成VAPID密钥对；
2. 在网站中注册Service Worker；
3. 用户点击订阅后，将PushSubscription发送到后端保存；
4. 后端使用web-push（Node.js）等库，用VAPID密钥签名并发送推送消息到endpoint；
5. Service Worker接收push事件并展示通知。推荐使用npm的web-push包简化后端实现。
🔒 安全和隐私注意事项
① VAPID私钥必须保存在服务器端，绝不能暴露给客户端；② 推送消息内容应加密传输（Web Push标准已内置加密）；③ 用户必须主动授予通知权限，不能自动弹出权限请求；④ 提供清晰的退订机制；⑤ 不要在推送中包含敏感个人信息；⑥ 遵守各推送服务商的使用条款和频率限制。
🔧 相关工具