Preparing for the display modes of tomorrow

A Web App Manifest is a JSON file that tells the browser about your Progressive
Web App and how it should behave when installed on the user’s desktop or mobile device.
Via the display property, you can customize what browser UI is shown when your app i…


This content originally appeared on web.dev and was authored by Thomas Steiner

A Web App Manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device. Via the display property, you can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Games can even be made to launch full screen. As a quick recap, below are the display modes that are specified at the time this article was written.

Property Use
fullscreen Opens the web application without any browser UI and takes up the entirety of the available display area.
standalone Opens the web app to look and feel like a standalone app. The app runs in its own window, separate from the browser, and hides standard browser UI elements like the URL bar.
minimal-ui This mode is similar to standalone, but provides the user a minimal set of UI elements for controlling navigation (such as back and reload).
browser A standard browser experience.

These display modes follow a well-defined fallback chain ("fullscreen" → "standalone" → "minimal-ui" → "browser"). If a browser does not support a given mode, it falls back to the next display mode in the chain.

Shortcomings of the display property

The problem with this hard-wired fallback chain approach is threefold:

  • A developer cannot request "minimal-ui" without being forced back into the "browser" display mode in case "minimal-ui" is not supported by a given browser.
  • Developers have no way of handling cross-browser differences, like if the browser includes or excludes a back button in the window for "standalone" mode.
  • The current behavior makes it impossible to introduce new display modes in a backward compatible way, since explorations like tabbed application mode do not have a natural place in the fallback chain.

The display_override property

These problems are solved by the display_override property, which the browser considers before the display property. Its value is a sequence of strings that are considered in-order, and the first supported display mode is applied. If none are supported, the browser falls back to evaluating the display field.

The display_override property is meant to solve special corner cases. In almost all circumstances the regular display property is what developers should reach for.

In the example below, the display mode fallback chain would be as follows. (The details of "window-control-overlay" are out-of-scope for this article.)

  1. "window-control-overlay" (First, look at display_override.)
  2. "minimal-ui"
  3. "standalone" (When display_override is exhausted, evaluate display.)
  4. "minimal-ui" (Finally, use the display fallback chain.)
  5. "browser"
{
  "display_override": ["window-control-overlay", "minimal-ui"],
  "display": "standalone",
}

The browser will not consider display_override unless display is also present.

To remain backward compatible, any future display mode will only be acceptable as a value of display_override, but not display. Browsers that do not support display_override fall back to the display property and ignore display_override as an unknown Web App Manifest property.

The display_override property is defined independently from its potential values.

Browser compatibility

The display_override property is supported as of Chromium 89. Other browsers support the display property, which caters to the majority of display mode use cases.

Acknowledgments

The display_override property was formalized by Daniel Murphy.


This content originally appeared on web.dev and was authored by Thomas Steiner


Print Share Comment Cite Upload Translate Updates
APA

Thomas Steiner | Sciencx (2021-02-25T00:00:00+00:00) Preparing for the display modes of tomorrow. Retrieved from https://www.scien.cx/2021/02/25/preparing-for-the-display-modes-of-tomorrow/

MLA
" » Preparing for the display modes of tomorrow." Thomas Steiner | Sciencx - Thursday February 25, 2021, https://www.scien.cx/2021/02/25/preparing-for-the-display-modes-of-tomorrow/
HARVARD
Thomas Steiner | Sciencx Thursday February 25, 2021 » Preparing for the display modes of tomorrow., viewed ,<https://www.scien.cx/2021/02/25/preparing-for-the-display-modes-of-tomorrow/>
VANCOUVER
Thomas Steiner | Sciencx - » Preparing for the display modes of tomorrow. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/25/preparing-for-the-display-modes-of-tomorrow/
CHICAGO
" » Preparing for the display modes of tomorrow." Thomas Steiner | Sciencx - Accessed . https://www.scien.cx/2021/02/25/preparing-for-the-display-modes-of-tomorrow/
IEEE
" » Preparing for the display modes of tomorrow." Thomas Steiner | Sciencx [Online]. Available: https://www.scien.cx/2021/02/25/preparing-for-the-display-modes-of-tomorrow/. [Accessed: ]
rf:citation
» Preparing for the display modes of tomorrow | Thomas Steiner | Sciencx | https://www.scien.cx/2021/02/25/preparing-for-the-display-modes-of-tomorrow/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts