网页通知测试

功能

• 显示当前权限状态，并且只在按钮点击时才申请权限（页面加载时不申请）
• ⚠️ 权限被拒绝后不再反复弹窗：明确告诉你去地址栏的站点设置里手动改回「允许」
• 发送一条通知，可设标题、正文、图标地址、标签 tag、静音、常驻
• 按钮（actions）最多两个，缺动作名或文字会被丢掉并提示，桌面 Chrome 之外多数平台忽略
• ⚠️ 逐条标注每个选项的平台差异：actions、requireInteraction、icon、tag、silent、大图分别在哪儿有效、在哪儿被忽略
• 说明 tag 的机制：同 tag 的新通知会顶掉旧的，空 tag 也算一个 tag
• 一个「关闭全部」按钮，并说清它只能关掉本页发出的、还活着的那些通知
• 本页发出过的通知有记录，含 tag 与按钮数量
• 全部在本机完成，不联网；不安全上下文（http）里会明确说明接口不可用

使用方法

1. 点「申请通知权限」，在浏览器弹出的询问框里选择允许（这一步必须由你点，页面不会自动申请）
2. 填标题、正文，按需要设图标、tag、静音、常驻与两个按钮
3. 点「发送通知」看它长什么样，然后对照下面的「平台差异」看哪些选项其实被忽略了
4. 通知没消掉就点「关闭全部」；如果之前拒绝过权限，按提示去站点设置里改回允许再刷新

常见问题

为什么按钮设了却没有出现？

因为 `actions` 只在部分平台生效：桌面 Chrome / Edge 支持（并且最多显示两个），多数移动端浏览器与 Safari 会忽略整个 actions —— 不显示按钮，也不报错。想验证就把这一页在桌面上用 Chrome 打开，再在手机上对比一次。

为什么权限被拒绝后再点申请没有反应？

因为一旦进入拒绝状态，`Notification.requestPermission()` 只会直接返回已拒绝，浏览器不再弹出询问框。这不是这个页面偷懒，是浏览器把决定权收走了。要改回来只能手动：点地址栏左边的站点设置（锁或图标）→ 找到「通知」→ 改成「允许」，然后刷新本页。

为什么我设了图标却看到的是应用图标？

这是 Windows 的行为：它不使用通知自带的 icon，而是显示发送方的应用图标。macOS 与多数 Linux 桌面才会把这个图标当通知图标用。所以「设了图标没看到」往往是平台行为，不是写错了。

为什么发了两条内容差不多的通知，前一条不见了？

因为两条用了同一个 `tag`。同 tag 的新通知会顶掉旧的那条，这是替换而不是并列堆放。而且空 tag 也是一个 tag，所以所有不填 tag 的通知会互相顶替 —— 想让多条同时留着，就给每条一个不同的 tag。