Mobile Push Notifications for Android and Web Push using FCM

  • Updated: Oct 20, 2016
  • Starting Guide
  • Android
  • Web Push API

This is a step by step picture guide that will show you how to set up your FCM (Firebase Cloud Messaging) services in order to receive push notifications in your Android or Web Push applications.

Creating a Firebase project

In order to use FCM you need to create a Firebase project at https://console.firebase.google.com/

Login with your Google account and select "Create a new project".

When you press the button a dialog with the form to create the project will appear. Enter your project name and press the button with the label "Create Project".

If everything went ok your project was created and you are redirected to the detail page as shown below.

Getting configuration for Web Push

If you don't intend to use Web Push Notifications you can proceed to the next step.

However, if you are developing a web site and want to receive Web Push Notifications, click the "Add Firebase to your app" button and keep note of the configuration code, you'll need it later.

Enabling Notifications

If you are only interested in Web Push Notifications for your website you can skip this section. For Android Notifications please proceed with the following steps.

Now that you created your Firebase project you have to enable the Notifications.

Search for the "Notifications" tile as shown below and click "Get Started".

In the Notifications page click the Android logo to add an Android app as shown below.

Enter your Package Name (you must enter exactly the namespace you have entered in the applicationId property of your app module build.gradle) and click the "Add App" button.

NOTE: Download the google-services.json if you want but you don't really need to move it to your app module root directory (Realtime uses only the required Firebase features to send Notifications, previously known as Google Cloud Messaging).

Skip the dependencies part of the Firebase wizard (you don't need them for the Realtime integration) by clicking "Skip to the console" as shown below in the pink arrow.

Getting the API Credentials

The last step is to get your Firebase API key which you will provide us so we can send push notifications to your android or web push application.

Select the cog wheel on the top near your project name like shown below and select the "Project Settings" option.

Now select the "Cloud Messaging" option on the top as shown below.

Make note of your "Server key" and "Sender ID" as shown below.

The "Server Key" will be required to configure your Realtime Application Key (see next section) and the "Sender ID" (previously known as Google Project Number) will be used in your app or website.

Configuring your Realtime Application Key

Now you just need to edit your Realtime Cloud Messaging subscription details.

To do that select the Realtime subscriptions at the Accounts console and select the edit details option of your subscription.

The Mobile Push Notifications will be OFF by default.

Slide the Mobile Push Notifications to the ON position. The configuration fields will be shown.

At the Firebase Cloud Messaging (Android) section of the configuration form, enter the "Server Key" you got in the previous step in the server key field of the Realtime Accounts Console.

Now you only need to click the SAVE button to register your changes and start using the Realtime Mobile Push Notifications.

At this moment you are ready for receiving push notifications. Congratulations!

Subscribing website users using Web Push Notifications

Checkout the Web Push Notifications example to get through the remaining configuration you need to perform in your website.

Subscribing Android devices to Mobile Push Notications

In order to use the Realtime Mobile Push Notifications, you need to add the Android SDK dependency to your project build.gradle file and instantiate an OrtcClient object (more technical details can be found here).

You'll need to call the setGoogleProjectId method of the OrtcClient class passing your Firebase Sender ID (see previous steps on how to obtain it).

To subscribe to a Realtime channel using Push Notifications you only need to call the subscribeWithNotifications method instead of the normal subscribe method.

        ortcClient.subscribeWithNotifications("myChannel", true, new OnMessage() {
            public void run(OrtcClient sender, String channel, String message) {
                Log.i(TAG, String.format("Message or push notification on channel %s: %s ", 
                	channel, message));
            };
        });
        

The OrtcClient class will take care of all the details like retrieving the user device token and registering it at the Realtime Messaging servers for the appropriate Realtime channel.

Handling push notications when the app is closed

When your app is not running there's no ORTC client to receive the message so you must implement a GcmOrtcBroadcastReceiver class to receive the raw push notifications sent by Firebase.

In this class you'll parse the raw Firebase message to get the channel, original message and payload (in the case of custom push notifications) and do your thing (probably adding a notification to the device Notification Manager).

Here is a complete example of a GCM receiver class that displays a notification in the device Notification Manager if the app is not in foreground.

Don't forget to add your GCM receiver to your AndroidManifest.xml file:

		        <receiver
		            android:name="receiver.GcmReceiver"
		            android:permission="com.google.android.c2dm.permission.SEND" >
		            <intent-filter>
		                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
		                <category android:name="[ENTER_YOUR_APP_PACKAGE]" />
		            </intent-filter>
		        </receiver>

		        <service android:name="ibt.ortc.extensibility.GcmOrtcIntentService" />
        

Example

We know there's nothing like a good example, so checkout the example app, using mobile push notifications to notify users of new messages when they are not running the app.

You’ll be able to find the complete source in GitHub at the following repository: https://github.com/realtime-framework/MessagingAndroidChat

Back to Mobile Push Notifications for iOS (APNS) - Next: Examples

If you find this interesting please share: