All Collections
PWA Questions
Understanding PWA display modes
Understanding PWA display modes

Not sure what standalone, window controls overlay, fullscreen or minimal UI mean? Here are some concrete examples.

Kevin Basset avatar
Written by Kevin Basset
Updated over a week ago

With Progressier, you can choose between 4 different desktop display modes and 3 mobile display modes for your PWA. These display modes match the official specs of the app manifest display property but we've optimized them so that they're easier to grasp and manage. Go to App Manifest > Preferences in the Progressier dashboard to choose your app's display modes. Or scroll down for definitions and examples.

Mobile

  • Standalone

  • Fullscreen

  • Browser

Desktop

  • Standalone

  • Window Controls Overlay

  • Minimal UI

  • Browser

Mobile - Standalone display mode

This is the default (and recommended) display mode. Your app opens in its own window and comes with no browser UI. You can configure the color of the status bar at Icons & Colors > Status bar color so that it matches the background of your app.

Mobile — Fullscreen display mode

Similar to standalone, except that on Android the status bar is hidden completely. On iOS, the status bar is overlaid on top of your app. Progressier sets the apple-mobile-web-app-status-bar-style to black-translucent and adds viewport-fit=cover to the viewport meta tag. Beware that if you're using this mode, you may have to update your code to use CSS safe areas. This article explains quite well what you'll need to do.

Mobile — Browser display mode

With this display mode, your PWA is treated like a standard website instead of an app. It will open in a regular browser tab when launched from the home screen.

Desktop — Standalone display mode

Standalone is the default (and recommended) display mode on desktop. With this display mode, the application looks and feels like a native application on your Mac or PC.

Desktop — Windows controls overlay display mode

This display mode overlays the window controls on top of the body of your PWA. The central area where the name of the app is displayed with the standalone mode is transparent, allowing you to build your own title bar. Check out this article for more information.

Desktop — Minimal UI display mode

The minimal-ui display mode is extremely similar to the standalone mode, except your PWA also has a minimal set of UI elements for controlling navigation (e.g. back and reload buttons).

Desktop — Browser display mode

With the display mode set to browser, users won't be prompted to install your app. For example, this is useful if you want your app to only be installable on mobile. You can also use our QR code function to redirect desktop users to their phones for installation.

Did this answer your question?