优先用原生notification api或自定义dom提示框；notification需https/localhost、用户授权且由点击触发，权限被拒后无法重试，应降级；自定义toast更可控，需用opacity/visibility+transition实现动画，避免display:none。
HTML5 本身不“调用插件”，而是通过标准 JavaScript 接口加载和使用 JS 代码——所谓“JS 插件”，本质是封装好的函数或类，你只需引入并调用即可。对新手来说，轻量实现消息提醒，优先选原生 API（Notification）或纯 HTML+CSS+JS 自定义提示框，而非引入第三方库。
怎么引入并触发 Notification API？
这是最接近“桌面级通知”的原生方案，但有硬性前提：必须运行在 HTTPS 或 localhost 下，且用户必须授权。
- 先检查支持：
"Notification" in window，不支持就别往下走 - 权限请求不能写在页面加载时就自动执行——浏览器会静默拒绝；必须由用户主动行为（如点击按钮）触发：
button.addEventListener("click", () => Notification.requestPermission()) -
new Notification()的icon路径必须是绝对 URL 或同源相对路径，404 会导致通知空白（但不报错） - 同一
tag的通知会复用（替换），避免重复弹窗；没设tag就算内容一样也会新弹一个
为什么推荐用自定义 DOM 提示框而不是 alert()？
alert() 是同步阻塞式弹窗，会卡住整个页面脚本，且样式无法修改、移动端体验差，仅适合调试。
- 自定义提示框（比如一个
<div id="toast"></div>）完全可控：可加动画、定位、图标、自动关闭 - 关键不是“怎么写 CSS”，而是“怎么控制显隐时机”：用
classList.add("show")触发过渡动画，再用setTimeout(() => el.classList.remove("show"), 3000)定时收起 - 注意：不要用
display: none硬切，否则过渡动画失效；应配合opacity+visibility+transition - 如果提示要跨页面存在（比如 SPA 中路由切换后仍显示），需把提示容器挂载到
document.body，而非某个组件内部
遇到 Notification 权限被拒怎么办？
用户点“禁止”后，Notification.permission 永远变成 "denied"，再次调用 requestPermission() 不会弹窗，也不会返回 Promise —— 这是浏览器策略，无法绕过。
立即学习“前端免费学习笔记（深入）”；
- 必须提前降级：在
requestPermission().then()中判断返回值，"denied"就切到自定义提示框或alert() -
"default"表示用户还没点过，此时你不该主动弹任何东西，等下次用户交互再试 - 别存 localStorage 记录“已请求过”就不再试——用户可能后来手动在浏览器设置里改了权限，应每次按需检查
Notification.permission状态
真正容易被忽略的点是：Notification 不是“一劳永逸”的功能，它依赖用户当前环境（HTTPS、焦点状态、权限设置），而 DOM 提示框看似简单，却要亲手处理动画完成回调、多次触发防重叠、键盘焦点管理等细节。选哪个，取决于你的场景是否真的需要“跳出浏览器”的强提醒——多数内部系统，一个右下角平滑弹出的 toast 就够用了。
