How to add Push Notifications in your Cordova application using Firebase

8 min readMay 25, 2017

This article will walk you through all the process of having Push Notifications for both Android and iOS platforms in your Cordova application using the cordova-plugin-firebase.

UPDATE: According to some comments, the process described bellow may not be working anymore in some Android devices. Be aware of this before trying to use the following instructions. Sorry about that folks. I hope that some of this information can still be useful, unfortunately that's the life of a hybrid mobile developer. 😝

Let's be honest, work using Push Notifications with Cordova can be a pain in the ass, specially if you don't know much about the iOS environment and it's configuration. There are several steps to follow before add the plugin to you application, hopefully this article will clarify things up, so let’s start with the boring part: Configure your iOs environment.

1. Configuration and preparation of the iOS environment

By the way, you don't have to do any of this if you are working only with Android platforms, for Android the process is much easier. (Thanks Apple)

Okay, assuming you already got a paid developer account, go ahead and login to your Apple Developer account. Once logged in, you will be re-directed to the Apple Developer homepage. From there, you should see “Account” at the top navigation bar. Click that option.

Now you should be within your Apple Developer account.

Now look to the left side bar. The third row should say “Certificates, IDs & Profiles.” Select that option.

Now that you are in the “Certificates, Identifiers & Profiles” page, look to left side bar and there should be a section called “Identifiers.” Under that section, there is a link that says “App IDs.” Press that.

You should see all your iOS App IDs.

Now at the top right, you should see a + button. Press that. After that, you should be at this stage:

We now need to fill out the followings:

App ID Description — Name. Here, you should put your app’s name (e.g. Firebase Notification Demo)
App ID Suffix — Explicit App ID — Bundle ID. Here, you need to select a unique bundle identifier for your app (e.g. com.possible.firebasenotificationsdemo). Please make sure you use your own bundle ID instead of using mine.

Then under App Services, tick “Push Notifications.” Press continue.

After that, you will be redirected to a “Confirm your App ID” page. Press register.

Now we are back to our “iOS App IDs” page. Look for the App ID you just created. Press on it and you should see a a drop down of Application Services.

Scroll down until you reach the end of the drop down and you should see an “Edit” button. Press that.

The “iOS App ID Settings” page will show up, scroll all the way down until you see “Push Notifications.”

It is time for us to create a “Client SSL Certificate.” This will allow our notification server (Firebase) to connect to the Apple Push Notification Service. Under Development SSL Certificate, press on the “Create Certificate…” button.

Now we will see this.

To generate a certificate, we would need a Certificate Signing Request (CSR) file from our Mac. We will get back to this page later, but now we need the CSR file.

Generating a CSR file

To generate a CSR file, press cmd + space and do a spotlight search for “Keychain Access.” Open Keychain Access, and go up to the menu to select Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority…

A “Certificate Assistant” pop up should appear.

Fill in your email address and name. Choose “Saved to disk” and press Continue. Then save your CSR somewhere on your hard drive.

Uploading Your CSR File

Now that we have our CSR generated, it is ready to go back to the “Add iOS Certificate” page.

Scroll down. Press continue, and then click on the “Choose file…” button. Select the CSR file you just saved on your hard drive. Next, click continue again. Then the web page should say “Your certificate is ready.”

Now you can go ahead and click on the blue download button to download your certificate.

Preparing the APNs Certificate

Now that you have created the iOS certificate, you will need to prepare the APNs (short for Apple Push Notifications) certificate, which will be used later in the Firebase configuration. Open up Finder and locate the certificate you downloaded earlier.

Double click the certificate file (e.g. aps_development.cer) to add the certificate into Keychain Access.

Now open up Keychain Access. Under the “My Certificates” category, you should see the certificate you just added. Click the expand arrow to the left of the certificate’s name to reveal the private key option. Right click on the private key and press export.

Once clicking Export, a pop up will prompt you to save your private key as a .p12 file. Go ahead and click save.

Then enter a password if you want to protect your exported certificate. Click OK to confirm.

Finally! We just completed the configuration and preparation for iOS. Now we are ready to move onto Firebase! Let’s get started.

2. Configuring Firebase for Push Notifications

First, head over to Firebase console. Sign in with your Google account to enter the console. If you don’t know how to switch to the console, there is a button at the very top right that says “Go to console.”

Once you are at the console, click on the “Create New Project” button.

I name my project as “Firebase Notification Demo” but you’re free to use whatever the name you want. Simply click the “Create New Project” button to proceed.

After that, you are redirected to the project overview page. Now click the “Add Firebase to your iOS” button. Enter your iOS bundle ID, you can find it in beginning the config.xml file of your Cordova application.

id="com.possible.firebasenotificationdemo"

Then click the “ADD APP” button.

Follow the on-screen instruction to download the GoogleInfo.plist file. We are going to need this file later.

Click “continue” to go to the next step. You will see instructions showing you how to add the Firebase SDK into our project. Since we are not developing the app natively we don't have to follow this step. Just ignore and click “Continue” to proceed. Finally click “Finish” to complete the configuration. You should then see your iOS app in the Firebase overview page.

For the Android you will click “Add Firebase to your Android” and follow the exact same steps, but instead of downloading the GoogleInfo.plist file you will download the google-services.json file.

Now, back to the iOS part, we need to add the APNs certificate that we create for the Push Notifications. Look for the setting icon at the top right. Click the settings icon > Project settings.

Select the Cloud Messaging tab.

Scroll down, and click the “Upload Certificate” button.

Then a pop should appear to ask you for your Development APNs certificate.

Click browse and choose your APNs certificate (i.e. .p12 file) that you prepared in the earlier section. If you configured the file with a password, enter certificate password, followed by clicking the Upload button.

Now you should see a Development APNs certificate file in the Cloud Messaging setting.

For this article, we are going to use the Development APNs certificate. If you do decide to put your app onto the App Store, make sure that you have a Production APNs certificate file for Firebase as well.

Awesome! We finally finish all the damn configurations. Let's install the notifications plugin in our Cordova app.

3. Using the cordova-plugin-firebase

We took a while to get here, I know, but don't worry, it will be worth it.

Installation

Install the plugin by adding it your project’s config.xml:

<plugin name="cordova-plugin-firebase" spec="0.1.20" />

or by running:

cordova plugin add cordova-plugin-firebase@0.1.20 --save

Get your Firebase configuration files, GoogleService-Info.plist for ios and google-services.json for android, and place them in the root folder of your cordova project:

- My Project/
    platforms/
    plugins/
    www/
    config.xml
    google-services.json       <--
    GoogleService-Info.plist   <--
    ...

You can find more details about how to use the plugin in the project Github page:

https://github.com/arnesson/cordova-plugin-firebase

4. Extra notes

Notification icon

The iOS app will use the default application icon, but for new Android versions we need to add a separated icon file.

You can find more about the specifications of the icon here, there's also this tool that can help you to create them.

After that, you can add the icons to the <projectroot>/platforms/android/res/<drawable-*> folders. It can be done manually or creating a hook to automate the process.

That's it.

If you like this article, please click the ❤ to recommend it on Medium.

Happy coding. 🚀