Build a #Firebase Cloud Messaging App — Part Three

This is the third and final part of building a simple app that uses Firebase Cloud Messaging (FCM).

In Part One, you saw how to build a very simple app server that handles your registration tokens, and uses them to address your users, telling the Firebase Cloud Messaging server to dispatch the Messages for you.

In Part Two you then created an Android app, linked it to Firebase using the Android Studio tools, and then got your Instance ID token, passing it to the app server from part 1.

In this post you’ll see how to receive the message from FCM, and then create an Android notification from it. This notification will then render in the notifications tray on your phone, as well as on any connected devices such as an Android Wear watch.

Ready to go? Let’s roll up our sleeves and get started!

Create a Class that Extends FirebaseMessagingService

In Android Studio, in the same folder as your MainActivity and CallFCM classes, add a new one.  To do this right click on the folder, and select New->Java Class as shown here:

Make sure that it extends FirebaseMessagingService. You can do that by specifying it in the Superclass entry on the Create New Class Dialog:

Before editing the class, you’ll need to configure it as a receiver in your Android Manifest file. You can see this in the next step.

Updating your Android Manifest for FCM Receiver

Your Android Manifest likely looks something like this:

Add the receiver as a service below the Activity tag for the Main Activity, and above the closing </application> tag. Here’s what you should add in:

 

For more about how intent filters work — check out the Android docs. In this case I’m specifying that the FCM Receiver class can respond to a Firebase.MESSAGING_EVENT intent.

Coding the FCMReceiver

A class that extends the FirebaseMessagingService needs to override the onMessageReceived function. This will be called, with a RemoteMessage as parameter, when the device has a message sent to it by FCM.

Here’s a simple implementation that checks to see if there is a non-null message that contains a payload. It also reads the data from the message into a string, and calls ‘sendNotification’ with that data. You’ll see that function a little later — where it is used to generate an Android notification.

By now your app should be ready to receive notifications, but let’s just make it a little nicer with an Android activity that will launch when you touch on the notification.

Handling the Notification with an Activity

When the message comes in from FCM we’ll generate a notification, and when the user touches on that notification, a specific activity will open in the app. To keep things very simple we’ll have the activity just render the text from the notification, but you could do whatever you want with it!

So let’s create this activity first.

In the usual way, right click on the project folder, and select New->Activity->Empty Activity

 

You’ll see a dialog asking you to name it. Call it ActivateFromNotification as shown here:

 

Note that it creates a new layout called ‘activity_activate_from_notification’ — find this file and edit it to add a new TextView control:

Now, in the code for the Activity, go to onCreate and change it to read content from a bundle, and put that content into the TextView you’ve just created. It should look like this when you’re done:

Coding the sendNotification function

In your FCMReceiver class you had a stub function for sendNotification — this should create an Android notification and specify the ActivateFromNotification activity as its handler — i.e. when the user touches on the notification, that Activity should launch, and render the content of the notification in its TextView. Let’s see how to build that.

The first step is to create an intent for the ActivateFromNotification class that we just created. We can bundle the notification content as an extra in this intent.

We then create a notification with a NotificationBuilder to create the Android notification, specifying this intent as its content intent. We can also have a bit of fun with a sound using the RingtoneManager class 🙂

 

That’s pretty much it. Put this code in your FCMReceiver class. It should simply be in a method like this:

Note that this uses a small icon called R.drawable.ic_stat_name. To get this, right click on your res->drawable folder. Select ‘New Image Asset’, and then pick notification icons as shown here.

So let’s run the app and see what happens!

Running the App

When you first run it you should see something like this. It’s a pretty bad UX, so it’s up to you to improve it!

Here you can see it running in the emulator, and the app server alongside. Nobody is registered yet.

I click the ‘REGISTER’ button in the app, and then refresh the site. You can see that it received the token!

I now send a message from the site to the device…

Note the text in the message, you’ll see that again in a moment. Note also that the icon is a little Android — this is because of the small icon that was specified in the code as you saw above.

I then swipe down on the notification tray and you can see the text that I typed:

Finally, I touch on the notificaiton…and you can see the activity is launched, and the TextView is filled with the text that was in the notification!

…and that’s it. You’ve just built an end-to-end system for Cloud Messaging in your Android app. This app and server are obviously very rough round the edges, but hopefully they’ll provide the basis for learning what you can do with this great technology!

If you have any questions, please post them in the field below, or look me up on Twitter as lmoroney@

Thanks!