Mobile Notifications in Oracle JET

I have been looking into how notifications works in Android (and soon with iOS applications).

To start my experiments, I have been using the Oracle JET toolkit as it supplies a hybrid application: the FixItFast demo.

To set the scene I am not much of a phone app developer. In fact this is the first experience I have had. With that has come some areas of confusion and misunderstanding. However, with all this effort, understanding and research I finally had something of note.

Notification received in Android

In Action

I intend to write up a series of posts of how exactly I got this far but for the purposes of this article I will show a GIF of what actually does work:

Oracle JET application receiving and processing notification

I don’t understand what you’re showing above

Ahh! That’s OK. You’re probably not the only one so lets take a look at what this is showing us.

The above GIF is showing the Oracle JET demo application deployed on a Pixel 2 emulator running in Windows.

I have extended the mobile app to 1) get a token via the PhoneGap plugin 2) Send that token to my server and 3) listen for notifications.

When the app first loads, steps 1 and 2 above get run. I then simply set an observable variable to “Notifications will be seen here!”. This observable is just a “clever variable” and I have put it on the splash screen.

When step 3 happens, I handle the notification click and set that same observable to the notification title thereby proving I can handle the click.

This is what you see at the end in red — the notification title which includes the date/time (Javascripts new Date() function call).

What did I solve?

Architecture

For this to work, you [unfortunately] need somewhere you can host a HTTPS server. This is because you need to host <something> to receive the phone registration token. This same host sends the notification to registered phones via this registration token.

This was one of the hardest things to overcome and understand what is going on.

1. Application loads and PhoneGap plugin activated
2. Javascript code within mobile app runs to get notification token
3. App sends notification token to your server (SSL required otherwise request is not succesful)
4. Server code stores it and can push a notification at any point. I sent my notification to the token via a native AJAX call via FCM (Firebase Cloud Messaging) from my host. This notification contains the title, body, right hand side image and notification channel.
5. Phone receives notification and shows it. The notification is shown “up front” if there is a channel setup otherwise it pops into the “shade”

Android Notification Channel

Android versions from Oreo onwards require “Notification Channels”. Without this, your informative and essential notification will not be shown on the locked screen of the device or even dropping from the top when the application is in the background (shown above).

What happens is your notification always gets put into the “shade” (the drop down area that the user normally drags down with their finger/thumb).

Processing the notification

This is not anything new to mobile developers but was a big deal for me. I mean if you cannot process the notification being clicked then really what’s the point of it?

So what I demonstrate, with the help of “hijacking” the FixItFast splash screen, is receiving the notification title and background information

Notification contains image

The notification contains an image on the right hand side (not to be confused with the application icon detailed below).

This image is controlled by the notification itself (therefore controlled by my server) and is pointing to an image hosted on the web.

Notification Application icon and colour

This was the last thing to solve. You can control the icon that is shown on the left hand side of the notification. This icon is the same that appears in the top bar of the mobile. Note that this icon actually acts like a “mask” and you decide what colour shows through that mask (where the png contains a transparent area).

With the icon you can change the colour. Above, you can see I have chosen a red to shine “through” the Oracle JET image in the notification. This also changes the text which displays the apps name: “FixItFast”.

Summary

Although there is nothing new here really, there is scarce information about notifications in Oracle JET that are not MCS related. I can understand that as Oracle JET is an enterprise product. However, for anyone else who likes the idea of taking JET for their projects then I have proved you can do this on your own using FCM.

Happy Coding!