Configuring the Module (setup settings)

After activating the module, you need to configure the module settings

To set the module settings, click on the Edit Mode button and then select Edit PWA Module from the DNN module menu.

Important: For the PWA app to function, the website must use the https protocol.

Configuring the Module (setup settings)

The initial settings in the mode are configured so that it is enough to click on the Save button, and the PWA application will be activated. Mandatory data such as title, description, and icon are entered, and you can change them later. The descriptions of the settings are as follows:

• Enabled - Enables/disables PWA features on the site.
• Application name - The name of PWA app
• Short application name - A shorter name for app. Displayed to the user if there is not enough space to display the full name. Must be up to 20 characters.
• Description - Describe your app.
• Start URL - Start URL: The URL of the page that opens when users launch app from their home screen.
• Application Icon - Icon for app. Must be a PNG image exactly 512x512px. A default icon in specified dimensions is set in the module and can be used for testing.
• Background color - Background color for app splash or loading screen.
• Theme color - Theme color used by browsers when displaying app.
• Orientation -  Any, Portrait, Landscape - Look the app screen in a specific orientation when possible.
• Display: Standalone, Browser, Fullscreen, Minimal UI - Display mode decides what browser UI is shown when app is launched.
• Show install button -  The "Show Install button" enables the initiation of installation via a button located on the page, for example, in the footer. The button will only be displayed in browsers that support PWA
  • For displaying the button, it is possible to choose these options:
  • When to display button: Both | Desktop | Mobile - Select on what devices to display app install button.
  • Button Style – select the button style
  • Position – Embeded (Left, Center, Right) or Floating (TopLeft, TopRight, BottomLeft, BottomRight)
• Custom install button - You can use any HTML element as app install trigger. Element must have class "eds__wpa_installApp" and be placed on the same page as module. Here is an example: <button type="button" class="eds__wpa_installApp edsPWA_installButtonStandalone" style="display:none">Install app</button>
• Show native mobile pop-up - Show native mobile pop-up when available.
  • Some browsers, for example, Chrome or Edge, support a native mobile pop-up that informs the visitor of the website that there is a mobile application available for installation
  • 
  • 
  • Options for configuring the native module pop-up
    • Number of days to repeat native mobile pop-up - Set number of days to repeat mobile pop-up. By default, it is set for the pop-up to reappear after 30 days.
• Show app install pop-up on mobile devices – setting up the EasyDNN PWA custom module pop-up notification for app installation
  
  
  
  The custom module pop-up notification will be displayed in browsers that support app installation by calling browser prompt functions. Browsers that support this type of installation are  Chrome and Edge.
  • For Safari on iOS and Firefox mobile browsers, instead of an installation prompt that is not supported, an info message is displayed indicating that an app exists and instructions on how to install it.

Safari instructions

• Setting options for app install pop-up on mobile devices
  • Time to show pop-up - Time in seconds to show pop-up – The pop-up is displayed after the visitor has spent a certain number of seconds on the website.
  • Repeat mobile pop-up - Repeat opening module pop-up after x days.
  • Number of days to repeat mobile pop-up - Set number of days to repeat mobile pop-up

• Reset pop-up visibility cookie - Reset cookie value so pop-up is displayed – This option, when enabled and settings are saved, resets cookies so that the pop-up can be tested without the need to clear the cache on the mobile phone.

Note: For multiple testing, it is necessary to delete the browser cache. If the pop-up has already been shown, it will not appear again until the browser cache is cleared or by using the option to reset cookies.

Compatibility table

How to adjust module to be avilable to every page

For the PWA app installation to work, you need to add the module to every page of the website.

The module settings apply to the entire portal, meaning that every new instance of the module uses the same settings, and it's not necessary to configure each module instance separately.

You can manually add the module to each page where you want the PWA option for app installation to be available, or you can add the module to just one page, for example, the homepage. Then, in the DNN module settings, enable the option to add the module to all pages, which is recommended.