PWA Settings & Installation

Thorium Builder Team

March 12, 2020 - 10 min read

In this Tutorial, we will review all the available settings available that let you customise your PWA installation & behaviour, both on iOS and Android devices.

Photo Credit: youxventures@unsplash

Definition

Although there is not (yet) official specifications and definition, the PWA are described like that on Wikipedia: A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser. Functionality includes working offline, push notifications, and device hardware access, enabling creating user experiences similar to native applications on desktop and mobile devices. Since a progressive web app is a type of webpage or website known as a web application, there is no requirement for developers or users to install the web apps via digital distribution systems like Apple App Store or Google Play.

Source Wikipedia: https://en.wikipedia.org/wiki/Progressive_web_application

Is that the future?

It can be subject to a debate, but there are some low signals on the market that demonstrate the potential rise of PWAs on the market:

1°- Since Chrome 72 for Android, Google has added the possibility to upload a PWA on the Google Play Store (we will describe the process in another tutorial)

2°- Apple announced that they will refuse Apps that implement UIWebView as of December, 2020; you can still use the more secure WKWebView, but it seems they begin to fight against Apps that are HTML based and embedded in a Cordova or PhoneGap shell. By the way lot of developers are reporting that their HTML based Apps were refused while their submission to the App Store.

3°- Although Apple was the first to Implement the " Add to Home Screen " feature in 2007, things didn’t move much on iOS since the latest versions: nowadays iOS supports one of the most important features of the PWA, the Service Workers, and Apple has considerably improved the PWA support during the past 2 years.

4°- HTML/JS based Apps were quite slow on old generation mobiles, but today, it is almost impossible to see the difference between a native App and an HTML based one, except for very critical graphic process.

5°- Cost, Cost Cost!!!! The PWA technology lets you create Apps for all mobile OS with just one Code, implementing a native App requires to create multiple codes!

6°- Forward compatibility! Not often mentioned in article speaking about PWA, but this is maybe one of the most important features: unlike proprietary frameworks used to develop native Apps, the Web technology is standardised, it means that a PWA project will still be compatible with future versions of Mobiles OS.
Exactly like Web sites that has been created a while ago and that still work, PWA will still work with future devices, and obviously it has great consequences on the maintenance cost.

The Thorium Builder PWA Implementation

Thorium builder automatically implements all the technical functionalities that are required for your PWA, but you can change theses settings in order to customise the user experience (UX).

Because Thorium Builder uses the amazing Framework7 , the PWA are implementing the capability to automatically adapt their layout, depending on the mobile OS where it is executed: iOS PWA will use native widgets look & feel while Android PWA will use the Android’s Material Design look& feel.

Note that even if a project doesn’t implement all the PWA requirements, it can however be installed on a mobile device by using the Add t Home Screen functionality, but it will loose some PWAs capabilities.
It is particularly true on Android, installing a PWA that doesn’t implements all the necessary settings will be added as a “Web Link” and the App icon will show the Google Chrome Icon on top of your App icon.

If your PWA implements all the necessary settings, then, on Android Devices, when the user load the PWA from Google Chrome, he will automatically get the prompt asking him if he wants to add the App to Home Screen:

Note: a project that doesn’t implements the PWA settings can be added as well to Home Screen, but in such situation, the user won’t be prompted automatically, and must use the “Add to Home Screen” menu manually.

Application not “PWA” compliants will be displayed with the Google Chrome icon on top, see this Screen shot showing the same App configured as a PWA on the left and without PWA settings on the right:

On iOS devices, the process is quite different, as the user will never be prompted, the Installation process is always manual, he must use the “Add to Home Screen” menu:

Note: the Add to Home Screen functionality exists only on Chrome for Android devices and on Safari for iOs devices. Chrome for Desktop also implements this functionality, it means that you can even install a PWA on your Desktop Computer!

But is that mandatory to Add the App to Home Screen?

Actually no; adding a PWA to Home Screen has many benefits: he user always has your App icon shortcut on his mobile and he gets a better experience as the App looks exactly like a Native App.
It depends on your PWA settings, but actually you can let the user use your PWA within their Browser or forcing them to install it on Home Screen if they want to use it. (We’ll see later how to “force" Installation)

Hosting Requirements

A PWA is delivered through the web, it means that your PWA project have to be hosted on a server with a public address.
In order to fit to the PWA requirements, your project must be served via https so you have to install a valid SSL certificate on your hosting server (generally included for free with your server)

Note: although it is not mandatory, your server should redirect automatically the http accesses to https. With Servers using Apache Web Server, it can be done by setting a redirection to https in the .htaccess file available at the root of your project. Thorium generate this file, but doesn’t yet add automatic redirection to https (that will be implemented in the future).

PWA Settings in your Thorium Builder Project

You will find below the “check list” of the different tasks you have to do in order to make sure your PWA…is a PWA:

1°: Activate the “Generate Service Worker” option.

The Service Worker is a background process that will preload partially your PWA into the Mobile Cache. Thanks to this functionality, Users will be able to load the App even when they don’t have an Internet Access.
Obviously Apps that are using data coming from a server (Json, Firebase, etc…) won’t be able to load it from the server, but at least the user won’t see a blank page when launching the App.

2°: Setup the Manifest

The Manifest is a file that will be used by Google on Android for setting up the PWA. The most important option here is the “View Mode” option: if you want the App to feel the closest possible as a Native App, then the recommended choice is “Standalone”.
The other options will keep showing the Chrome navigation bar, but it is not necessary with Thorium PWA because they are what we call SPA (Single Page Applications), it means that there is just one page loaded at the launch (index.html), and all the other subpages are loaded dynamically and added on top of the view without closing the index page, so the browser navigation buttons have no effect.(Exactly like native Apps).
Note: although disabled by default, in certain conditions it could be however possible to activate the browser navigation with an SPA.

In order to create a valid Manifest file, you have to set as well the WebApp name, WebApp short name & Description as well as the default theme colors.

If you want your App to look like. Real App, the recommended Manifest Visualisation Mode setting is “ Standalone" .

3°: Icons & Splashscreen color

Your App must have an icon in order to be installed on a mobile.
Actually it requires various icon sizes, both for Android, iOS and even Windows Phone.
With Thorium, you just have to add an icon with a sufficient size (512x512 pixels recommended) and the TB will create all the necessary Icon variants with the appropriate size.
You must Select the option “Generate iOS icons” from the project properties as well.

Examples of Icons automatically generated by Thorium Builder

4°: iOS Splashscreen

For iOs you also have to setup the background color for the SplashScreens.
A splashscreen is an image that is displayed on screen by iOS while loading the PWA. Thorium will create automatically all the required splash screen sizes depending on the target devices (including iPads).
You must select the option “Generate iOS launch screen” if you want the SplashScreens to be generated.
Note: you have to set the Icon for the App in order to have the Splashscreens generated properly

iOS SplashScreen Example

5°:Prompt User for “Add to Home Screen"

If you activate that option (it can be activated separately for iOS & Android) , then the user that will launch the App from its URL for the first time will see a screen With a text explaining that he can (or he must) install the App.
You can enable or not the “Skip” button that will let the user enter to the App without installing it.
It means that if you enable this option, and don’t activate the Skip Button, the users won’t have any other choice than installing the App if they want to continue using it.
(Off course this message disappears when the App is launched from Home Screen)