display_override
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
| Type | Array |
|---|
The display member is used to determine the developer's preferred display mode for a website. It follows a process where the browser falls back to the next display mode if the requested one is not supported. In some advanced use cases, this fallback process might not be enough.
The display_override member solves this by letting the developer provide a sequence of display modes that the browser will consider before using the display member. Its value is an array of display modes that are considered in-order, and the first supported display mode is applied.
Values
Display override objects are display-mode strings, the possible values are:
| Display Mode | Description |
|---|---|
fullscreen |
All of the available display area is used and no user agent chrome is shown. |
standalone |
The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar. |
minimal-ui |
The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser. |
browser |
The application opens in a conventional browser tab or new window, depending on the browser and platform. This is the default. |
window-controls-overlay |
This display mode only applies when the application is in a separate PWA window and on a desktop operating system. The application will opt-in to the Window Controls Overlay feature, where the full window surface area will be available for the app's web content and the window control buttons (maximize, minimize, close, and other PWA-specific buttons) will appear as an overlay above the web content. |
Example
In the example below, the browser will consider the following display-mode fallback chain in this order: fullscreen → minimal-ui → standalone.
{
"display_override": ["fullscreen", "minimal-ui"],
"display": "standalone"
}
Specifications
| Specification |
|---|
| Manifest Incubations # display_override-member |
Browser compatibility
BCD tables only load in the browser