PWA 可以使用“display_override”属性来处理特殊显示模式。
Thomas Steiner
Web 应用清单是一个 JSON 文件，用于告知浏览器您的渐进式 Web 应用，以及该应用在安装到用户的桌面设备或移动设备上时应如何运行。
通过 display 属性，您可以自定义应用启动时显示的浏览器界面。例如，您可以隐藏地址栏和浏览器框架。甚至可以使游戏以全屏模式启动。
简要回顾一下，以下是撰写本文时指定的显示模式。
| 属性 | 使用情形 |
|---|---|
fullscreen |
打开 Web 应用，但不显示任何浏览器界面，并占据整个可用显示区域。 |
standalone |
打开 Web 应用，使其外观和风格与独立应用类似。该应用在自己的窗口中运行，与浏览器分开，并隐藏标准浏览器界面元素（例如网址栏）。 |
minimal-ui |
此模式与 standalone 类似，但仅向用户提供用于控制导航（例如返回和重新加载）的一组最少的界面元素。
|
browser |
标准浏览器体验。 |
这些显示模式遵循明确定义的后备链（"fullscreen" → "standalone" → "minimal-ui" → "browser"）。如果浏览器不支持给定的模式，则会回退到链中的下一个显示模式。
display 属性的缺点
这种硬编码的后备链方法存在以下三个问题：
- 如果给定浏览器不支持
"minimal-ui"，开发者无法请求"minimal-ui"，否则会被强制返回到"browser"显示模式。 - 开发者无法处理跨浏览器差异，例如浏览器是否在
"standalone"模式的窗口中包含返回按钮。 - 当前的行为使得无法以向后兼容的方式引入新的显示模式，因为标签页式应用模式等探索性功能在回退链中没有自然的位置。
display_override 属性
这些问题可通过 display_override 属性解决，浏览器会先考虑 display_override 属性，然后再考虑 display 属性。其值是一个按顺序考虑的字符串序列，系统会应用第一个受支持的显示模式。如果都不受支持，浏览器会回退到评估 display 字段。
在以下示例中，显示模式回退链如下所示。
（本文不详细介绍 "window-controls-overlay"。）
"window-controls-overlay"（首先，请查看display_override。）"minimal-ui""standalone"（当display_override耗尽时，评估display。）"minimal-ui"（最后，使用display后备广告链。）"browser"
{
"display_override": ["window-controls-overlay", "minimal-ui"],
"display": "standalone",
}
为了保持向后兼容性，未来的任何显示模式都只能作为 display_override 的值，而不能作为 display 的值。不支持 display_override 的浏览器会回退到 display 属性，并将 display_override 视为未知的 Web 应用清单属性而忽略。
实用链接
致谢
display_override 属性由 Daniel Murphy 正式确定。