UD5工具箱
第一步：打开工具并检测环境
在浏览器中访问浏览器通知测试器页面。工具会自动检测当前浏览器是否支持 Notification API，并在页面顶部显示检测结果。如果你看到绿色的"支持"标识，说明当前浏览器可以正常使用通知功能。如果看到红色的"不支持"标识，建议切换到 Chrome、Firefox、Edge 或 Safari 16.4+ 等现代浏览器。同时，页面会显示当前的通知权限状态，确保在发送通知前了解权限情况。
第二步：获取通知权限
如果当前通知权限状态为"default"（未授权），你需要先请求通知权限。点击页面上的"请求权限"按钮，浏览器会弹出一个权限请求对话框，询问你是否允许该网站发送通知。选择"允许"后，权限状态会更新为"granted"（已授权），此时就可以正常发送通知了。如果之前已经拒绝过权限，浏览器不会再弹出权限请求对话框，你需要手动前往浏览器设置中重新开启通知权限。
第三步：配置通知内容
在通知配置区域，你可以设置通知的各项参数。首先填写通知的标题（title）和正文（body），这是通知最基本的内容。然后根据需要配置其他可选参数：icon 字段用于设置通知左侧显示的小图标 URL；image 字段用于设置通知展开后显示的大图 URL；tag 字段用于设置通知的标识标签，相同 tag 的通知会被替换而非叠加。你还可以设置文本方向（dir）为从左到右或从右到左，以及自定义振动模式。
第四步：使用快速预设
如果你想快速测试某种特定类型的通知，可以使用工具内置的快速预设功能。点击预设区域中的按钮，如"简单文本"、"带图标"、"带大图"、"需要交互"、"静默"或"振动"，工具会自动填充对应的参数配置。例如，点击"需要交互"预设后，requireInteraction 选项会被自动开启，通知会一直显示直到用户手动关闭。这些预设可以帮助你快速了解不同类型通知的参数差异和显示效果。
第五步：配置高级选项
在高级选项区域，你可以进一步精细控制通知的行为。requireInteraction 开关控制通知是否需要用户主动关闭，开启后通知不会自动消失；silent 开关控制通知是否静默发送，开启后通知不会播放声音也不会振动；renotify 开关控制当使用相同 tag 发送新通知时是否重新触发通知效果。合理使用这些高级选项可以模拟出各种实际应用场景中的通知行为。
第六步：发送通知并查看效果
所有参数配置完成后，点击"发送通知"按钮。工具会调用 Notification API 创建并显示通知，你会在屏幕右下角（Windows）或右上角（macOS）看到系统级的通知弹出。仔细观察通知的标题、正文、图标、图片等元素是否正确显示，声音和振动是否按预期触发。发送成功后，通知记录区域会新增一条记录，显示本次测试的配置和结果。
第七步：查看并复制代码
在页面的代码预览区域，你可以看到与当前配置对应的完整 JavaScript 代码。代码使用 Notification 构造函数创建通知，并包含了所有已配置的参数。点击"复制代码"按钮，代码会被复制到剪贴板。你可以将这段代码直接粘贴到你的项目中使用，无需手动编写。对于学习者来说，阅读生成的代码也是理解 Notification API 用法的好方法。
第八步：重置并进行下一轮测试
完成一轮测试后，点击"重置"按钮可以清空所有配置项，恢复到默认状态。你也可以直接修改部分参数进行下一轮测试，观察参数变化对通知效果的影响。建议系统性地测试各种参数组合，特别是在开发复杂的推送通知功能时，充分的测试可以避免上线后出现意外问题。测试过程中如果遇到通知没有显示的情况，请检查浏览器是否支持 Notification API、权限是否已授予、操作系统是否开启了勿扰模式。