如何在独立模式下删除桌面 PWA 窗口中的顶部栏？

Question

我正在将 Chrome 应用程序迁移到在桌面上运行的渐进式 Web 应用程序。

到目前为止，在 Chrome 中，我可以使用

Add to Applications

 操作进行安装，并通过单击创建的图标启动它。虽然我可以在 Macbook 上运行的 JavaScript 中使用 

window.resizeTo

 来调整窗口大小，但我的应用程序是用应用程序附带的操作顶栏框起来的：

在 Chrome Apps 中，可以通过在窗口创建函数（

frame: "none"

）中传递 

chrome.app.window.create()

 来删除此栏，我想知道是否有 

manifest.json

 选项、Service Worker 或简单的 JavaScript 代码来实现相同的功能，如果这是有可能的。

这是我正在使用的

manifest.json

文件：

{
  "short_name": "My App",
  "name": "The name of My App",
  "display": "standalone",
  "icons": [
    {
      "src": "images/myapp-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/?launchscreen=true"
}

谢谢！

Answer 1

目前，对于在 chrome 上运行的可安装 pwa，似乎最好的选择是

display_override

 属性，它启用 

Window Controls Overlay 功能。通过在manifest.json

中启用它，您可以按照

此处的指南以任何可能的方式自定义标题栏。

但是，仅该属性不会对您有太大帮助，因为您仍然需要根据应用程序的布局/UI 进行一些配置（编码）。好消息是，您可以开始应用简单的自定义作为背景颜色，或者使用像

menubas 或任何其他适合您应用程序用途的元素。

{
  "short_name": "My App",
  "name": "The name of My App",
  "display": "standalone",
  "display_override": ["window-controls-overlay"]
  "icons": [
    {
      "src": "images/myapp-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/?launchscreen=true"
}

提示：通过检查 chrome/edge 上的 pwa，转到“应用程序”选项卡，您会注意到“窗口控制覆盖”选项现已启用。还可以在 MacOS、Windows 和 Linux 上模拟窗口控件覆盖。

屏幕截图是我正在开发的一个 PWA Web 应用程序，非常简单的实现，我选择了一种不可见的标题栏“hack”，如 demo

应用程序中那样。