display: "standalone" 作用是让已安装的PWA隐藏地址栏、工具栏和系统导航栏，实现类原生App的沉浸式启动体验；它仅在用户真正“添加到主屏幕”后生效，需配合start_url、apple-mobile-web-app-capable等配置才能稳定触发。
manifest.json里display: standalone到底起什么作用
display: "standalone" 不是让PWA“以独立窗口运行”的开关，而是告诉浏览器：当用户从主屏幕添加该PWA后，启动时**隐藏地址栏、工具栏和系统导航栏**，视觉上更像原生App。它不控制是否新开窗口，也不影响桌面端的窗口行为（比如是否可调整大小、是否显示系统边框）——这些由浏览器实现决定，且仅在安装后生效。
为什么加了display: standalone却还是跳转到浏览器标签页
常见原因有三个：
- 页面没通过
navigator.standalone检测或未被真正“安装”：Chrome/Edge 只有在用户点击地址栏“添加到主屏幕”并完成安装流程后才启用standalone模式；Safari（iOS/macOS）要求同时满足display: "standalone"+apple-mobile-web-app-capable: "yes"meta 标签 -
manifest.json未被正确关联：HTML 中缺少，或路径返回 404 / MIME 类型不是application/manifest+json - 服务端未提供 HTTPS：所有现代浏览器强制要求 PWA 的 manifest 和页面必须通过 HTTPS 提供（localhost 除外）
如何验证 display: standalone 是否生效
安装完成后，在已启动的 PWA 页面中打开开发者工具，执行：
console.log(navigator.standalone)
返回 true 表示当前运行在 standalone 模式；返回 undefined 或 false 则说明仍在浏览器标签页中运行。注意：navigator.standalone 在桌面 Chrome 中始终为 undefined —— 它只在 iOS Safari 和 Android Chrome 安装后的全屏上下文中存在。
另外检查 manifest 是否加载成功：chrome://apps（Chrome）或 Application → Manifest 面板里看 display 字段是否解析为 "standalone"，以及是否有 warning 提示图标缺失或 start_url 不可访问。
容易被忽略的配套配置项
单靠 display: "standalone" 不够，必须配齐以下几项才能稳定触发独立模式：
-
start_url必须是相对路径或同源绝对路径，且能返回 200（常见坑：写成/app/却没配服务端路由） -
scope要覆盖start_url，例如scope: "/"可支持所有子路径，但scope: "/app/"下访问/就会回退到浏览器 - iOS 必须加 meta 标签：
，否则无视display设置 - 推荐加上
theme_color和background_color，避免启动白屏或状态栏变黑
Android 上如果图标尺寸不对（比如缺 192x192 和 512x512 PNG），Chrome 可能拒绝安装，导致 standalone 永远不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
