manifest.json 的 start_url 和 display 影响启动画面是否显示：display 必须为 "standalone" 或 "fullscreen"，start_url 需为可离线缓存的相对路径，且需已注册 service worker；仅 background_color 和 icons 控制样式，图标须为 png、路径可访问、颜色为合法十六进制。
为什么 manifest.json 里的 start_url 和 display 会影响启动画面显示
启动画面（splash screen）不是靠 HTML 或 CSS 控制的，而是由 PWA 的 manifest.json 和浏览器原生逻辑共同触发。如果 start_url 指向一个未加载完的页面，或 display 设为 "browser"，系统根本不会展示启动画面。
必须满足三个条件：
- display 设置为 "standalone" 或 "fullscreen"
- start_url 是相对路径且可被离线缓存（比如 "./index.html"，不能是 "https://example.com/"）
- 页面首次加载时已注册 Service Worker，且 manifest.json 已被正确 link
manifest.json 中哪些字段真正控制启动画面样式
只有 background_color 和 icons 起作用，name 和 short_name 只影响标题栏。浏览器会自动从 icons 数组中选最接近设备屏幕密度和尺寸的图标（通常推荐至少包含 192x192 和 512x512 两个 PNG）。
注意点：
- background_color 必须是合法十六进制（如 "#ffffff"），不支持 rgb() 或变量
- 所有 icons 的 src 路径必须可被 fetch（建议用绝对路径或根相对路径，如 "/icons/icon-192.png"）
- 图标格式只认 PNG，不支持 SVG 或 WebP（部分安卓版本会静默失败）
为什么本地开发时看不到启动画面
Chrome 和 Edge 在非 HTTPS 环境下会禁用 splash screen，即使 localhost 也不行（除非用 http://localhost，但仅限某些旧版）。更关键的是：启动画面只在「从主屏幕启动」时触发，不是刷新页面或 F5 就能重现。
验证步骤： - 确保已通过 Chrome DevTools → Application → Manifest 面板确认 manifest 加载成功、无警告 - 在桌面 Chrome 中访问站点 → 地址栏点「安装」→ 安装后从桌面图标启动 - 移动端需用 Android Chrome，访问 → 点菜单 → 「添加到主屏幕」→ 从图标打开
Service Worker 不注册会导致启动画面一闪而过
启动画面持续时间取决于页面首次 DOMContentLoaded 的时机，但前提是 Service Worker 已激活并接管了页面。如果注册逻辑写在 window.addEventListener('load', ...) 里，可能错过最佳时机。
推荐写法： - 在 HTML 底部立即注册：
navigator.serviceWorker.register('/sw.js').catch(e => console.error('SW reg failed:', e));
- sw.js 中至少要响应 fetch 事件，并缓存 start_url 对应的 HTML
- 不要依赖 skipWaiting() 或 clients.claim() 来“强行”激活新 SW，这反而可能导致资源加载中断、画面提前消失启动画面本身没有 DOM 控制权，所有定制都发生在 manifest 声明阶段；最容易被忽略的是图标路径的可访问性——404 的 icon 会让整个 splash 回退为纯色背景，且控制台几乎不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
