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

Image for post
Image for post

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:

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:

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.

Generating a Key to allow Firebase communicate with your app.

Creating the Firebase project and uploading the Key from Apple.

Now, let’s configure and build our Cordova app

<script type=”text/javascript” src=”js/jquery-2.1.3.min.js”></script>
<script type=”text/javascript” src=”js/stacktrace.min.js”></script>
<script type=”text/javascript” src=”js/index.js”></script>

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.

Android

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

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

<script type=”text/javascript” src=”js/jquery-2.1.3.min.js”></script>
<script type=”text/javascript” src=”js/stacktrace.min.js”></script>
<script type=”text/javascript” src=”js/index.js”></script>

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.

Remember, this is only a complement guide. For the complete and original guides (and the backend guide) check:

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store