Ionic 2 – Push Notifications with firebase

Hi Friends,

Hope you are all well. I made a post on Ionic 2 and push notifications long back. This post is an easier way to achieve the same now.

Let’s begin.

A screencast of this post.

 

The complete code of this post can be found here.

First scaffold out an app using the cli tool.

Then open up this link and create a new app.

Now open up config.xml in your app and copy the widget id in the second line from top. It would look something like com.ionicframework.xxxx

Open your app in firebase console and you would see a screen as shown below.

firepic

Click on the Add Firebase to your Android app button.

You would see a screen like this.

firepic2

Paste the android package name that you took from config.xml here and click on register app.

After registering click on settings (On the app that you registered). You will see a screen like this.

firepic3

Copy the sender Id from here.

Now install the phonegap-push plugin in your Ionic 2 app using the below command.

Then add the ionic native wrapper for this plugin.

Once this is done open up app.component.ts file and modify it as shown below.

That’s it guys. Don’t forget to add Push as a provider in your app.module.ts file.

Run your app on a device.

From the firebase console click on Notifications in the sidemenu. In the screen that opens up click on New message. You will see a screen like this.

firepic4

Write your message, choose your app and click on send message. That’s it.

If your app is open, you will see your message in an alert, if not then it would be ‘pushed’ on to your device and you will get a notification.

Please watch the video for a better explanation.

Hope this helped you guys., If you found this helpful, kindly share it with someone else and help them too.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • Vinit Kumar Goel

    Hi,

    Thanks for this tutorial,

    I am not getting background notification. do i need to change anything?

    Thanks

  • Attila Vegh

    Hey Raj,

    Awesome guide :)

    Any idea how to customise the push notifications? Can’t get sound and icon on the push :(

    android: {
    senderID: ‘937848398327’,
    icon: ‘icon’,
    sound: true,
    vibrate: true,
    forceShow: true
    },

    • Could you please refer to my new posts on push notifications with firebase.. (Kindly watch the videos..) Thanks..

  • Ravi Sojitra

    I followed this article for push notification on device with firebase.
    i copied the same code.
    But it’s always throwing error saying “Cannot read property ‘applicationServerKey’ of undefined”
    How to solve this issue?