Firebase push notifications in ionic capacitor app (Android)

This is a very basic example for even a beginner to add firebase push notification in ionic and angular application following this example you can add push notifications in any ionic app.

I have tried to keep this article as basic as I could so everyone can follow simple steps

Create Ionic capacitor app

Lets start by creating a new ionic project

ionic start push-notifications-app — type=angular — capacitor — package-id=mabb.push.notifications blank

This command will create a new ionic project with name “push-notifications-app”. Ionic app can be react, angular or vue so here we are specifying it to be type angular. The capacitor flag is to enable capacitor configuratios and let ionic know that we are creating a capacitor app.We are specifying app starter to be blank and we are already giving a package id to this app that we will use in firebase.

Open the created app in your visual studio code or any of the code editor you are using.

Open the capacitor.config.ts file and add

plugins: {
    PushNotifications: {
        presentationOptions: [‘badge’, ‘sound’, ‘alert’]
    }
}

Now build your app with

ionic build

Add platforms

add ios and android platforms in your app with

npx cap add ios
npx cap add android

Firebase project creation

Now create a firebase project with your desired name

Now your firebase project is created and now we have to create android and ios platforms in here.

First of all we will add android and check push notifications in android app in next article we will move to ios.

Create an android app in firebase by going in project settings page

Click on android icon to start creating android app

Here write the exact app package id that you see in capacitor.config.ts in your project appId: 'mabb.push.notifications'

Download the google-services.json file. We will place this file in our android folder in project

Create the firebase project and add google-services.json file in

/push-notifications-app/android/app/google-services.json

This is the file that we have downloaded from firebase.

Generate a service using

ionic g service services/notifications

Install push-notifications with below command

npm install @capacitor/push-notifications

Add this code to your notifications.service.ts

import { Injectable } from '@angular/core';
import {Capacitor} from '@capacitor/core';
import { PushNotifications } from '@capacitor/push-notifications';
@Injectable({
    providedIn: 'root'
})
export class NotificationsService {
    constructor() { }
    initPush() {
        if (Capacitor.getPlatform() !== 'web') {
            this.registerPush();
        }
    }
    private registerPush() {
        PushNotifications.requestPermissions().then(permission => {
            if (permission.receive === 'granted') {
                PushNotifications.register();
            }
            else {
                // If permission is not granted
            }
        });
        PushNotifications.addListener('registration', (token) => {
            console.log(token);
        });
        PushNotifications.addListener('registrationError', (err)=> {
            console.log(error);
        }); PushNotifications.addListener('pushNotificationReceived'(notifications) 
     => {
            console.log(notifications);
        });
    
    }
}

Add in your app.component.ts below lines

Start your android app you will see push notification logs and events being registered in console

There you will find token value of your device. This is the value that you will use to send push notification to your device.

Send notification via Postman

Send a push notification with postman

Method: POST
Request: https://fcm.googleapis.com/fcm/send
Headers:
Content-Type: application/json
Authorization: key=serverKeyHere
(i.e key=AAAAu98LJFM:APA91bGNbjxQ95RELBLAfrdiC99W6dDbG1FGAhsv7p8uWcs9qtggdJYW8xM7Jq-JGAOE0igyu36H7xFw0i0pP6_UAsQCiTU4yA_GBVYiwTLuFifuVcn0jPRePOE-t1SCt2aVBsbP1UGr3XEjTZBDQ9DyIJq4GAT )
Request Payload:
{
    “to”:”fOa_XtyIRXKFGmNrS5JcXz:APA91bHJ41E-DX4NQ7ykS6Qlhrpo5ARHWbApxHPWNMM1i_olg3a2kjixjaAFH4hb44kkf65-WCpJeZo-1rdhJjjv0pMSUFZuWbHkZhbpBC1njnV7MTfpGS0vTjjGCep_KcUW3P8QewAQ”,
    “notification”: {
        “title”: “Order #43”,
        “body”: “There’s a new pickup order in line!”,
        “sound”: “default” 
    }
}

Note: Replace token in “to” with token you received from firebase in your console.

Now send Request and you will receive background message.

Note: Background messages are messages that you receive when your app is opened in some tab which is not active. You can get server key from firebase console as shown here

Receive Foreground Push notifications

To receive push notifications when your application is opened you need to create a custom component which will load whenever a new message is received via pushNotificationReceived event listener from firebase.

Now you can see that a notification is received in the console.

Note: I have tried to summarize each and everything to the best of my knowledge if you feel we can make this article better just let me know in comments below.