Thedisplay manifest member is used to specify your preferred display mode for the web application. The display mode determines how much of the browser UI is shown to the user when the app is launched within the context of an operating system. You can choose to show the full browser interface or hide it to provide a more app-like experience.

Syntax

/* Keyword values */"display": "fullscreen""display": "standalone""display": "minimal-ui""display": "browser"

Values

display

A string with keyword values. If not specified, the default valuebrowser is used. The keyword values include:

fullscreen

Opens the app with browser UI elements hidden and uses the entirety of the available display area. Use this value for apps where fullscreen engagement is crucial and desired. For example, use it for a game app that can take up the entire screen without any browser controls visible, providing a fully immersive gaming experience.

Note:Thefullscreen value of the manifest'sdisplay member works separately from theFullscreen API. Thefullscreen display mode changes the state of the entire browser window to full screen, while the Fullscreen API only makes a specific element within the window go full screen. Therefore, a web app can be infullscreen display mode whileDocument.fullscreenElement isnull andDocument.fullscreenEnabled isfalse.

standalone

Opens the app to look and feel like a standalone native app. This can include the app having a different window and its own icon in the app launcher. The browser will exclude UI elements such as a URL bar but can still include other UI elements such as the status bar. For example, use it for a task manager app that opens in its own window without the browser's URL bar, while still displaying the device's status bar for battery and notifications, thereby providing an integrated experience.

minimal-ui

Opens the app to look and feel like a standalone app but with a minimal set of UI elements for navigation. The specific elements can vary by browser but typically include navigation controls like back, forward, reload, and possibly a way to view the app's URL. Additionally, the browser may include platform-specific UI elements that provide functionality for sharing and printing content. Use this value for apps where displaying a minimal browser interface is beneficial. For example, use it for a news reading or other general reading apps that show only the essential browser controls like back and reload buttons, providing a cleaner and less distracting interface.

browser

Opens the app in a conventional browser tab or new window, using the platform-specific convention for opening links. Use this value for apps that are designed to be used within a browser context, where full browser functionality is needed. This is the default value if nodisplay mode is specified.

Description

After a browser applies adisplay mode to anapplication context, it becomes the default display mode for the top-level browsing context. The browser may override this display mode for security reasons or provide users with a means for switching to anotherdisplay mode.

If a browser does not support the specified display mode, it follows a pre-defined fallback chain:fullscreen →standalone →minimal-ui →browser.

Thedisplay-mode media feature can be used to configure your application styles and other behavior based on the currentdisplay mode. This can help provide a consistent user experience regardless of whether the website is launched from a URL or from a desktop icon.

As shown in the code below, you can adjust an app's style depending on thedisplay-mode used.

@media (display-mode: standalone) {  body {    background-color: #f0f0f0; /* Light grey background for standalone mode */  }}@media (display-mode: fullscreen) {  body {    background-color: black; /* Black background for fullscreen mode */  }}

Examples

Specifying standalone display mode

The following example manifest file for the web app named "HackerWeb" defines how the app should appear and behave when installed on a user's device. Thedisplay member is set tostandalone, which specifies that the app should open in a separate window without the typical browser UI elements like the URL bar.

{  "name": "HackerWeb",  "short_name": "HackerWeb",  "start_url": "/index.html",  "display": "standalone",  "background_color": "white",  "description": "A readable Hacker News app",  "icons": [    {      "src": "images/icons/homescreen192.png",      "sizes": "192x192",      "type": "image/png"    }  ]}

Specifications

Browser compatibility