How to Configure Push Notifications in Progressive Web App in Oracle APEX

In this blog, we learned about how to create a Progressive Web App in Oracle Apex.

Progressive Web App offers many benefits including an app experience very close to a Native App, one of which is a Push Notification feature. Take an example of an Android or iOS App; we all have seen many of the Native apps on these platforms pushing various Push Notifications to us, whether to inform you that your package is out for delivery or just to deliver the daily news bites to you.

Progressive Web App (PWA) brings the Push Notifications feature to the Apex Apps. Let's see how we can configure and use it.

We can enable Push Notifications in two ways - While creating a brand new App or In an existing App

New App:

- Create a new App and click on 'Use Create App Wizard'

- Let's check the boxes 'Install Progressive Web App' and 'Push Notifications'

Existing App:

- Navigate to Shared Components

- Click on Progressive Web App

- Scroll down to Push Notifications section

- Enable Push Notifications and click on Generate Credentials

- Generate Credentials will automatically generate a new key pair credentials for your application which is needed so that the end users can subscribe to push notifications securely.

- Once done, it will update the Credentials and Setting Page details

We have now enabled PWA and Push notifications in our App.

Now, lets see how we can send the actual Push Notifications.

We can send Push Notifications via two methods - API call and Page Process

1. API call method:

The two main APIs we need are: 

apex_pwa.send_push_notification - This API creates the actual Push Notification and adds it to the Queue

apex_pwa.push_queue - This API Pushes all the Notifications that are ready to be processed in the Queue

- Let's create a new Button on our Home page and select Create Dynamic Action option

- Let's name the Dynamic Action as PushNotification and set the True Action as Execute Server-side Code

- In the PL/SQL Code editor, enter below code snippet. 

Replace Your_APEX_UserName and Your_APEX_AppURL with actual values from your App.

BEGIN

apex_pwa.send_push_notification (
            p_application_id => :APP_ID,
            p_user_name      => '',
            p_title          => 'Test Notification',
            p_body           => 'This is a test notification.',
            p_icon_url       => '#APP_FILES#icons/app-icon-512.png',
            p_target_url     => ''
);

apex_pwa.push_queue;

EXCEPTION
WHEN OTHERS THEN DBMS_OUTPUT.PUT_LINE(SQLERRM);

END;

To get the actual value for p_icon_url, follow these steps:

Navigate to Shared Components

Click on Static Application Files option

Here, you will see a  types of files and their Reference values. Pick any one and copy it's Reference value and use this for p_icon_url parameter in above API call.

- Update the Dynamic Action code and click Ok

We have now configured the Push Notification via API.

Now, let's see how the App looks like and how the Push Notification is delivered

- Let's open the App on our smartphone

- Click on Download icon to Install the App

- Install the App

- Now, go to Settings section in the installed App

- Here, you will see Push Notifications option which will be set to Off by default

- Let's Enable the Push Notifications option

- Based on your device (Android or iPhone), this step will show a pop-up asking for your confirmation in order to enable Notifications for this App on your device.

For example, here's how it will be shown on an Android device

- Click Allow

Now, let's go back to Home screen and click Send Notification button

- This will send the Test Push Notification to your smartphone based on the details mentioned in the API call

2. Page Process method:

Now that we've seen how to send Push Notifications through API call, let's take a look at second option which is through a Page Process

- Let's create a New Button on our page named PageProcessButton

- Now, navigate to Processes section in the App and create a new process named 'PushNotification' under After Submit section

- Change the Type to 'Send Push Notification'

- Under Settings section, set the values for To (APEX User Name), Title and Body of the Push Notification

- Save

Now let's see how this notification looks like

- Navigate to the App on your device

- Click on the new button 'Page Process Notification'

- And we should see our new Page Notification on our device

As shown above, notifications sent through the Page Process provide limited customization capabilities. This approach is well-suited for scenarios where a simple notification is sufficient. 

However, when greater control over push notifications is required, or when notifications need to be driven by custom business logic using data from a database, the API-based approach is the preferred option.

Read More