PWA 可以使用“display_override”属性处理特殊显示模式。
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。