In this Tutorial, we will experience real-time communication with APEX push notifications, enabling seamless interaction between APEX applications and users on both desktop and mobile devices. These notifications greatly enrich your end user's experience by delivering instant updates and alerts, even when they are not actively using the application. Setting up push notifications in APEX is a breeze, offering a no-code declarative approach to sending notifications through a native page process. For developers seeking more customization, the APEX pwa API allows for smooth integration of notification sending into their existing workflow. Connecting with users who have opted to receive notifications is now simpler than ever thanks to the built-in settings page.
Now let's get started. First, Create a new application.
Place a checkmark on the two features (marked in red color) in the screenshot below. Click the button Create Application (in green color).
To enable PWA and Push Notification in an application later on, you can perform the following steps. Click the button edit application definition (in red color).
Click the Progressive Web App (PWA) tab (in red color). Turn on the Enable Progressive Web App and the Installable switches (in yellow color). You can also apply a custom theme color for the PWA using the theme color option (in blue color).
Turn on the Enable Push Notifications switch (in yellow color). If you see the Generate Credentials button instead of the Regenerate Credentials button (in red color) then click the button. Setting up push notifications securely necessitates the use of credentials, specifically a public and private key pair employed. The former enables users to subscribe to push notifications on the client side, while the latter allows the server to send notifications to the subscribed users.
Now create a new user. Click the option named Manage Users and Groups (in red color).
Click the button named Create User. enter a username (in red color). This username is case-sensitive. Type an email address (in yellow color).
Scroll down and fill in the fields of password and confirm password. And create the user by clicking the button Create User.
Open your application. Create a new page. Select blank page option. Set the following page creation attributes and click the button Create Page.
Create a new static content type region (in red color). This region will hold three text field-type page items created next. Create the following text field type page items. In the first page item (in yellow color), we will type the name of the user we created. Create another page item (in blue color). This page item will hold the title of the notification. Create the last page item (in orange color). This item will hold the body of the push notification which we will send to the end user John. Create a new button (in green color). When this button is clicked the notification will be sent to the selected user. Set the position property of the button from Region Body to Copy. And Action property to Submit Page.
Under the processing tab. Right-Click the Processing node and Create a new process. Set type to send push notifications (in yellow color). This option sends a push notification to a user all devices into which the user is signed in will receive the notification. Under the settings section. The substitution string (in blue color) is added to display the username of the application user, who should receive the push notification. The second substitution string (in pink color) will display the title of the push notification. And the body substitution string (in lime-green color) will display the body of the notification.
Scroll down to the message section, And Enter the Success Message (in yellow color) if the process runs and does not generate an error then this process success message will be displayed in the notification section of the page. Enter the error message (in blue color) for this process, this message will display if an unhandled exception is raised.
And select the button we created for the When Button Pressed property (in lime-green color). Save your work and Run the application (in pink color).
Open another browser for example Microsoft Edge. And open the same application in it using the credentials of the new user John. Under the settings option (in pink color). You will see an option named Enable Push Notification on this device. So Turn It On.
Open the two sessions side by side. In the user text field Enter John (in red color). This username is case-sensitive you have to provide it in the same case you created it in the database otherwise you will not receive the push notification. Enter a title (in green color). And a message to display in the notification (in pink color). Click the button Send Notification (in yellow color). It might take a minute or two to receive the push notification so be patient. Here you go the push notification is sent successfully to the user John (under the blue arrow).
Testing the same push notification module on a mobile device should provide the following results.
Now If we Send an application update message (in red color) to the user John, from desktop to mobile, although he is currently offline, and is not using the application at the moment. Let's see what happens.
As you can see the notification appears on John's mobile device although he is offline.
