How to add push notifications to your Cordova app in iOS and Android, using Firebase (done right in 2020).

6 min readJan 6, 2020

This is a updated guide for 2020, from the one posted from Felipe Evangelista in 2017. I decided to post this guide, when working in a Cordova project at my job as a Front End Developer at Binmatter.

This guide uses the newly updated FirebaseX plugin for Cordova projects, this is a fork of the original Fireb Base Plugin, and its based on the example project founded in the plugin’s npm site.

Note: As pointed out from the author, its important that if you have any of previous plugins of Firebase installed in your project (Cordova Firebase or Cordova Firebase Library), you delete them first and the install the new one:

rm -Rf platforms/android
cordova plugin rm cordova-plugin-firebase
rm -Rf plugins/ node_modules/
npm install
cordova plugin add cordova-plugin-firebasex
cordova platform add android

Note: If you are creating a cordova project from an existing project made with another framework, you must

In order to send push notifications to your cordova app you will need:

Cordova Plugin FirebaseX (found here)
A Cordova project

iOS

In the previous guide from Felipe, you had to generate a Certificate to allow commuinications between Firebase and the iOS app, but this is no more neccesary, Apple and Google now recommend you to insted use Key.

Requisites:

A paid Apple Developer Account(to enable and test push notifications)
A cordova project
A Google account (For the firebase configuration)

The following steps are for those who already have a Cordova app o are going to build one with frameworks such as Angular.

First, lest’s do the iOS and Firebase Console configuration:

Registering your app with Apple to activate push notification service.

Login to your Apple Developer account to create a App Identifier for your app.
Type the Bundle ID you are going to use for publishing your app. It’s important to remember your Bundle ID as we are going to need it for the Firebase project configuration. Remember this must be the same configured in the config.xml file in your cordova project.
Look for the “Capabilities” section and check the Push Notifications service and then press Continue.

Generating a Key to allow Firebase communicate with your app.

Now let’s generate a Key, this one its going to be uploaded later to the Firebase Console. Head to Keys in the Apple Developer page, and generate a new one with the name you want.
Check the Apple Push Notification Service (APNs) checkbox, press Register.
Before clicking DONE, check for the Key ID (Example: Key ID: GAMDX77N7L) copy this text to a safe place, and finally download the Key to your computer (this Key won’t be downloadable later, so save it to a know place in your computer), this key will come in a .p8 format.

Creating the Firebase project and uploading the Key from Apple.

Open the Firebase Console: https://console.firebase.google.com/
Add a new Project with the name of your app.
Look for the Add iOS platform option and click it, Firebase then will ask you for the Bunddle ID (the one you just created at the Apple Developer Page), type it and click next.
In the following step, Firebase will give you the option to download a GoogleService-plist file, ignore it for now. Click next until you finish the App registration with Firebase.
Click on the iOS option in your Firebase project overview page and click on the setting icon. This will open the iOS configuration page.
Go to the Cloud Messaging tab and look for the section requesting the APNS Auth Key with the upload button next to it. This will ask you for 3 things: The downloaded Key file from Apple (.p8), the Key ID Apple gave you when you created the Key (you can view it again by clicking in the Key, in the Keys section in your Apple Developer Dashboard) and finally, the Team ID. Do this 3 things and click upload.
Finally, go back to the General tab, look for the GoogleService-info.plist file download button and click it, this will download the configuration file needed by the FirebaseX Cordova Plugin ir order to configure the app notifications feature.

Now, let’s configure and build our Cordova app

Install Cordova Plugin FirebaseX. Remember, if you have previous versions of the Firebase Plugin delete them before installing this one.
By now, Cordova should have added the FirebaseX plugin in a Plugins folder in the root folder of your project, if this havent been added, check the example code provided in GitHub for reference in how to solve this.
Add this JS folder to your www/ folder (This is an example but functioning file with vanilla javascript functions that initiate and manage the push notification service). This file comes in the example project of the plugin. The files should be placed like this: www/js/index.js
Add the 3 of them to your project’s index.html file.

5. Finally add the GoogleService-info.plist file to the www/ folder.

6. Run cordova platform add ios in your terminal to add the iOS platform.

7. Once finished, open your project’s folder/platforms/ios and look for the your_project_name.xcworkspace and open it to build the app in Xcode. Do not open the your_project_name.xcodeproj.

Building the app correctly in Xcode.

Check the same Developement Team is selected from the one you created the App ID in the Apple Developer Dashboard, listed in the Signing & Capabilities tab in Xcode.
Check that the Notification Service is listed in the Signing & Capabilities tab in Xcode, bellow the Signin section.
Also, Xcode requeries you to add the Remote Notifications “Background Mode”. Add this by clicking the +Capability button.

Android

Setting up your Cordova project with the Push Notifications Android configuration file.

Open the Firebase Console: https://console.firebase.google.com/
Add a new Project with the name of your app (only if you haven’t done this before, for example if you already add the iOS platform).
Look for the Add Android platform (add App) option and click it, Firebase then will ask you for the Bunddle ID (if you already add the iOS platform, use the same here or type a new one), click next.
In the following step, Firebase will give you the option to download a google-services.jason file, download it to the www/ folder in your Cordova project. Click next until you finish the App registration with Firebase. You can download this file again later if you want.

Now, let’s configure and build our Cordova app with the Android platform

Install Cordova Plugin FirebaseX. Remember, if you have previous versions of the Firebase Plugin delete them before installing this one.
Add this JS folder to your www/ folder (This is an example but functioning file with vanilla javascript functions that initiate and manage the push notification service). This file comes in the example project of the plugin. The files should be placed like this: www/js/index.js
Add the 3 of them to your project’s index.html file.

4. Place the google-serices.json file in the www/ folder (if you haven’t from the previous step).

5. Add the android platform using cordova platform add android, then build it with cordova run android --device to test on an android device (I think push notifications wont show on the Android eulator, i couldnt test this).

DONE.

Sending test notifications.

Open the Firebase Console
Open your Project
Look for the Cloud Messaging option in the sidebar.
Create a new message, select the iOS or the Android platform, complete the other steps and done!