Push Notifications with Firebase in Ionic: Complete Guide
Push notifications let you reach your app users in real-time, even when the app isn’t open. Using Firebase Cloud Messaging (FCM) with Ionic, you can send updates, reminders, or alerts to Android, iOS, and Windows devices quickly and reliably.
What Are Push Notifications?
Push notifications are messages sent by your server to your users' devices. They can:
- Increase engagement by reminding users about updates
- Deliver real-time alerts or promotions
- Work across platforms like Android, iOS, and Windows
In this guide, we’ll set up push notifications in an Ionic app using Firebase Cloud Messaging (FCM).
Firebase Cloud messaging
Firebase is used to create a device token and server key, Go to firebase console, create a new project and select the setting.
In that project, a user gets the sender Id and server key to set push notification.
Step-1
Goto project setting, and Add firebase to android app, To register an Android app, copy the package name in config.xml and set it.
step-2
Download the google-service.JSON file and move the google-service.JSON into the app-module project directory and click finish.
Install Push plugin
Install ionic native push plugin, for register and receiving notification. replace the sender-id with the push option in SENDER-ID.
ionic cordova plugin add phonegap-plugin-push --variable SENDER-ID=xxxxxnpm install --save @ionic-native/push
Import
Import the push plugin in app-module and then use it in app-component.
import { Push, PushObject, PushOptions } from '@ionic-native/push';const options: PushOptions = {android: {senderID: 'xxxxxxxxx'},ios: {alert: 'true',badge: true,sound: 'false'},windows: {},};const pushObject: PushObject = this.push.init(options);pushObject.on('notification').subscribe((notification: any) => {if (notification.additionalData.foreground) {let youralert = this.alertCtrl.create({title: 'New Push notification',message: notification.message});youralert.present();}});pushObject.on('registration').subscribe((registration: any) => console.log('Device registered', registration));pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
Now test the push Plugin, by push sample message from firebase and notification display in mobile.
when opening it, it displays in the app.
Test Push Notifications
- Open the Firebase Console.
- Go to Cloud Messaging.
- Send a test notification to your device.
- Your app should display the notification instantly.
Why Use Firebase Cloud Messaging?
- Free and reliable messaging service
- Cross-platform support for Android, iOS, and web
- Automatic token handling and message queuing
- Seamless integration with Ionic
Tips & Troubleshooting
- Ensure
google-services.json
is in the correct directory. - Double-check that your SENDER_ID matches your Firebase project.
- For iOS, enable push notifications in Xcode and upload your APNs key to Firebase.
- Test on real devices, as emulators often don’t support push notifications.
Conclusion
Adding push notifications to your Ionic app with Firebase Cloud Messaging is straightforward. With just a few steps, you can engage your users with timely alerts, updates, and promotions—all for free.
5 Comments
ReplyDeleteGood Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging
ionic training in chennai
Nice blog. It is very helpful.
ReplyDeleteJava Training Institute in Chennai
Learn Java Online
Java Training Institutes in Bangalore
Great post and thanks for sharing.
ReplyDeleteAlso visit:
Python Course In Madurai
Python Training In Pune
Python Training In Hyderabad
Python Training In Gurgaon
Nice blog, Share more like this.
ReplyDeleteAWS Training In Chennai
AWS Online Training
AWS Training In Coimbatore
thank you for the information
ReplyDeletephonegap course in chennai