Firebase Cloud Messaging in PhoneGap and ASP.NET core

Firebase Cloud Messaging (FCM) is the new push notification services from Google. In this post, I will show how to integrate FCM in a PhoneGap project and send push notification to devices using ASP.NET core.

Setting Up FireBase

First and foremost, we need to create an android app in Firebase. Login to https://console.firebase.google.com with your google account.

Select “Add Firebase to your Android App”
Fill up the fields in the text fields. Take note that the android package name has to be the same as your Phonegap package name.
The next step is where you will find the google-services.json file. Download this file to your computer. We need this file to register our app with Firebase and in return, we will have a device token.
Continue with the rest of the steps.
As we are sending push notifications from our server, we will require a server API and a sender ID. It’s extremely straightforward. Just click “Settings” from the app and click on “Cloud Messaging Tab”
Note down the values for Server key and SenderID.

So far, we have a file named google-services.json, Server key and SenderID and we are ready to dive into PhoneGap and ASP.NET.

Setting PhoneGap

Before we continue, I will like to point that the following steps are tested on Android using Cordova cli 7.0.1, Cordova android 6.2.3 and Android SDK 25.

Setting Phonegap for push notification is such a breeze, kudos to author of cordova-plugin-fcm (https://github.com/fechanique/cordova-plugin-fcm). The instructions for setting up fcm in PhoneGap can be found at the github page. In short,

copy your google-services.json to your root project.
run

cordova plugin add cordova-plugin-fcm

1

cordova plugin add cordova-plugin-fcm

Now you can get your token by implementing the code below.

//FCMPlugin.onTokenRefresh( onTokenRefreshCallback(token) );
//Note that this callback will be fired everytime a new token is generated, including the first time.
FCMPlugin.onTokenRefresh(function(token){
    alert( token );
    //Send this token to your server
});

//FCMPlugin.onTokenRefresh( onTokenRefreshCallback(token) );

//Note that this callback will be fired everytime a new token is generated, including the first time.

FCMPlugin.onTokenRefresh(function(token){

alert( token );

//Send this token to your server

});

The token should be sent and store in the server. I highly recommend to use onTokenRefresh method, this method will return a token every time a new token is generated.

Before we can build our phonegap project, we need to ensure that Google Service is installed in our android SDK as shown below:

Now, we ready to run

cordova build android

1	cordova build android

Sending notification to FCM from ASP.NET

Replace applicationID and senderId with the Server Key and SenderId respectively from FireBase console.

The deviceId will be the token generated from onTokenRefresh method.

public async Task<bool> SendPushNotification()
        {
            var applicationID = "xxx";
            var senderId = "xxx";
            var deviceId = "xxxx"

            using (var client = new HttpClient())
            {
                //do something with http client
                client.BaseAddress = new Uri("https://fcm.googleapis.com");
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
                client.DefaultRequestHeaders.TryAddWithoutValidation("Authorization", $"key={applicationID}");
                client.DefaultRequestHeaders.TryAddWithoutValidation("Sender", $"id={senderId}");

               
                var data = new
                {
                    to = deviceId,
                    notification = new
                    {
                        body = "This is the message Body",
                        title = "This is the title of Message",
                        icon = "myicon"
                    },
                    priority = "high"

                };

                var json = JsonConvert.SerializeObject(data);
                var httpContent = new StringContent(json, Encoding.UTF8, "application/json");

                var result = await client.PostAsync("/fcm/send", httpContent);
            }
            return true;
        }

public async Task<bool> SendPushNotification()

{

var applicationID = "xxx";

var senderId = "xxx";

var deviceId = "xxxx"

using (var client = new HttpClient())

{

//do something with http client

client.BaseAddress = new Uri("https://fcm.googleapis.com");

client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

client.DefaultRequestHeaders.TryAddWithoutValidation("Authorization", $"key={applicationID}");

client.DefaultRequestHeaders.TryAddWithoutValidation("Sender", $"id={senderId}");

var data = new

{

to = deviceId,

notification = new

{

body = "This is the message Body",

title = "This is the title of Message",

icon = "myicon"

priority = "high"

};

var json = JsonConvert.SerializeObject(data);

var httpContent = new StringContent(json, Encoding.UTF8, "application/json");

var result = await client.PostAsync("/fcm/send", httpContent);

}

return true;

}

And we are done!

Leave a Reply Cancel reply