Push Notifications with Firebase Cloud Messaging

Official Post: https://ionictheme.com/push-notifications-with-firebase-cloud-messaging

Hi everyone, in the previous post we talked about "Twitter login with Ionic and Firebase"; assuming you already know a bit about Firebase and how to configure it in your ionic app "Quick Start with Ionic + Firebase", let's see about and how to setup Push Notifications with Firebase Cloud Messaging.

Before everything, make you that you have installed cordova-plugin-fcm plugin by calling the following commands:

cordova plugin add cordova-plugin-fcm
npm install @ionic-native/fcm --save

If you're using Google Login, cordova-plugin-googleplus, you will encounter some errors when building the app for Android. This is because the plugins cordova-plugin-googleplus and cordova-plugin-fcm - will have conflicting issues with the Android libraries used. To solve this, we will manually override the library versions used by the plugins.

Open platforms/android/build.gradle

Add com.google.gms:google-services in dependencies
Set Android and Firebase libraries version to 10.2.0.
Add com.google.gms.google-services plugin to the end of build.gradle.

buildscript {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }

    // Switch the Android Gradle plugin version requirement depending on the
    // installed version of Gradle. This dependency is documented at
    // http://tools.android.com/tech-docs/new-build-system/version-compatibility
    // and https://issues.apache.org/jira/browse/CB-8143
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.0'
        classpath 'com.google.gms:google-services:3.0.0'
    }

        //Set Android and Firebase libraries version to 10.2.0
        dependencies {
            compile fileTree(dir: 'libs', include: '*.jar')
            // SUB-PROJECT DEPENDENCIES START
            debugCompile(project(path: "CordovaLib", configuration: "debug"))
            releaseCompile(project(path: "CordovaLib", configuration: "release"))
            compile "com.android.support:support-v4:24.1.1+"
            compile "com.facebook.android:facebook-android-sdk:4.+"
            compile "com.google.firebase:firebase-core:10.2.0"
            compile "com.google.firebase:firebase-messaging:10.2.0"
            compile "com.google.android.gms:play-services-auth:10.2.0"
            compile "com.google.android.gms:play-services-identity:10.2.0"
            // SUB-PROJECT DEPENDENCIES END
        }

        //Add com.google.gms.google-services plugin to the end of build.gradle
        apply plugin: 'com.google.gms.google-services'
}

Open platforms/android/cordova-plugin-fcm/{project}-FCMPlugin.gradle, and comment out apply plugin: com.google.gms.googleservices.GoogleServicesPlugin.

// apply plugin: 'com.google.gms.google-services'
// class must be used instead of id(string) to be able to apply plugin from non-root gradle file
// apply plugin: com.google.gms.googleservices.GoogleServicesPlugin

Open platforms/android/project.properties, and set library versions to 10.2.0

cordova.system.library.3=com.google.firebase:firebase-core:10.2.0
cordova.system.library.4=com.google.firebase:firebase-messaging:10.2.0
cordova.system.library.5=com.google.android.gms:play-services-auth:10.2.0
cordova.system.library.6=com.google.android.gms:play-services-identity:10.2.0

If you plan on sending Push Notifications to iOS apps. You have to create an APN (Apple Push Notification) Key and configure your project to send Push Notifications in Xcode. Firebase did a great job at explaining how to Configure Apple Push Notifications with FCM in here -> https://firebase.google.com/docs/cloud-messaging/ios/certs

After you have your APN Auth Key, head over to Firebase Console ► Settings ► Cloud Messaging, and upload your key under iOS app configuration.

firebase-push-config1

If you plan on sending Push Notifications to Android apps, Make sure that you have added the Android platform on Firebase and have generated a google-services.json file, placed on the root of your project. (You may refer to Facebook Login or Google Login section above where an Android platform is added on Firebase).

Finally, take note of your Server key and set it on your configs file, Ex:. src/environment/environment.ts

export const gcmKey = 'AAABBvE9kDCs:APA91bH6ZpM_e5JTRSPJQ9GDCRGwiVz_kHIyjQv5yt5vb1IjaPO6E0MnYYPg-LYudhLFjtjhoaW3_UbN5m8Q7wACRqYMaGI_HguvwhXEUN0fCrk22zrwPC5TjsEIo4HRC6O9TGwp6Jf';

Now we have configured with success Push Notifications and ready to use in your Ionic project.

In the next posts, i'll show more detailed how to use better and with practice the Firebase Cloud Messaging