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:
Let’s take a look at each of these modes and figure out what they look like.
This is the default setting of SuperPWA. In this display type, the web app looks and feels like a native app.
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.
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.
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.
You will find this in your Lighthouse report if you choose “Browser” display mode
However, the option is still provided in SuperPWA UI for completeness.
The choice of the display type will depend your your web app. Here are some suggestions.
Starting with SuperPWA 2.0, you will find a drop-down in the settings UI to choose the display mode for your web app.
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.
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.
The choice for Display Mode is just what I wanted. Much appreciated.
Will you have theming GUI (skin) options sometime in the future so the PWA looks more like a native app? Thanks!
It’s in the road map for sure 🙂
Standalone mode seems to work fine for me.
Good luck on the new ones.
Thanks Charlies 🙂
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.
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 🙂