Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 511
Ken Bellows Avatar asked May 23 '18 13:05

Ken Bellows


People also ask

What PWA can not do?

Such apps have limited access to software and hardware features. For instance, they do not support features that are not maintained by HTML5. Additionally, for iOS devices, PWA doesn't yet work with Face ID and Touch ID, Siri, ARKit, In-App payments, and Apple's other primary features.

What is hybrid PWA?

Hybrid Apps are called hybrid because they are built with web technologies (HTML, CSS, and JavaScript) but allow access to platform features that a browser can't provide. Progressive Web Apps are essentially websites that load instantly on any connection, regardless of whether you're online or offline.

Is PWA still a thing?

Today, Progressive Web Apps are accessible via smartphones and desktops across a variety of browsers (For iOS users, only Safari can be used to add a PWA to the home screen). PWAs also support many of the same features or functions that native apps support.

Why is PWA called progressive?

The first part of the term – Progressive – means that the user experience is enhanced gradually based on the browser's capabilities. Essentially this means that the web application works well in older browsers but can utilise newer technologies to enhance the experience if the user is using a browser supporting them.


1 Answers

What you're looking for is display in the manifest (see https://developer.mozilla.org/en-US/docs/Web/Manifest#display).

"display": "fullscreen" indicates you want to completely hide the browser chrome.

However, support of specific display modes varies between browsers and platforms. For example Windows 10 (via Edge) only supports browser and standalone right now, with support for fullscreen and minimal-ui coming in Redstone 5.

like image 126
mezzode Avatar answered Oct 04 '22 00:10

mezzode