PWA 可以使用“display_override”属性处理特殊显示模式。
Thomas Steiner
Web 应用清单是一个 JSON 文件，用于向浏览器说明您的 Progressive
Web 应用，以及应用在用户的桌面设备或移动设备上安装后的行为方式。
通过 display 属性，您可以自定义应用启动时要显示的浏览器界面。例如，您可以隐藏
地址栏和 Chrome 浏览器。甚至还可以让游戏全屏启动。
简要回顾一下，下面是在撰写本文时指定的显示模式。
| 属性 | 使用 |
|---|---|
fullscreen |
打开没有任何浏览器界面的 Web 应用，并 占据整个可用的显示区域 |
standalone |
打开 Web 应用，让它具有独立式的外观和风格 应用。应用会在自己的窗口中运行，该窗口独立于浏览器，并且 会隐藏标准浏览器界面元素，如网址栏。 |
minimal-ui |
此模式与 standalone 类似，
控制导航的最小界面元素集（例如
返回并重新加载）。
|
browser |
标准浏览器体验。 |
这些显示模式遵循明确定义的回退链
("fullscreen" → "standalone" → "minimal-ui" → "browser")。如果浏览器不支持指定的
模式时，便会回退到链中的下一个显示模式。
display 属性的缺点
这种有线回退链方法存在三个问题：
- 如果某个浏览器不支持
"minimal-ui"，开发者必须重新进入"browser"显示模式才能请求"minimal-ui"。 - 开发者无法处理跨浏览器差异，例如，对于
"standalone"模式，浏览器是否在窗口中包含返回按钮。 - 当前行为导致无法引入新显示屏 因为标签页式应用模式等探索不具有 后备广告链中的自然位置。
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。