纯html页面加不等于有启动画面，必须满足三个硬性条件：display为"standalone"或"fullscreen"、start_url为可离线缓存的相对路径、service worker已激活；background_color仅在fcp前作占位色，android chrome支持、ios safari忽略，且仅当manifest正确加载、无缓存、真机从主屏幕启动时才生效。
直接说结论：纯 HTML 页面加 <link rel="manifest"> 不等于有启动画面，必须满足三个硬性条件——display 是 "standalone" 或 "fullscreen"、start_url 是可离线缓存的相对路径、Service Worker 已激活。缺一不可，否则连白屏都不会变色。
为什么改了 manifest.json 的 background_color 却没反应
background_color 只在页面首次绘制（FCP）前起作用，是“占位色”，不是“启动画面主背景”。Android Chrome 会用它过渡，iOS Safari 完全无视。常见失效原因：
- manifest 文件没被正确加载：
<link rel="manifest" href="/manifest.json">路径错误，或服务器返回 404 / MIME 类型不是application/manifest+json - 浏览器缓存了旧 manifest：修改后需清空 Chrome DevTools → Application → Manifest 面板里的缓存，甚至卸载重装 PWA
- 页面还没触发 PWA 启动流程：仅刷新网页无效，必须从桌面/主屏幕图标启动（Chrome 地址栏点「安装」→ 安装后打开）
- 用了
rgb()或变量值：background_color只认十六进制（如"#333"），不支持transparent或命名色
icons 怎么配才真正生效
PWA 启动画面的图标不是随便放张 PNG 就行，浏览器会严格按 icons 数组里 sizes 和设备像素比匹配。关键实操点：
- 至少提供两个尺寸：
"192x192"和"512x512"，都必须是 PNG 格式（SVG/WebP 会被静默忽略） - 路径必须可被 fetch：推荐用根相对路径，如
"src": "/icons/icon-192.png"，不能是"./icons/..."或绝对 URL - 图标不能带透明通道（尤其 iOS）：导出时关掉 Alpha，用纯白底 + 实色 logo 更稳
- 检查是否被选中：Chrome DevTools → Application → Manifest → 展开 icons 列表，确认对应尺寸条目状态为“active”而非灰色禁用
本地开发时死活看不到 splash screen
localhost 下看不到启动画面，大概率不是配置问题，而是环境限制：
- HTTPS 强制要求：Chrome/Edge 在非 HTTPS 环境下禁用 splash screen（
http://localhost仅部分旧版支持，新版已逐步弃用） - 只在“从主屏幕启动”时触发：F5 刷新、新开标签页、DevTools 里 reload 都无效；必须真机测试（Android Chrome 或 iOS Safari 16.4+）
- Service Worker 注册时机太晚：如果
navigator.serviceWorker.register()写在window.addEventListener('load', ...)里，可能错过 splash 触发窗口期；应尽早注册（如<script></script>放在底部） - 未清除历史 PWA 缓存：Chrome 地址栏输入
chrome://apps→ 找到图标右键「移除」→ 重新访问站点 → 点地址栏「安装」→ 从桌面图标打开
最易被忽略的一点：splash screen 的持续时间不由你控制，它取决于页面首次 DOMContentLoaded 和 FCP 的时机；你唯一能影响的是让它别一闪而过——确保首屏 HTML 极简、关键 CSS 内联、JS 延迟加载，否则用户看到的只是 0.2 秒的色块，根本来不及识别品牌信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
