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?

  • Dimitri Podoliev

    Hi! Another great tutorial, many thanks for your awesome work! I’m trying to make this work on iOS, and I’ve followed your steps, but I still don’t receive Push Notifications on my iPhone. I’m pretty sure I’ve got all setup correctly, the permissions are set, no code errors, but the notifications just don’t arrive on my Phone. Any ideas why? Many thanks!!

  • siva adhithya

    IMAGE NOTIFICATION IS POSSIBLE

  • Vicky Cj

    Hi ..have a doubt.. In anroid device when i run ionic –prod mode.. it is throwing error plus plugin is not installed,, but in dev mode its working fine..do u know why?

  • VITHIKA GUPTA

    Thanks a lot for this tutorial,it works well…but it does not work for multiple users,i installed the same app on another device and when i am sending the message,i am receiving notification on my device and not the other device with same app.

    • VITHIKA GUPTA

      The issue has been resolved..,