🔔 Web Push 订阅 Demo

测试浏览器 Push 通知订阅功能

0️⃣ VAPID 密钥配置

使用 npx web-push generate-vapid-keys 生成密钥对

公钥（用于订阅）

私钥（用于发送真实推送）

⚠️ 私钥仅用于测试，实际生产环境应保存在后端服务器

1️⃣ 注册 Service Worker

2️⃣ 请求通知权限

3️⃣ 订阅推送

4️⃣ 订阅信息

5️⃣ 测试推送

📝 自定义推送内容

标题

内容

图标 URL（可选，留空使用默认）

大图 URL（可选）

角标 URL（可选，小图标显示在系统托盘）

点击跳转 URL

需要用户交互（通知不会自动消失）

静音（不播放声音和震动）

⚙️ 高级选项：操作按钮

最多支持 2 个操作按钮（某些浏览器可能不支持）

📝 事件日志