Modernizing APEX Apps with PWA Push Notifications and Customization

on

Introduction

Push Notifications in Oracle APEX allow your application to send real-time alerts directly to a user's browser even when the app isn't open in an active tab. This means users can stay informed about important events such as new messages, task assignments, updates, or system alerts without needing to refresh the page or check manually.

With the release of Oracle APEX 24.2, push notifications are now supported natively through Progressive Web App (PWA) features and Service Workers. This powerful combination lets developers build modern, interactive web experiences that rival traditional desktop apps.

Whether you're building a chat application, a task management tool, or a customer support system, push notifications can help keep users engaged, informed, and responsive in real time.

In this blog, we’ll explore how to implement real-time push notifications in Oracle APEX using its built-in PWA features. You’ll learn how to set up everything from start to finish—no third-party tools required.

    • Building a simple chat application where users can send and receive messages.
    • Sending real-time browser notifications using the apex_pwa.send_push_notification API.
    • Handling notifications on the client side using Service Workers and JavaScript, so users are alerted even when they're not actively using the app.

Step 1: Enable Push Notifications in Your APEX App

Before you can send or receive any notifications, you need to enable the PWA and Push Notification features in your Oracle APEX application.

Steps to Enable:

  1. Open your application in Oracle APEX.
  2. Navigate to Shared Components → Progressive Web App.
  3. Set the following options:
    • Enable PWA → Yes
    • Enable Push Notifications → Yes
  4. Click on Generate Credentials
    • APEX will automatically generate the Web Credentials to send push notifications securely.
  5. Create a Notification Settings Page (Optional but recommended)
    • This allows users to subscribe or unsubscribe from push notifications based on their preference.
    • APEX provides a ready-to-use page template when PWA is enabled. You can find this under username in Navigation Bar (usually named Settings).

For more details, check out the official documentation here: APEX PWA Push Notification Reference

Step 2: Create the Chat Message Table

This table stores the basic details of each chat message: sender, receiver, message text, timestamp, and read status.


Step 3: Create a Chat Region in Oracle APEX

Create a Classic Report using Comments Template and use the following SQL query to retrieve messages. I referred to APEX App Lab's tutorial to create the chat region and applied customizations as needed.

Step 4: PL/SQL Code: Send Chat Message and Push Notification

  1. Create a Dynamic Action (e.g., on button click or Enter key event).
  2. Add an action: Execute Server-side Code.
  3. Set the PL/SQL block mentioned below (for inserting the message and sending notification).
  4. Add a True Action:
    • Type: Refresh
    • Affected Element: Chat Region (select your Classic Report or chat region).

Step 5: Customizing Service Worker (sw.js)

This service worker listens for incoming push messages and displays them.
To customize it:
  1. Navigate to Shared Components → Progressive Web App.
  2. Under Service Worker Configuration, choose either:
    • Configure Hooks → Event: push → Add your custom code
    • File URL to Customize → Provide the path to your custom service worker file(sw.js)

Step 6: Client-Side JS (app.js)

Handle the message in your browser and refresh the region where the tasks are displayed. Refer to this app.js file in your page.

Step 7: AJAX Callback Process to Mark Msg as Read

  1. Go to your Page Designer.
  2. In the Processing section, right-click on "AJAX Callback" and choose "Create".
  3. Set the name to: MARK_READ
  4. Set PL/SQL Code to the following:

Final Flow Summary

  1. User sends a chat message via a form (e.g., input Field + send button).

  2. A Dynamic Action executes a PL/SQL block:

    • Inserts the message into the apex_chat_message_tb table.

    • Sends a push notification to the receiver using apex_pwa.send_push_notification.

  3. The receiver’s browser (if subscribed) receives the notification via a Service Worker.

  4. The Service Worker:

    • Displays a notification.

    • Sends a postMessage back to the browser tab (client).

  5. Client-side JavaScript listens for the message, and:

    • Calls an AJAX Callback (MARK_READ) to mark the message as read.

    • Refreshes the chat region to show the latest messages.

  6. The chat stays in sync in near real-time no page reload needed!

Conclusion

Oracle APEX 24.2 has opened the door to modern web capabilities by integrating Progressive Web Apps (PWA) and Push Notifications natively. With just a few steps, you can create interactive, real-time applications like a chat system that keeps users informed even when they’re not actively on the page.

This low-code approach makes advanced features like browser notifications easy to implement—no external tools or complex setup required. Whether you're building internal tools, support platforms, or collaborative apps, Push Notifications can dramatically improve user experience and engagement.

If you found this helpful, share it with your APEX friends and follow me for more!

Connect with me on LinkedIn!

Comments

Post a Comment