Skip to Main Content

Overview

With appearance settings in APEX, you can easily customize the look and feel of your PWA container to match the branding and design of your application. This can help to create a more cohesive and professional appearance for your app, making it more appealing to users.

Display

The display setting determines how much of the browser UI is shown to the user by default. Possible choices are:

  • Fullscreen
  • Standalone
  • Minimal UI
  • Browser

This table shows the supported combinations of operating systems and browsers for the display attribute.

Chrome Edge Firefox Safari
Android Yes Yes Yes N/A
iOS No No No Partial Support
macOS Yes Yes No No
Windows Yes Yes No N/A

Last updated: April 2023

Full Screen / Standalone

Description

Using both Full Screen or Standalone display will open the PWA with no browser UI or status bar using the entire screen or window, stripping out the browser UI elements.

Minimal UI

Description

Similar to standalone, except with browser navigation buttons like back and refresh.

Browser

Description

Shows the PWA using a regular browser UI.

Orientation

The orientation attribute determines your PWA's preferred launch layout. Possible choices are:

  • Any
  • Natural
  • Landscape
  • Landscape Secondary
  • Portrait
  • Landscape Primary
  • Portrait Primary
  • Portrait Secondary

This table shows the supported combinations of operating systems and browsers for the orientation attribute.

Chrome Edge Firefox Safari
Android Yes Yes Yes N/A
iOS No No No Partial Support
macOS Yes Yes No No
Windows Yes Yes No N/A

Last updated: April 2023

Theme Color

This attribute defines the theme color for the PWA. This affects how the operating system displays the frame of the PWA, for example the title bar on desktop or the status bar on mobile.

This table shows the supported combinations of operating systems and browsers for the theme color attribute.

Chrome Edge Firefox Safari
Android Yes Yes No N/A
iOS No No No Yes
macOS Yes Yes No No
Windows Yes Yes No N/A

Last updated: April 2023

Default theme color example

Description

Dark PWA theme color.

Custom theme color example

Description

PWA theme color matching application primary color.

Background Color

The background color is used when opening the PWA, as a splash screen while the app content is loading. For a smooth transition, it should match the APEX theme body background.

This table shows the supported combinations of operating systems and browsers for the background color attribute.

Chrome Edge Firefox Safari
Android Yes Yes No N/A
iOS No No No No
macOS No Yes No No
Windows No Yes No N/A

Last updated: April 2023

iOS Status Bar Style

Choose the style of the iOS status bar of your PWA. This option applies only to Apple iOS devices.

Default

White Text and Black Background.

Translucent

Transparent Background. Useful for apps with no top navbar.

Custom Manifest

The Custom Manifest attribute is used to store additional JSON properties for the web app manifest.

Custom manifest properties extend APEX PWA declarative options by overriding existing ones or appending new ones.

Custom Manifest Example

{ "short_name": "APEX PWA", "other": "value" }