Skip to main content

PWA Guide

A Progressive Web App (PWA) is a web application that offers an experience similar to a native app, but is accessed through a browser and can be installed on the user's device to be used offline, receive notifications, and integrate with the operating system. Built with web technologies like HTML, CSS, and JavaScript, PWAs combine the reliability, installability, and capabilities of an app with the accessibility, cross-platform reach, and indexability of a website.

Application Settings​

Make sure your application is already published before configuring these settings. We recommend choosing a font and an icon for your app.

App Configs

Enable the PWA by setting the option to "true".

PWA config

Additional Settings in the Inspector​

Display​

  • BROWSER: Opens in a regular browser tab. The PWA opens in a normal browser tab, like a regular website. Appearance: The address bar and the browser's full interface are kept.

  • FULLSCREEN: Uses the entire available display area, without showing any of the user's screen elements. The PWA is displayed full-screen, using the device's entire screen area. Appearance: All browser and system interface elements are hidden, providing an immersive experience. Use case: Ideal for games, photo galleries, or any application where visual immersion is crucial. Ex: Android / iOS

Display Fullscreen Android

Display Fullscreen iOS

  • STANDALONE: The app will look like a standalone application, and may include its own window and its own icon in the app launcher. This is the most common and recommended mode for PWAs. The application is displayed in its own window, like a native app. Appearance: The address bar and other browser interface elements are hidden, but system interface elements, such as the status bar (on mobile devices), remain visible. Use case: Offers the most authentic app-like experience for the user. Ex: Android / iOS

Display Standalone Android

Display Standalone iOS

  • MINIMAL-UI: The app will look like a standalone application, with a minimal set of UI elements for controlling navigation. This mode is similar to standalone, but keeps a minimal set of browser navigation controls. Appearance: What's kept can vary between browsers, but generally includes back and reload buttons. The address bar is not editable. Use case: A good option for applications with multiple pages or complex navigation, ensuring the user can still use basic browser controls.

Display Minimal UI Android

Display Minimal UI iOS

Orientation​

Defines the default orientation for all top-level browsing contexts.

  • any: The PWA can be displayed in any orientation: portrait or landscape.
  • natural: The screen can be displayed in its natural orientation as defined by the device's operating system, whether portrait-primary or landscape-primary.
  • portrait: The PWA can only be displayed in one of the two portrait orientations (portrait-primary or portrait-secondary).
  • landscape: The PWA can only be displayed in one of the two landscape orientations (landscape-primary or landscape-secondary).

Theme Color​

Sets the color at the top of the screen.

BackgroundColor​

Sets the application's background color.

Example Settings​

Example configs

App Icon iOS​

App Icon Config

If you want to use a different icon than the one used for Android, you can use iOS Icon and select an icon. Ex: Android / iOS

After installing, check the result in your device's app menu. 🙂

App Icons