DEV Community

loading...
Cover image for Cordova FCM-Push Notification

Cordova FCM-Push Notification

Ikwegbu George
The Last of my Parents | Lover of Tech | FrontEnd Dev
・5 min read

Image From Pexels by Brett Jordan

Are you a cordova developer and trying to implement the FCM push notification but encounter errors, ok, I was once like you few hours ago from writing this article.

So, I'd like to drop what I learned on how to solve this problem. Because the plugin itself has some bugs in it (At the time of writing this article).

Table Of Contents

Creating new Cordova Project

Navigate to the Folder you want to keep this project in.

cd 'C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\'
Enter fullscreen mode Exit fullscreen mode

Then create a new folder (directory) either from the GUI or

mkdir cordovaFcm
// this creates a new folder with name cordovaFcm
cd cordovaFcm
// this changes the current working directory to the newly created one.
Enter fullscreen mode Exit fullscreen mode

Next, create a cordova app within the new directory

cordova create .
 // This creates a boilerplate of the cordova app within the current  
 // project because of the period (.) we added.
Enter fullscreen mode Exit fullscreen mode

Adding Android Platform

Once you have created the new cordova app, the next thing to do
is to add a platform.

I currently do not own a macbook (😪), so my article will be 
based on the android platform. (I'm really sorry 😥)
Enter fullscreen mode Exit fullscreen mode
cordova platform add android
// this adds the android platform to the project
Enter fullscreen mode Exit fullscreen mode

Adding FCM plugin

We now need to add our plugin, with this, you won't need the firebase SDK, this plugin will handle everything... well yeah 😎.

cordova plugin add cordova-plugin-fcm
// Notice, I used 'fcm' and not 'FCM', as uppercase will throw an 
// error.
Enter fullscreen mode Exit fullscreen mode

Creating new Firebase Project

Break time....🥱🥱🥱,
Tired Baby Boss gif
just kidding,

ok, hope you are already familiar with Firebase, as we won't explain much about it.

  1. Go to firebase: https://firebase.google.com/
  2. Create an account if you don't have any, or go to console if you have and logged into it.
  3. Click on 'Add Project'
  4. Enter the project name, most suitable will be the actual project name.
  5. Accept the next slide.
  6. Choose or create a new account (I went with the default account).
  7. Create the project.
  8. Scroll down (on the side navigation bar, to the (at the time of writing this article) Engage section, and select the cloud messaging).
  9. Select the android icon, and continue.
  10. The next slide, will ask you to enter the android package name, this name must rhyme with the ID or Package name your have in you config.xml file (If you can, read the next section about config.xml).
<widget id="com.fcmpushnotification.georgeikwegbu" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> 
Enter fullscreen mode Exit fullscreen mode
It will be in reverse domain name eg. 'mrbrowny.dev.to' will be 
'to.dev.mrbrowny'

And the 'App nickname', will be the value you have in your 'name 
tag' within your config.xml file.

Please leave the 'Debug signing certificate SHA-1 (optional)' 
empty, as it's beyond this article, then click on the 'Register 
app'
Enter fullscreen mode Exit fullscreen mode
  1. After clicking on the 'Register app', the accordion, will bring out your 'google-services.json' for your app, download it.

Editing Config.xml file

Nothing much to do here, as you should know what and how you wish your app to look and work. But, key things to take into considerations are:

  1. The Package name, which is what you will provide on the firebase console.

  2. The name of the project, which is found within the 'name' tag.

  3. The description is left for you to decide what that will be 😉.

Adding the google-services.json File

google-services json file

The google-services.json file you downloaded, is to be added to:

  1. The root of the cordova project
C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\cordova_fcm\
Enter fullscreen mode Exit fullscreen mode
  1. The 'platform\android\app\' of the platform
C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\cordova_fcm\platforms\android\app\
Enter fullscreen mode Exit fullscreen mode

Correcting Plugin Bugs in Files

The 'cordova-plugin-fcm' has a bug init (as of the time of writing this article), so we would try and resolve those now:

Happy Gif

1. Change the following things:

firebase-core:+
firebase-messaging:+

//to 

firebase-core:16.0.3
firebase-messaging:17.6.0
Enter fullscreen mode Exit fullscreen mode

in


C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\cordova_fcm\platforms\android\app\build.gradle

Enter fullscreen mode Exit fullscreen mode

and

C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\cordova_fcm\platforms\android\project.properties
Enter fullscreen mode Exit fullscreen mode

2. Change the following things:

// From
var strings = fs.readFileSync("platforms/android/res/values/strings.xml").toString();
// to
var strings = fs.readFileSync("platforms/android/app/src/main/res/values/strings.xml").toString();

// AND

// From
fs.writeFileSync("platforms/android/res/values/strings.xml", strings);

// to
fs.writeFileSync("platforms/android/app/src/main/res/values/strings.xml", strings);
Enter fullscreen mode Exit fullscreen mode

in

C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\cordova_fcm\plugins\cordova-plugin-fcm\scripts\fcm_config_files_process.js
Enter fullscreen mode Exit fullscreen mode

Ok..... we done 😎😎😎😎

Congratulations gif

Running getToken Function inside Device Ready

I will be leaving the link to the github repo of the plugin itself, but all codes should be run after the device ready, so place it within the onDeviceReady function:

onDeviceReady: function() {
        this.receivedEvent('deviceready');
            FCMPlugin.getToken(function(token) {
            //this is the FCM token which can be used
            //to send notification to specific device 
            console.log('George here is the token', token);
            alert(token)
            prompt('', token)
            //FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) )
            //Here you define your application behaviour based on the notification data.
            FCMPlugin.onNotification(function(data) {
                console.log(data);
                //data.wasTapped == true means in Background :  Notification was received on device tray and tapped by the user.
                //data.wasTapped == false means in foreground :  Notification was received in foreground. Maybe the user needs to be notified.
                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));
                }
            });
        });
    },

// Since you'll need the token, to try and send notification from the firebase, I used the 
// 'prompt()', so you could copy the token from your phone, look for a way to get it to the 
// firebase website 😋
Enter fullscreen mode Exit fullscreen mode

Link to the cordova-plugin-fcm github

Discussion (0)