PWA Settings

Thorium Builder includes the ability to set properties for the overall project. Project settings are accessed by selecting the project folder from the Project Manager located on the left side of Thorium Builder’s main window....Select a project from the Project Manager Sidebar. The Project Settings Window Opens.

Settings List

• WebApp Name. The Name of the WebApp. When the user installs the WebApp on their mobile device with the “Add to Home Screen” option, this is the Name that will be used .
  

• Short Name. When there is not enough space to display the full WebApp Name, the Short Name will be used.
  

• Description. The description of the WebApp.
  

• Left & Right Panel Breakpoints. You can define a left breakpoint in pixels. A breakpoint is used for WebApps that will be displayed on Tablets. For Instance, when the size of the tablet is equal or greater than 1000px, a left Breakpoint of 1000px will always display a left panel on the left side of the screen.
  

• Reveal Mode. Panels will push the main View to right or left (by default, Panels are displayed on top of the view)
  

• Auto Hide Panels. With this option, all the links selected from a left or right panel, will load the selected page and automatically close the panel right after.
  

• Generate Meta Description for Windows/IE. Select that option in order to create a META section with Windows metatags. See this link for more information about Windows Meta: https://technet.microsoft.com/en-us/windows/dn255024(v=vs.60)#MainContent
  

• Generate Service Worker. If you wish to make your WebApp available offline for the users, select Generate Service Worker. Note that this option will work only for pages that have previously been loaded by the user.
  

  NOTE

  If you are using a custom web server, it is recommended to let this option disabled during the development phase because the service worker will always try to load the “cached” version of your project and you wouldn’t be able to view your modifications to the project.
  

• Allow Execution on Desktop Devices. If not checked, the PWA execution will be allowed only on Mobile devices.
  

• Splash Screen Color. The color of the SplashScreens that will be created automatically. The icon (if defined) will be added automatically to the splash screen (centered). A Splashscreen is an image that will be displayed when launching a WebApp, while the device is loading the App.
  

• Generate Apple Icons for IOS WebApp. Select this option if you want to generate all the icons with different sizes required for an iOS WebApp.
  

• Generate iOS Launch Screen Images. If checked, then all the iOS required Startup Screens will automatically be created (recommended)
  

• Disable iOS “Scoll Bounce". When selected, this option will disable the default bounce effect on iOS devices. On Android Device (or Chrome iOS) , this option will set the overscroll-behavior to “none".
  

  

• Force "Black Transluscent” Mode. Lets you decide how the App header is displayed on iOS when Apps are added to HomeScreen.
  The iOS devices Notch (iPhone X, XR) is using the PWA color theme automatically, there are 4 possibilities: Default (White BG), Dark Mode , Fill Mode and Translucent Mode (When the page has a background image).
  

  

  

  

  

  4 examples of the Same Thorium PWA with different settings on iPhone XR. (The last one implements the Black Translucent mode)

• Generate Manifest File for WebApp. Generate the file that tells the web browser about the WebApp and shows the “Add Home Screen Prompt” for installation on the user’s device.
  

  The web app manifest is a configuration file that indicates to the browser about your web application and the behaviour of your PWA when it is 'installed' on the user's mobile device. This configuration file is the minimum requirements for Android devices that will trigger the “Add to Home screen” message.
  For details about the different options available, please see the Google Documentation at the following address: https://developers.google.com/web/fundamentals/web-app-manifest/ 
  

• View Mode. Sets the mode that the WebApp will use to display the app’s content.
  

• Orientation Allowed. The orientation allowed for the WebApp on Mobile.
  

• Theme Color. This option sets the color of the Android WebApp’s tool bar.
  

• Google Playstore. The link to the Google Playstore where the WebApp can be found when available at the Google PlayStore.
  

• Apple Store URL. The link to the Apple Store where the App can be found when available at the Apple Store.
  

• Prompt User for "Add to Home Screen". Select this option in order to display a message to the user every time the WebApp is launched from Safari on iOS that explain how to Install the App by using the ‘Add to Home Screen’ option. Once the App is installed on Home Screen, then the message won’t be displayed anymore. Since the version 1.1, you can customise all the information/Instructions displayed to the user: Title, Help Text, etc….
  

  The “Show Skip” button option automatically add a button that lets the user entering to the App without adding it to Home Screen. (If not checked, then the user will be “forced” to install the App if he wants to use it.)
  

  You will find a tutorial about the Add to Home Screen feature here: Add to Home Screen Tutorial