Days
Hours
Minutes
Seconds

Introductory Offer
50% off on Everything for a very limited time! Use Coupon: SUPERLAUNCH

Coupon: SUPERLAUNCH

Web App Manifest Display Modes – What is the Difference?

Display mode decides what browser UI is shown for your web app.

The choice of the display mode depends on your app, and this article when help you understand the difference between each of them.

There can be four display modes:

  • Standalone
  • Fullscreen
  • Minimal-UI
  • Browser

Let’s take a look at each of these modes and figure out what they look like.

Standalone Display Mode

This is the default setting of SuperPWA. In this display type, the web app looks and feels like a native app.

Dispaly Mode Standalone
  • The web app runs in its own window separate from the browser.
  • The browser UI elements like the address bar and navigation are hidden.
  • The status bar of Android UI which shows the battery percentage etc. are still visible.

Fullscreen Display Mode

If you want your web app to use the entire screen, this is the mode you need. As the name implies, your web app will open in full screen.

Dispaly Mode Fullscreen
  • The entire display area is used by the app.
  • Browser UI elements like address bar and navigation are hidden.
  • Android status bar is also hidden.

Minimal-UI Display Mode

In the minimal-UI display type, the web app will appear more or less like the “Standalone” mode, but some browser UI is retained.

What is retained, will depend on the browser. For example, in Chrome, the address bar is displayed, but it cannot be typed into and the browser menu is available for navigation.

Display Mode Minimal Ui
  • “Standalone” mode + some browser UI elements.
  • User experience varies across browsers.

Browser Display Mode

If you choose “Browser” as the display type, your web app will behave like a bookmark and the standard browser experience will be retained.

Using the Browser display mode will prevent the “Add to Home Screen” notice from appearing.

Dispaly Mode Browser
  • All browser UI is retained.
  • The Add to Home Screen Notice is never displayed.

You will find this in your Lighthouse report if you choose “Browser” display mode

Display Mode Browser Lighthouse Test

However, the option is still provided in SuperPWA UI for completeness.

Which display mode to choose for your web app?

The choice of the display type will depend your your web app. Here are some suggestions.

  • If your web app has custom navigation buttons, or detailed navigational menu where the user can click and go forward and backwards, choose “Standalone” or “Fullscreen”.
  • If your web app is a standard website and needs the browser UI for the user to navigate, go for “Minimal-UI”.
  • If your web app is a game or an interactive page, use “Fullscreen”.
  • Unless you have a specific reason to, do not choose “Browser”.

Starting with SuperPWA 2.0, you will find a drop-down in the settings UI to choose the display mode for your web app.

Changed your display mode and cannot see the difference?

Changing the display mode via SuperPWA settings does not automatically update the mode if the web app is already installed. Here is how to do it.

  • Delete the current app from your home screen.
  • Clear the browsing data for the website in the browser. In Chrome, while visiting the website, press the 3 dots for the menu. Then choose (i) for info. Click “Site Settings” > Then press “Delete icon” to clear all stored data.
  • Close the website and open it again.
  • Add the web app to the home screen again.
  • Once during testing, I had to close Chrome from memory and relaunch it again for the display update to reflect.

If you have specific questions related to PWA display modes, please ask them in the discussion below.

Is your WordPress website a PWA yet? If not, check out the most installed WordPress plugin for PWA: Super Progressive Web Apps.

Leave a Reply

Your email address will not be published. Please enter all fields.

Hans Konings says:

The choice for Display Mode is just what I wanted. Much appreciated.

Ed says:

Will you have theming GUI (skin) options sometime in the future so the PWA looks more like a native app? Thanks!

Arun Basil Lal says:

It’s in the road map for sure 🙂

Charlies says:

Standalone mode seems to work fine for me.

Good luck on the new ones.

Arun Basil Lal says:

Thanks Charlies 🙂

MD. IBRAHIM KHALIL TANIM says:

This display mode only works when I add the website on the home screen. If I don’t do that then this display mode is not working.

Jose Varghese says:

Hi,

Hope you are doing well. Yes, you’re right and moreover that’s the expected behaviour of the display modes on PWA 🙂 Display modes will only work once the website is added to your home screen. That means display modes will be noticed working, once the website/app is opened via the icon which you added to your home screen and its also depended on the browser support.

Happy to share a piece of information with you 🙂

Mezie says:

The address bar was hidden on some pages but shows on all other pages

Team SuperPWA says:

Hi Mezie,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Vol says:

Hi
How can i test it? I followed All steps but it doesn’t show up

Team SuperPWA says:

Hi Vol,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

DekhoGaana says:

Not working in our site dekhogaana.com

Team SuperPWA says:

Hi DekhoGaana,

Will you please elaborate more about your issue so that we will understand and help you.

Basha says:

Hi Hope you are doing Great!
PWA app is very fine good option to have in users devices.
do we have any shortcut to insert and ask users to download the app, or add to home screen particular page to particular user?

Team SuperPWA says:

Hi Basha,

PWA will work on the whole site, currently, we don’t have any option for which A2H screen particular page.

Henryinhat says:

No need to work anymore while you have the Robot launched!
Link – https://cryptoncoins.de/course-bitcoin-trading.php

Team SuperPWA says:

Hi Henryinhat,

What issue you are facing? will you please elaborate more and please contact our support team from here- https://superpwa.com/contact/ they will help you as soon as possible.

GUILHERME HENRIQUE SILVA says:

Uso em uma rede multisite e as vezes não funciona mesmo com as configurações corretas e as imagens no tamanho certo

Team SuperPWA says:

Hi GUILHERME HENRIQUE SILVA,

Could you send me the URL where you are getting the error and also if you could contact our support team from here – https://superpwa.com/contact/ so that they can check the issue thoroughly.

Articles Linking Here

Stay Updated

Learn more about Progressive Web Apps
and get latest updates about SuperPWA

we'll share our root password before we share your email with anyone else.