display_override

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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:

browser

The application opens in a conventional browser tab or new window, depending on the browser and platform. This is the default.

fullscreen

All of the available display area is used and no user agent chrome is shown.

minimal-ui

The application will look and feel like a standalone application with a minimal set of UI elements for controlling navigation. The elements will vary by browser.

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.

tabbed

The application can contain multiple application contexts inside a single OS-level window. Supporting browsers can choose how to display these contexts, but a common approach is to provide a tab bar to switch between them.

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.

Examples

In the example below, the browser will consider the following display-mode fallback chain in this order: fullscreen → minimal-ui → standalone.

json
{
  "display_override": ["fullscreen", "minimal-ui"],
  "display": "standalone"
}

Specifications

Specification
Manifest Incubations
# display_override-member

Browser compatibility

BCD tables only load in the browser

See also