notification构造函数必须在用户交互后调用，首次使用前需检查并请求权限；title为必填字符串，body为可选字符串，不支持html及换行符；chrome与safari兼容性差异大，safari忽略requireinteraction、tag等高级字段，ios基本不可用；permission为'denied'后无法再次弹窗申请。
Notification 构造函数必须在用户交互后调用
直接在页面加载时执行 new Notification() 会失败，浏览器会静默拒绝，控制台可能只显示 “Failed to execute 'show' on 'Notification': Permission denied” 或根本无提示。这是因为桌面通知属于高权限 API，必须由用户真实操作（如点击、触摸）触发才能申请权限并创建实例。
实操建议：
- 把通知逻辑放在
button.addEventListener('click', ...)或form.onsubmit等明确的用户事件回调里 - 首次使用前务必先检查并请求权限：
if (Notification.permission === 'default') { await Notification.requestPermission(); } - 不要在
window.onload、DOMContentLoaded或自动定时器中初始化通知
标题和正文由 Notification 构造函数的第一个参数对象控制
new Notification() 的第一个参数是配置对象，其中 title 是必填字段（字符串），body 是可选正文（也是字符串）。浏览器会原样渲染这两个字段，不支持 HTML 标签或换行符（\n 在多数浏览器中被忽略，仅部分 Chromium 版本支持 body 中的 \n 渲染为换行）。
示例：
new Notification('新消息', {
body: '您有一条未读私信',
icon: '/icon-192.png'
});
注意点：
-
title超过约 30 字符时可能被截断，取决于操作系统和通知中心样式 -
body长度建议控制在 100 字以内，iOS/macOS 对长度更敏感 -
icon路径必须是 HTTPS 或同源绝对路径，相对路径在某些上下文中会 404
Chrome 和 Safari 对 Notification API 的兼容性差异明显
Chrome（桌面）支持完整功能，但需注意：从 Chrome 93 起，requireInteraction: true 默认为 false，通知会自动消失；而 Safari（macOS/iOS）仅支持基础字段（title、body、icon），忽略 badge、tag、data 等高级选项，且 iOS 上几乎无法触发（系统级限制）。
关键判断：
- 不要依赖
requireInteraction: true实现“常驻通知”，Safari 完全不识别该字段 - 避免用
tag去去重或替换通知——Safari 忽略它，Chrome 中若 tag 相同且前一个未关闭，新通知会覆盖旧的，但行为不稳定 - 检测可用性不能只靠
'Notification' in window，还要加Notification.permission !== 'denied'
用户拒绝权限后，再次调用 requestPermission() 不会弹窗
一旦用户点击了浏览器弹窗中的“阻止”，Notification.permission 变为 'denied'，此后调用 Notification.requestPermission() 将直接 resolve 为 'denied'，不再显示任何 UI。这是不可逆的操作，只能引导用户手动到浏览器设置页开启。
实操建议：
- 首次请求前用文字说明通知用途（例如：“开启通知，不错过重要更新”），提升授权率
- 检测到
permission === 'denied'时，显示友好提示，并提供跳转浏览器设置的链接（如chrome://settings/content/notifications） - 不要反复自动重试请求，这会被视为骚扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
