firebase-messaging-overview
PhoneGap

Setup Firebase Push Notification in PhoneGap App

Firebase: Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages at no cost.

We can use Firebase Cloud Message for sending instant messages of upto 4KB in size.
messaging-overview
Requirements: FCM clients require devices running Android 2.3 or higher that also have the Google Play Store app installed, or an emulator running Android 2.3 with Google APIs. Note that you are not limited to deploying your Android apps through Google Play Store.

Notification Message: This message can be sent from firebase console UI. By sending this kind of messages, you won’t get much control over the notification. The notification will be shown automatically when the app is in background.
Configuration:
Steps to follow are mentioned below:
1. Create a new project in Firebase console.(https://console.firebase.google.com/)

1
2. Name the project in Firebase console and choose country.

2
3. After creating the project, you will get Firebase overview page. Select “Add Firebase to your Android Application”.

3
4. After adding an Application to your Firebase project, enter your Application’s package name, when prompted. Here SHA-1 signing certificate is optional.

4
5. After setting the Application app will display on firebase dashboard.

5
6. In setting menu (Cloud Messaging tab) you will get your sender Id and Server Key.

6

Phonegap Plugin Implementation:
1. Add your Push Notification plugin phonegap-plugin-push Version: 1.4.2
You can add with CMD: cordova plugin add phonegap-plugin-push
2. Set push notification example code-


var push = PushNotification.init({ "android": {"senderID": "YOUR SENDER ID} );
push.on('registration', function(data) {
// data.registrationId
});push.on('notification', function(data) {
// data.message,
// data.title,
// data.count,
// data.sound,
// data.image,
// data.additionalData
});
push.on('error', function(e) {
// e.message
});

3. When FCM registration is success, you will get RegistrationID. It is unique for all device and all application.
4. When you send push message from server,  notification function will be called. You can receive these data such as message, title, image, sound.
5. If error is occurred then error function is called.

Full example for Push Notification:

&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;amp;lt;!DOCTYPE HTML&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
 &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
 &amp;amp;amp;amp;lt;title&amp;amp;amp;amp;gt;Push Demo&amp;amp;amp;amp;lt;/title&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
   &amp;amp;amp;amp;lt;script type="text/javascript" src="cordova.js"&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
      &amp;amp;amp;amp;lt;script type="text/javascript"&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
         document.addEventListener("deviceready",onDeviceReady,false);&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
                function onDeviceReady() {&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
                     var push = PushNotification.init({ "android": {"senderID": "YOUR_SENDER_ID"}});&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
         			 push.on('registration', function(data) {&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
         			 alert(data.registrationId);&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
         			 });&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;p&amp;amp;amp;gt;         			 push.on('notification', function(data) {&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
         			 alert(data.title+" Message: " +data.message);&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
         			 });&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;p&amp;amp;amp;gt;         			 push.on('error', function(e) {&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
         			 alert(e);&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
         			 });&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
                }&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;p&amp;amp;amp;gt;      &amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;amp;lt;/head&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;amp;lt;body&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
 &amp;amp;amp;amp;lt;h1&amp;amp;amp;amp;gt;Push Notification Example&amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>

PhoneGap plugin for Android Push Notification:
version : 3.4.5
Plugin Link: https://github.com/jrortiz8585/plugin-beacon/blob/6f42767/README.md
Sample Code:

function registerPushwooshAndroid() {
var pushNotification = cordova.require("com.misiva.plugins.pushwoosh.beacons.PushNotification");
document.addEventListener("push-notification", function(b) {
var notification = b.notification;
alert(notification.title);
});
pushNotification.onDeviceReady({
projectid: "YOUR SENDER ID"
});
pushNotification.registerDevice(function(b) {
onPushwooshAndroidInitialized(b)
}, function(b) {
console.warn(JSON.stringify(["failed to register ", b]))
})
}
function onPushwooshAndroidInitialized(b) {
alert("push token: " + b);
var a = cordova.require("com.misiva.plugins.pushwoosh.beacons.PushNotification");
a.getPushToken(function(c) {
console.warn("push token: " + c)
});
a.getPushwooshHWID(function(c) {
console.warn("Pushwoosh HWID: " + c)
});
a.getTags(function(c) {
console.warn("tags for the device: " + JSON.stringify(c))
}, function(c) {
console.warn("get tags error: " + JSON.stringify(c))
});
a.setLightScreenOnNotification(false);
a.setTags({
deviceName: "hello",
deviceId: 10
}, function(c) {
console.warn("setTags success")
}, function(c) {
console.warn("setTags failed")
})
};

Send Message From Server:

&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;amp;lt;?php&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;p&amp;amp;amp;gt;// API access key from Google API's Console&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
define( 'API_ACCESS_KEY', 'YOUR-API-ACCESS-KEY-GOES-HERE' );&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
$registrationIds = array("DEVICE REGISTRATION ID");&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;p&amp;amp;amp;gt;// prep the bundle&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
$msg = array&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
(&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
	'message' 	=&amp;amp;amp;amp;gt; 'here is a message. message',&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
	'title'		=&amp;amp;amp;amp;gt; 'This is a title. title',&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
	'subtitle'	=&amp;amp;amp;amp;gt; 'This is a subtitle. subtitle',&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
	'tickerText'	=&amp;amp;amp;amp;gt; 'Ticker text here...Ticker text here...Ticker text here',&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
	'vibrate'	=&amp;amp;amp;amp;gt; 1,&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
	'sound'		=&amp;amp;amp;amp;gt; 1&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
);&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;p&amp;amp;amp;gt;$fields = array&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
(&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
	'registration_ids' 	=&amp;amp;amp;amp;gt; $registrationIds,&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
	'data'			=&amp;amp;amp;amp;gt; $msg&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
);&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;p&amp;amp;amp;gt;$headers = array&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
(&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
	'Authorization: key=' . API_ACCESS_KEY,&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
	'Content-Type: application/json'&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
);&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;p&amp;amp;amp;gt;$ch = curl_init();&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
curl_setopt( $ch,CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send' );&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
curl_setopt( $ch,CURLOPT_POST, true );&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
curl_setopt( $ch,CURLOPT_HTTPHEADER, $headers );&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
curl_setopt( $ch,CURLOPT_SSL_VERIFYPEER, false );&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
curl_setopt( $ch,CURLOPT_POSTFIELDS, json_encode( $fields ) );&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
$result = curl_exec($ch );&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
curl_close( $ch );&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;p&amp;amp;amp;gt;echo $result;&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>

The API consists of two parts: Registering a device so it is ready to receive push notifications and publishing a notification.

Set Your “DEVICE REGISTRATION ID” and “APP ACCESS KEY” and call this php page, it will send a push message to your registered device. That’s It 🙂

 

Setup Firebase Push Notification in PhoneGap App

Most Popular

Have a Great startup Idea and want to make it possible? Looking for an extraordinary team to build a mobile or Web app for your idea to come into reality? Then you are at right place. I provide my services for mobile and web app development.

Copyright © 2019 CrocoCode. All rights reserved.

To Top