Header Ads

Learn to set up push notifications in your Ionic app using Firebase Cloud Messaging. Complete tutorial with installation, configuration, and testing steps.

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=xxxxx
    npm 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.



Post a Comment

5 Comments