Full explainer available in the MSEdgeExplainers repo
PWAs hosted within a user agent (UA) frame are able to declare which browser display mode best meets the needs of the application via the manifest file’s
display member. Currently, there are 4 supported values and their behaviors on Chromium browsers are described below:
fullscreen: All of the available display is used and no UA chrome is shown. This is implemented only for mobile devices running Android or iOS.
standalone: The web app looks like a standalone application. The title bar includes the title of the application, a web app menu button, and caption control buttons (minimize, maximize/restore, close).
minimal-ui: Similar to
standalone, except it also contains a back and refresh button.
browser: Currently, the same as
Developers want to create an immersive, native-like title bar for their desktop applications, but the display modes listed above do not support this. Instead, developers must shift content down below the reserved title bar area, which can create a cramped application space especially on portable devices with smaller screens.
The solution proposed in this explainer is broken down into multiple parts:
- A new display modifier option for the web app manifest -
- New APIs for developers to query the bounding rects and other states of the UA provided caption controls overlay which will overlay into the web content area through a new object on the
- New CSS environment variables to define the left and right insets from the edges of the window:
- A standards-based way for developers to define system drag regions on their content