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.
Window Controls Overlay
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
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.