Search code examples
javascriptprogressive-web-apps

Is it possible to make a frameless PWA?


Something that slightly bugs me about progressive web apps on the desktop is that they retain the browser chrome/frame when you "install" them/pin them to your desktop. I love that the menu bar, bookmarks, etc. are gone, since the point is to feel like a native app rather than something in my browser, but the frame feels like one last thing standing in the way of a truly native feel. For comparison, consider the "frameless window" concept from nw.js or Electron.

So is there any way, e.g. an option in the manifest.json file, to hide the frame as well?

My research indicates that the answer is currently "no", so I guess a followup question would be, has there been any discussion of it? Are there concerns preventing it, or has it just not come up at all? Any info would be great.

Edit: To be clearer, I don't mean simply launching in a separate window with its own icon, that's just what desktop installed PWAs are. I mean removing/hiding the title bar as well, with the app icon and name and the minimize/maximize/close buttons, plus the thin frame border that runs around the outside of the entire window. All this stuff:

lodash desktop PWA with browser frame selected


Solution

  • Now there comes with a new mode: window-controls-overlay

    enter image description here

    see https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override#values

    See YouTube intro here: https://www.youtube.com/watch?v=tj0_4pcrj7s&t=1114s

    And also: https://web.dev/window-controls-overlay