如何从已安装的 PWA 中隐藏顶部默认工具栏？

Question

问题陈述：将 PWA 作为独立应用程序安装后，它在应用程序顶部显示一个工具栏，其中包含很少的控件。我想在用户启动/使用应用程序时隐藏此工具栏。

到目前为止我尝试了什么？

我尝试了现有 Stack Overflow 问题中给出的以下解决方案（在

manifest.json

文件中），但没有一个对我有用。

• 尝试了所有

  display

  属性值

  standalone

  、

  fullscreen

  和

  minimal-ui

  。

• 也尝试过使用此配置的

  display_override

  属性。

  {
    "display_override": ["fullscreen", "minimal-ui"],
    "display": "standalone"
  }
  

• 尝试在

  ?fullscreen=true

  中添加

  start_url

  参数。

• 在

  window-controls-overlay

  尝试过

  display_override

  。

  {
    "display_override": ["window-controls-overlay"]
  }
  

• 使用多个浏览器尝试了这些配置，但每个浏览器的顶部都有此工具栏。

根据Chat GPT（我不确定这是否真实）：

从 Chrome 76 及更高版本开始，浏览器 UI 元素， 包括带有标题、菜单等的顶部栏..始终显示 启动 PWA 时，无论指定的显示模式如何

manifest.json

文件。

实施此更改是为了确保透明度并为用户提供 具有一致的浏览体验。结果，并不是 目前可以在启动时隐藏浏览器 UI 元素 渐进式网页应用。

我正在

Vue 3 + Vite

上运行 PWA（应用程序堆栈为

Windows 10

）并将其安装为 Chrome 应用程序（Chrome 浏览器版本为

117.0.5938.88

）。

是否有任何解决方案/解决方法可以永久隐藏此顶部工具栏？或者在启动应用程序时，它应该默认以全屏启动。

Answer 1

这个答案可能无法解决问题，但我尝试从文档本身收集信息-

参考1-

使用独立显示模式并为您的 PWA 提供专用的 窗口中，将显示成员添加到您的 Web 应用程序清单中并设置其 独立的价值：

参考2-

当您在 Web 应用程序中定义浏览器以外的显示模式时 清单，它仅在安装应用程序时适用。 与任何其他应用程序一样 其他网页，清单的显示成员在 PWA 时无效 未安装。可以在运行时检查显示模式来检测 是否安装了该应用程序。

参考3-

Web App Manifest 的 display_override 成员必须设置为 窗口控件覆盖。渐进式 Web 应用程序必须安装在 桌面操作系统。

根据文档中的参考资料，

display = standalone

和

display_overrides = window-controls-overlay

应该可以工作。 这可能是您在开发模式下进行测试的原因，而参考资料则指向安装应用程序，然后在运行时进行测试。

这是确保显示属性正常工作的方法。

此外，根据浏览器兼容性部分，此覆盖 API 与 Chrome 版本 105 及更高版本兼容。

希望这有帮助。