Creating a PWA in Verj.io

Turning a Verj.io app into a Progressive Web App (PWA) is a simple matter of defining a PWA entity in your Workspace.

Steps

If you haven’t already, create a new project based on a starter app. Click File -> New -> Project, select Starter App 104 and choose a name.

This starter app already has a PWA entity under Modules -> Shared -> Client called PWA. Double click to open it.

Give your app a Name and a Short Name. The short name will appear on your user's home screen.

Pick a Splash Screen Colour and a Theme Colour.

The remaining sections are already filled in:

Associated Forms lists the forms that will install the PWA on the device. Currently the Home form is the only one listed. This simply means that running the Home form for the first time will trigger the PWA to install.
The Start Form is the first page the user will see when they launch the app. Again this is set to Home.
The Error Page will show if the user, whilst offline, navigates to a page not contained in the PWA's offline cache.
The bottom left panel lists the home and splash screen icons. These are typically different sized versions of the same image. Devices with different screen sizes will automatically pick the ones that best fit their dimensions. Google’s recommendation is to have, at a minimum, 192px x 192px icons. NB. The icons must be of type PNG.
The Offline Resources panel lists forms and web resources that are available offline. The start form and everything associated with it are automatically included.
Every form added to the Offline Resources will automatically include any files associated with it.

Deploy the starter app project to your cloud service plan, then visit your app’s Home page from your mobile device. The URL will be something like myplan.verj.cloud/apps/home.eb.

On Android devices you will be prompted to install the PWA. On iOS devices you will need to tap the share icon in Safari and click the Add to Home Screen.

Your app will be identified by your icon and short name, and will be available from your home screen.

Previous Page To Page