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
1cordova plugin add cordova-plugin-fcm - Now you can get your token by implementing the code below.
123456//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
1cordova 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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!