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 iosnpx 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/sendHeaders:
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.