How to do push notifications with Firebase

Reading Time: 5 minutes

As I tried to do push notifications with firebase myself I stumbled over a few tutorials and StackExchange tips but none of them worked to my delight. As I – you might have realized – accomplished this task I chose to sit down to write this article. So let’s jump right into it!

Prerequisites

In this little tutorial, we will achieve to send and receive Push notifications using Firebase on a mobile device. In combination with existing plugins, this should be relatively easy. This tutorial will be using PhoneGap. But don’t worry, it should be compatible with every other framework of this kind. But now let’s start with what we need:

A little side note on this: We won’t be able to use the “Cloudbuild” function. This is because of how the Firebasex Plugin works. We will still be able to build it locally and copy other the App to our phone.

Creating the Phonegap Project

After you successfully installed Phonegap on your PC we can get directly into it by creating a new project. Just open the folder you want to have the project stored. Open a terminal within this folder and enter the following line:

phonegap create [your project name]

This line will create a folder named after the project name. Inside you should find your Phonegap folder structure. Now type the following command into the terminal so we can carry on using the commands correctly

folder structure -  how to do push notifications with firebase
“Initial folder structure”
cd [your project name]

This line will “move” the terminal into the project folder. We need to do this otherwise all following commands won’t work.

Install the firebase plugin

We can now go ahead and install the Firebase plugin. Just enter the following lines into the terminal and wait until it has finished (my take a short moment)

cordova plugin add cordova-plugin-firebasex

Important: Don’t use “phonegap plugin add cordova-plugin-firebasex” because at the time posting it does not support Cordova 9.0.

Now you should have the plugin installed. You can double-check by looking inside the “plugin” folder and make sure there is a folder called “cordova-plugin-firebasex“. If so then you have successfully installed the plugin (yippie).

For the next step, you need to visit and create a Firebase account. Now you can log in and go to your console. Now click “Add project”. You will be asked to give your project a name. After doing so you will have to wait until your project is finally created. At first, the dashboard might look a bit overwhelming but no problem. We only need one specific part of it the so-called “Cloud Messaging“. To do so move your mouse cursor to the left and scroll down until you find the section “Grow” and within the “Cloud Messaging” link. Click on it and you will find everything you want. But to get started we need to add an app. To do so click on the IOS, Android or HTML code icon (In our case we will build an android app). Enter your “Android package name” (for example my.test.project). After that, you should download the google-services.json. The rest you can skip by clicking next.

Configuring the app

Add the google-services.json to your project folder (where you can also see the config.xml file). To generate this file you have entered an “Android package name”. Copy this name and open the config.xml file. On line two you should find the following:

<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">

Change the id to match your package name:

<widget id="your.package.name" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">

On line 12 you should see the option to change the android-minSdkVersion. We have to change it to match it at least “19”:

    <preference name="android-minSdkVersion" value="19" />

Writing the app

After we finished configuring we have to write at least a little code. Withing the index.js you should find

var app = {...}

Inside this search for the

onDeviceReady: function () {...}

function. Add the following line into it

window.FirebasePlugin.getToken(function(token) {
    // save this server-side and use it to push notifications to this device
    console.log(token);
}, function(error) {
    console.error(error);
});

window.FirebasePlugin.onTokenRefresh(function(token) {
    // save this server-side and use it to push notifications to this device
    console.log(token);
}, function(error) {
    console.error(error);
});

window.FirebasePlugin.onMessageReceived(function(message) {
    console.log("Message type: " + message.messageType);
    if(message.messageType === "notification"){
        console.log("Notification message received");
        if(message.tap){
            console.log("Tapped in " + message.tap);
        }
    }
    console.dir(message);
}, function(error) {
    console.error(error);
});

These lines of code will add the actual functionality of receiving Push notifications. For further information visit this page

Building the app

Let’s start by adding the platform. As I stated before we are going to use android. So go ahead and type the following code into the terminal:

cordova platform add android

You mustn’t use “phonegap” instead of “cordova” at least at the time of this being published. The reason for this is that PhoneGap hasn’t Cordova 9.0 as standard. So we won’t use it within the terminal. After we have successfully added the plugin we can just test-build the app to check everything is working as intended:

phonegap build android

If no errors occur you have successfully created a push notifications app!

Test the App

Under “yourprojectname\platforms\android\app\build\outputs\apk\debug” you can find your “app-debug.apk”. Copy this over to your mobile phone and install it. Now go to your Firebase Console and go to Cloud Messaging. Click on “Send your first message” and fill in your title and text. If you want to you can also add an Image and personalize your notification even further. After you select your app as target you can configure the scheduling and additional data. If you finished this process click on review and then publish. If everything went fine you should be able to view your Notification on your mobile phone(s). Congratulations!

PhoneGap app - how to do push notifications with firebase
Successfully received a push notification

What next?

Push notifications are a great way to notify your users. With this example, you can send and receive notification via firebase. In this tutorial, we have just begun to scratch the surface. There are A LOT of possibilities to use firebase. For example, you can carry additional data, only publish to certain users and much more. If I have time I may add up on this and make a kind of “Firebase” tutorial using not only the notification system but also much more. Until now that should be it. If any questions or errors occur feel free to post a comment or send an email. Otherwise, have a nice day and thank you for tuning in.

Liam

2 comments

  1. When prompted, select to use an existing Google Analytics account or to create a new account. If you choose to create a new account, select your Analytics reporting location, then accept the data sharing settings and Google Analytics terms for your project.

Leave a Reply

Your email address will not be published. Required fields are marked *