Tutorial - Add to Home Screen Dialog

Help your users to install their PWA on their devices

By Thorium Builder Team - November 2020

The Add to Home Screen dialog has been improved with Thorium Builder version 2.0, we will learn in this short tutorial how to implement the new dialog layout.

If you want to know more about PWA installation requirements, you can read also this tutorial: https://www.thoriumbuilder.com/_help/tuthorium/pwainstallation/

Getting Started

In order to edit the dialog settings, open the project settings and select the PWA tab:

The available options are the following ones:

• Prompt user for “Add to Home Screen”: enable or not the add to home screen dialog.

• iOS: the dialog is displayed on iOS devices

• Android: the dialog is displayed or not on Android devices. Note that if your App is PWA Compliant, then Android will automatically show an Install button. So activating this option on Android is useful only if you want to “force” user to install the App before using it, or to enable the install option for a project that is not 100% PWA Compliant (for example if the App is served without SSL )

• Title: the title of the dialog

• Show Skip Button: display (or not) ,a button that let the user enter to the App without installing it to home screen

• Button Text: the text of the Skip Button (ex: Install Later)

• iOS: the text display on iOS Devices. Note that using the Keyword #ICON will automatically the iOS icon of the Button used for adding to Home Screen.

• Android: the text display on Android Devices. Note that using the Keyword #ICON will automatically display the Android icon of the Button used for adding to Home Screen.

Result

The dialog won’t be displayed with the simulator and neither with desktop Navigator, it will be displayed to the user only when running the App on Safari / iOS or Chrome/Android.

Add to Home Screen in White mode

Add to Home Screen in Dark mode

Note: the App background is disabled with a backdrop, the user has no other choice than installing the App or Select the “Install Later” button (if the option “Skip Button” is activated.

Once the App Installed (Added to Home Screen) , this dialog won’t popup anymore.

Note that if your project is only to build a Native App, then this functionality is not useful (and will be deactivated by default in Native Apps)