notification 的 icon 参数必须是绝对 url，相对路径会静默失败；需使用同源 https 绝对路径，service worker 中路径须相对于 sw 文件位置，且图标应为 png 格式、正方形尺寸并正确设置 mime 类型。
Notification 构造函数的 icon 参数必须是绝对 URL
浏览器只接受完整的、可跨域加载的图标地址，相对路径（如 "./icon.png" 或 "icons/notify.svg"）会静默失败——通知照常弹出，但图标为空白或回退到默认浏览器图标。这是因为 Notification 在页面上下文之外渲染，无法继承当前页面的 base URL 或资源上下文。
实操建议：
- 把图标放在同源的静态资源目录下（如
/static/notify-icon.png），用完整路径调用：new Notification('Hi', { icon: '/static/notify-icon.png' }) - 确保图标格式为 PNG（推荐 192×192 或 512×512 像素），部分浏览器对 SVG / WebP 支持不稳定
- 如果走 CDN 或外部域名，需确认该域名允许跨域加载（响应头含
Access-Control-Allow-Origin: *），否则控制台报Failed to load resource: net::ERR_FAILED
Service Worker 环境下 icon 路径解析更严格
当通知由 service worker 的 self.registration.showNotification() 触发时，icon 不再相对于主页面，而是相对于 service worker 文件所在位置。若 SW 注册在 /sw.js，而图标在 /assets/icon.png，就必须写成 /assets/icon.png，不能写 ../assets/icon.png（SW 不支持相对路径解析）。
常见错误现象：本地开发时图标正常，部署后消失——往往是因为构建工具重写了静态资源路径（如加 hash 后缀），但 JS 中写的仍是原始文件名。
实操建议：
- 构建后检查实际生成的图标 URL（如
/assets/icon.abc123.png），并在 JS 中硬编码或通过环境变量注入真实路径 - 避免在 SW 中拼接
location.origin + '/icon.png'，因为 SW 没有location对象 - 可在 SW 安装阶段预缓存图标：
cache.addAll(['/assets/icon.png'])，再在showNotification中直接引用该路径
HTTPS 是硬性前提，icon 不会加载 HTTP 资源
所有现代浏览器要求 Notification API 只能在安全上下文中使用。即使页面本身是 HTTPS，如果 icon 地址是 http://...，请求会被直接拦截，控制台显示 Blocked loading mixed active content，且不触发任何错误回调。
实操建议：
- 本地开发用
localhost（浏览器认为其等效于 HTTPS 上下文），但不要依赖127.0.0.1或自定义 host —— 部分浏览器不认 - 图标资源务必托管在 HTTPS 服务上；若用 GitHub Pages、Vercel、Cloudflare Pages 等平台，它们默认提供 HTTPS，只需确保链接协议为
https:// - 可通过
console.log(window.isSecureContext)快速验证当前是否满足条件
图标尺寸和 MIME 类型不匹配会导致静默降级
Chrome 和 Edge 对 icon 的宽高比容忍度较低：若图片被拉伸或裁剪后内容不可辨，可能直接丢弃图标；Firefox 则更倾向保留，但会警告 Image from [URL] has incorrect size or type。
实操建议：
- 优先提供 PNG 格式，尺寸设为正方形（如 192×192），并确保 HTTP 响应头中
Content-Type为image/png（某些静态服务器可能误设为text/plain） - 避免用 CSS 背景图或 canvas 动态生成图标——
icon只接受静态资源 URL - 可在 DevTools 的 Network 面板过滤
icon请求，确认状态码为 200、Size 不为 0、Preview 可见图像
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
