Web推送测试客户端 - 订阅并接收测试通知
演示请求订阅Web Push,获得端点后可配合服务端发送测试推送。
UD5工具箱
new Notification()创建。push事件监听器接收消息并调用self.registration.showNotification()显示通知。没有SW,浏览器无法在页面关闭后接收推送消息。SW也负责处理通知点击事件,将用户引导回网站。
npx web-push generate-vapid-keys命令,或使用Node.js的web-push库,也可以用OpenSSL生成。公钥是Base64 URL-safe编码的65字节未压缩椭圆曲线点。
Notification.requestPermission()将不再显示权限对话框,而是静默返回denied。用户需要手动修改浏览器设置:点击地址栏左侧的锁图标 → 找到"通知" → 将权限改为"允许"。不同浏览器路径略微不同,但都在站点设置中。
tag是一个字符串标识符,用于分组和替换同类通知。如果发送的新通知与当前显示的通知有相同的tag,旧通知会被替换而不是堆叠多条。典型应用场景:同一聊天会话的多条消息,使用会话ID作为tag,通知栏始终只显示最新一条,避免刷屏。
http://localhost(非127.0.0.1,部分浏览器有差异);②注册Service Worker;③请求通知权限;④使用PushManager创建订阅;⑤将订阅对象发送到后端;⑥后端使用web-push库发送推送消息。推荐使用Chrome DevTools的Application面板查看Service Worker和Push订阅状态。
expirationTime字段指示过期时间(可能为null表示无明确过期时间)。浏览器推送服务可能会轮换密钥或清理不活跃的订阅。最佳实践:每次用户访问时调用registration.pushManager.getSubscription()检查订阅状态,使用pushsubscriptionchange事件监听订阅变更,及时将新订阅信息同步到后端服务器。
演示请求订阅Web Push,获得端点后可配合服务端发送测试推送。
测试浏览器通知权限和弹出,自定义标题、正文及图标,发送系统桌面通知,调试推送。
编写或粘贴 HTML 邮件代码,通过免费邮件发送 API 发送一份测试邮件给自己检查效果。
扫描当前页面已定义的自定义元素,显示其名称、类定义及生命周期方法。
粘贴RSS Feed URL或XML内容,解析为JSON格式并显示条目。
可视化展示发布/订阅模式的运作,添加订阅者和发布者,查看事件流。
通过分步表单填写应用名称、图标、主题色等,生成完整的 manifest.json 文件。
输入提交信息,立即检查是否符合 conventional commits 规范,给出修复建议。
填写上游服务器地址和路径规则,自动生成 Nginx 或 Apache 的反向代理配置文件。
配置Launch Handler使PWA应用在重复点击时聚焦到已开窗口,而不是新建窗口。
提供原始与修改后的JSON,自动生成符合RFC6902的JSON Patch或RFC7396 Merge Patch。
模拟 LocalStorage 或 IndexedDB 写满配额,测试错误处理并显示剩余空间估算。
上传 JSON 格式题库,随机抽取指定数量题目生成在线测验,自动评分和解析。
利用Web Speech API将语音实时转换为文字,支持多语言识别,输出结果可复制编辑。
定义字段模版和数量,批量生成仿真JSON数据,支持中文姓名、邮箱、电话等。
通过表单设置端口映射、卷挂载、环境变量等,生成 docker run 命令。
输入目标网址和要突出显示的文本,生成带 `#:~:text=` 的链接,精确指向页面内容。
粘贴服务器日志,快速根据正则或字符串过滤、高亮并统计出现频次。
粘贴 package.json 中的 scripts 部分,模拟执行并预览串联命令和环境变量的效果。
定义JSON Schema结构,自动填充符合类型与格式的随机数据,支持导出大文件用于压力测试。
编写 ESLint 规则代码,输入测试用例,立即查看是否通过及报错信息。
输入键值对,自动生成 Kubernetes ConfigMap YAML,支持文字和多行数据。
显示当前AudioContext的状态、采样率和输出延迟,并允许一键挂起或恢复。
设定观察阈值,实时查看目标元素进入/离开视口时的回调,学习交叉观察者API。
勾选Secure、HttpOnly、SameSite等属性,生成安全的Set-Cookie字符串,增强Web应用安全。
选择 DOM 元素,列出通过 addEventListener 绑定的所有事件及其类型和监听器(可用时)。
在支持的浏览器上弹出通讯录选择器,获取姓名、电话、邮箱等信息,体验联系人API。
粘贴一篇短文,自动生成几道简单的选择或填空题来测试理解。
逐步骤模拟SMTP握手:EHLO、MAIL FROM、RCPT TO、DATA,查看服务器响应。
上传或粘贴 webpack 等工具的 stats.json 文件,生成交互式树状图,直观查看各模块大小与占比。