桌面 PWA 需要显示配置文件，不仅仅是 standalone

桌面 PWA 和原生应用竞争窗口管理注意力。当 PWA 在一个无品牌框架的浏览器中启动时，用户会把它和他们已经信任的应用做比较。display_override manifest 成员是 PWA 将这种比较从"足够好"升级到"原生级别"的方式。

为什么这件事重要

MDN Web App Manifest 的 display_override 成员让 PWA 按优先级指定后备显示模式。第一个支持的模式成为生效显示。这对桌面 PWA 体验很关键，因为：

• Window Controls Overlay 使用 display_override: ["window-controls-overlay"] 让 web 内容使用完整窗口表面，同时将最大化、最小化和关闭控件叠加在上面。没有这个条目，即使你的 PWA 已安装，Chrome 也不会启用 WCO。
• 未来显示模式（如标签式或自定义模式）只能通过 display_override 接受，而不是传统 display 成员。Chrome 文档明确说明，除非同时提供 display 以保持向后兼容，否则浏览器不会考虑 display_override。
• 桌面差异化 将 PWA 配置按目标平台（桌面 vs 移动）分离。移动优先的 PWA 可能在窄屏上优先考虑 standalone，但在桌面明确请求 WCO。

display_override 启用什么

OpenPWA 最重要的用例是 window-controls-overlay：

• **全表面生产力 PWA，希望游标无处不在，而标题栏不占用空间。
• 沉浸式创意应用 自己控制 canvas 布局，将窗口控件视为可环绕样式的叠加层。
• 定制体验 浏览器框架会破坏设计（仪表盘工具、自助服务终端界面、自定义壳）。

当启用时，WCO 让你的 PWA 感觉像平台专用应用，而不是窗口中的网页。这种区别驱动留存——用户保持与应用 OS 工作流集成的应用。

显示配置清单

使用这个评价标准交付原生应用 UX，而不是窗口中网页的桌面 PWA：

• [ ] 向后兼容：始终包含 display: "standalone" 成员和 display_override 一起，让旧浏览器优雅回退。
• [ ] 目标特异性：仅为明确设计叠加体验的桌面 PWA 使用 display_override: ["window-controls-overlay"]。
• [ ] 移动后备：对于支持桌面和移动的 PWA，考虑两个显示策略：移动优先（仅 standalone）和桌面优先（standalone + WCO 在 override 中）。
• [ ] CSS 集成：使用 WCO 时，添加 @media (display-mode: window-controls-overlay) 查询并从 navigator.windowControlsOverlay 读取 titlebar-area-x/y/height/width 几何，让布局适配叠加位置。
• [ ] 视口管理：调整 viewport-fit 和安全区域插入，确保 WCO 激活时内容不会渲染在窗口控件下。
• [ ] 后备测试：如果有 window-controls-overlay 作为第一个 override 选项，验证 PWA 功能在 standalone 模式下仍然有效。
• [ ] 平台文档：WCO 是 Chrome 专用显示模式——Safari 和 Firefox 可能不支持它，所以你的 display_override 后备链很关键。
• [ ] 身份一致性：确保你的 WCO 设计不会破坏"这是什么应用"的信任信号——图标、颜色和品牌仍然必须在不带标题栏的情况下清楚地识别应用。

对安装决策意味着什么

当用户安装桌面 PWA 时，他们决定是否将其与系统应用一起放在窗口管理工作流中。如果桌面上的 PWA 以 standalone 风格窗口启动（带标题栏、框架和 OS 保留控件），而竞争的原生应用在 WCO 模式运行，用户会注意到空间效率和集成度的回归。这是应用商店和市场在评测中揭示的安装后信任鸿沟。

从市场评审角度看，针对创意或生产力用例的桌面 PWA 应该根据是否采用 display_override 集成 WCO 来评估。没有 WCO 或平台专用显示配置的"桌面 PWA"看起来像意外重新打包到桌面的移动网页应用，而不是设计使然。

要避免什么

如果你的 PWA 不读取 WCO 几何或不为叠加调整布局，不要添加 display_override: ["window-controls-overlay"]。WCO 加上糟糕的碰撞处理比没有 WCO 更差——用户会在窗口控件下失去 UI 元素。

下一步

阅读 Chrome display override 文档，了解 Window Controls Overlay API 和全表面 web 应用的安全考虑。在桌面 PWA 市场列出之前，在 standalone 和 window-controls-overlay 模式下测试你的 PWA。