Search code examples
macosgoogle-chrome-appprogressive-web-appsmanifest.json

How to remove top bar in a desktop PWA window in standalone mode?

I'm in the process of moving a Chrome App to a Progressive Web App that runs on desktops.

So far, from Chrome I can install using the Add to Applications action and start it by clicking the created icon. While I can resize the window using window.resizeTo in JavaScript, running on a Macbook, my app is framed with the actions top bar that comes with applications :

enter image description here

In Chrome Apps, this bar can be removed by passing frame: "none" in the window creation function (chrome.app.window.create()), I wonder if there is a manifest.json option, Service Worker or simple JavaScript code to achieve the same thing, if that is ever possible.

Here is the manifest.json file I'm using :

{
  "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"
}

Thanks!

Solution

  • As for now, for a installable pwa running on chrome, it seems the best bet is the display_override property which enables the Window Controls Overlay feature. By enabling it in your manifest.json, you can customize the title bar in any ways possible by following the guidelines here.

    However, that property alone won't do you much, as you'll still have to go through some configuration (coding) depending on your app's layout / UI. The good news is that you could start apllying simple customization as a background color or go wild with something like menubars or any other element that fits you app's purpose.

    {
  "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"
}

    Tip: By inspecting your pwa on chrome / edge, go to Application tab and you'll notice that the Window Control Overlay option is now enabled. It´s also possible to simulate the window control overlay on MacOS, Windows and Linux.

    enter image description here

    The screenshot is a pwa web app I'm developing, very simple implementation where I opted for a sort of invisible title bar "hack" as in the demo application.

    Exploring more about the Window Control Overlay feature:

    https://developer.mozilla.org/en-US/docs/Web/API/Window_Controls_Overlay_API

    https://blog.logrocket.com/nativizing-pwas-window-controls-overlay/

    https://web.dev/articles/window-controls-overlay