PWA 可以使用“display_override”属性来处理特殊的显示模式。
Thomas Steiner
网络应用清单是一个 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 正式化。