How to create a Progressive Web App (PWA) in Oracle APEX

Alright, we all know the capabilities and benefits of Universal theme in Oracle APEX and the seamless user experience it delivers whether the application is accessed from a Desktop browser or a Smartphone browser. Due to its responsive nature, it certainly provides a native app like UI when accessed from a smartphone.

But what if we want to deliver an App to users which they can install and use just like a Native app on their phone as well as provide them additional benefits that come with a Native app such as Push notifications, some offline capabilities etc. ?

Well, look no further. Progressive Web App is here to solve all these problems. Let's take a look at that.

- Create a new Application

- Navigate to Shared Components

- Under 'User Interface' section, go to Progressive Web App option

- On PWA Settings page, we will need to enable below two options:

  - Enable Progressive Web App

  - Installable

- We can also set various other options which help us decide how the App should behave once it's installed on the Device.

Display: We can decide if the App should be displayed in a Standalone or Fullscreen mode etc.

We can even decide what should be the Orientation of the App on the mobile device. For example, if the App should operate in Landscape orientation or Portrait. 'Any' option will let you use the App baed on Device's orientation.

We also have iOS specific setting to set the Status Bar Style on iOS Device -

- Now, let's upload a sample screenshot in the PWA definition. The screenshots uploaded at this place are shown to the end users when they try to install the App. This is very similar to a App Store listing that we see on iOS App Store or Android Play Store.

- Let's upload a sample screenshot that shows how the App will look like

- Click Create

- Apply Changes

- Now our App is enabled for PWA. That means, the app can be 'Installed' on a smartphone and it will operate independently like other apps on the device.

- All we need to do is to open the App URL once in the mobile device's browser and we should be able to install the App from there.

- Here is the list of supported OS and their Browsers through which we can install a PWA app on a mobile device:

- Now, let's open the App URL on the smartphone browser and Sign In. I'm using Chrome browser on an Android phone but the same can be done using above listed browsers based on which OS you are using.

- Once we login, we can see an icon in top right corner that looks like a Cloud with a Download sign.

Let's Tap on that.

- Now, you will see below Pop Up offering you to install the App on your device.

Tap Install

- You will see a message that tells us the installation has begun

- Followed by a confirmation message

- Now, let's close the browser and go back to Home screen on our smartphone. We will see our newly installed App over here.

- Now, we can simple open the app like any other native app on our device. This not only eliminates the need of accessing the Apex app via a web-browser but also enables many native app specific features, which we will see in next few blogs.

Read More