Managing push notifications with Ionic2 and Firebase
In this post we are going to view how to treat push notifications using the Ionic2 framework.
As a pre requisite if you want to follow up the step while I’m showing code snippets you should have properly configured Ionic2 environment.
For details about configuring environment you can go to this link.
Let’s get started, first of all we are going to create a new Ionic2 app, in a console run the following command:
$ ionic start ionic2-push-demo
Choose blank template.
For this demo I will work with Android, so I’ll add Android as a platform:
$ ionic cordova platform add android
First thing, set up FCM.
Enter a project name
Go to Settings>Cloud Messaging
We will need the Sender ID in the next step.
Next step, install push notification plugin
$ ionic plugin add phonegap-plugin-push --variable SENDER_ID=XXXXXXXXX
$ npm install --save @ionic-native/pushAfter a succesfull install open config.xml
replace with the SENDER_ID you grabbed from Firebase.
In config.xml modify widget id with a real one for your application (ie io.yourOrg.pushtest). You’ll need to provide this id in FCM in order to link your app in Firebase and send notifications from FCM to your application.
Let’s go back to Firebase and link our app.
In Android Package name enter your widget id from config.xml
Click on Register App button, you can skip the following steps.
That’s everything we need to configure on FCM later on this article we will get back to FCM to send the notifications to our app, let’s get back to our Ionic project and put code to handle this notifications.
Put the following code in your app.component.ts file
That’s all you need to receive basic push notifications.
To test, you need to deploy to a real device (ionic view won’t work), connect your device via USB and run:
$ ionic cordova run android
If everything is ok, now your app is running on your android device. Now is time to finally send a notification. To do that we need to go back to FCM and enter into the Notifications option on the left side menu
Just create the notification, you should be able to select your app id in the dropdown. When you enter the notification text just click the “Send Message” button.
That’s all, check your device for the notification.
