Push Notification Cordova, FCM And PHP

-
This post is about how to create a push notification in mobile app, using Cordova, firebase cloud messaging (FCM) and PHP as a server-side programming language. And we are gonna use cordova-plugin-fcm-with-dependecy-updated as a cordova plugin. An here's the step.

Example Cordova Push Notification

- Register a FCM project, and set your app id as, com.exampleyourprojectid.lokal or you can create you can create real app id for your own app, go to https://console.firebase.google.com/ to do that
- Create cordova project, using this command:
cordova create project_folder com.exampleyourprojectid.lokal
- Move terminal directory to your project using command:
cd project_folder
- Download the google-services.json on FCM dashboard, put it on your project_folder
- Add the plugin:
cordova plugin add cordova-plugin-fcm-with-dependecy-updated
- Add Android platform to your cordova project:
cordova platform add android
- Now build your app:
cordova build android
- Open android studio, open project locate to the path project_folder/platform/android, then after android finish synchronizing your project,  add rules to your root-level build.gradle file, to include the google-services plugin and the Google's Maven repository:

buildscript {
    // ...
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:4.2.0' // google-services plugin
    }
}
allprojects {
    // ...
    repositories {
        // ...
        google() // Google's Maven repository
    }
}

Based on this tutorial: https://firebase.google.com/docs/cloud-messaging/android/first-message

- Now open other text editor, add attribute on body: <body onload="onLoad()"> and some JavaScript code line at www/index.html

<script type="text/javascript" src="cordova.js"></script>
<script>
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
    document.addEventListener("pause", onPause, false);
    document.addEventListener("resume", onResume, false);
    document.addEventListener("menubutton", onMenuKeyDown, false);
    // Add similar listeners for other events

    FCMPlugin.onTokenRefresh(function(token){
        // alert("TOKEN: "+ token );
    });
    FCMPlugin.getToken(function(token){
        var t = null==token ? "NULL": token;
        // alert("TOKEN IS : " +t);
    });
    FCMPlugin.onNotification(function(data){
     
        if (null==data){
            alert("data is null");
        }else{
            if(data.wasTapped){
                //Notification was received on device tray and tapped by the user.
                alert( JSON.stringify(data) );
            }else{
                //Notification was received in foreground. Maybe the user needs to be notified.
                alert( JSON.stringify(data) );
            }         
        }
    });
    //Subscribe to topic must be last or other callback will not work
    FCMPlugin.subscribeToTopic('generalTopic');
}
function onPause() {
    // Handle the pause event
}
function onResume() {
    // Handle the resume event
}
function onMenuKeyDown() {
    // Handle the menubutton event
}
</script>

- Now test the app using emulator:
cordova emulate android to emulate in AVD
- To test push notification using postman, download postman, then import fire_base.json to postman, you can download here : fire_base.json
- Still in Postman, change the header authorization key using key you get from google Firebase dashboard
- Choose fcm_send_test then click the button "Send"

Postman Push Notification

- To create a PHP as a server side to send notification, create the following function:

<?php
function send_push_notification(){
$url = 'https://fcm.googleapis.com/fcm/send';
$fcm_api_key = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
$title = "test";
$body = "test";
$topic = "generalTopic";
$data_string = '{
    "notification": {
        "title": "'.$title.'",
        "body": "'.$body.'",
        "sound": "default",
        "click_action": "FCM_PLUGIN_ACTIVITY",
        "icon": "fcm_push_icon"
    },
    "data": {
        "param1": "value1",
        "param2": "value2"
    },
 
    "to": "/topics/'.$topic.'",
    "priority": "high",
    "restricted_package_name": ""
}';
$ch = curl_init(  );
curl_setopt( $ch, CURLOPT_URL, $url);
curl_setopt( $ch, CURLOPT_POST, true);
curl_setopt( $ch, CURLOPT_POSTFIELDS, $data_string);
curl_setopt( $ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt( $ch, CURLOPT_HTTPHEADER, array(
    'Content-Type: application/json',
    'Authorization: key='.$fcm_api_key
));
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec( $ch );
echo json_encode($response);
}
?>

Every time you want to  send push notification to mobile device, call the send_push_notification() function above.

Popular posts from this blog

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

-
Image
MySQL and MariaDB password As already mentioned in the title of this blog, this error message sometimes occurred when we are trying to update our root password database, either MySQL or MariaDB, The error says: ERROR 1348 (HY000): Column 'Password' is not updatable This is because if we use this SQL command to update our database root password, and it turn out to be Restricted by MySQL to use update on mysql database. UPDATE mysql.user SET Password=PASSWORD('1234') WHERE User='root'; The solutions for MySQL Error1348 So you can not update a user password using Update commands, to update the password, use ALTER commands instead. like the following. ALTER USER 'root'@'localhost' IDENTIFIED BY '1234'; And then you need to do the flush privileges to commit previous queries (that alter command above) into the system, simply do like this. flush privileges; So now you have your root with password 1234. Although it is recommended to...
Read more

How To Create Spring Boot Project Using Netbeans

-
Image
Spring Boot is a handy tool that simplifies the development of Spring Framework applications by reducing the need for cumbersome configuration. In this tutorial, I'll guide you through creating a Spring Boot application using the Netbeans IDE. While you can certainly create a Spring Boot application in Netbeans manually, it's much easier with a plugin designed for Spring development. Here's a step-by-step guide to get you started: 1. Install the Spring Boot Plugin: Open Netbeans and navigate to the Tools menu. Click on "Plugins." Once the Plugins window opens, select the "Available Plugins" tab. Look for the "Nb SpringBoot" plugin, then install and activate it. 2. Create a New Spring Boot Project: After restarting Netbeans IDE, you can create a new project with Spring Boot. Go to File > New Project. Under Categories, select Maven, then choose "Spring Boot Basic." 3. Add Dependencies: With your new project created, open the po...
Read more

Spring Kafka - How to use ReplyingKafkaTemplate send and reply synchronously

-
Image
Microservice Spring with Apache Kafka Today, I want to share how to use Kafka. It's quite interesting once you get the hang of it, and I hope my explanation will make it a bit easier for you. So, Kafka is primarily known as an asynchronous messaging queuing system. This means it allows different parts of your application to communicate with each other without waiting for immediate responses. However, there are times when you might need a more immediate reply from another service in your project. Luckily, Kafka can handle this too. Here’s how it works: The client side sends a message to the server side via Kafka. This message includes a special identifier in the Kafka header request, known as KafkaHeaders.CORRELATION_ID, along with a topic where the server should respond. The server, after processing the request, sends a message back to the same topic with the same correlation ID. This way, the client knows that the message is a response to its initial request and can act accordingl...
Read more