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..

      • MOHAMED CISSE

        Hi,
        Where is the link for the new post on push notification with firebase ?
        Thanks

      • Joy Men

        hey Raja, i have saw your video and did the same steps in Visual Studio 2015 but i am getting error in this line (‘import { Push, PushObject, PushOptions } from ‘@ionic-native/push’;’). If i modify the line (import { Push, PushObject, PushOptions } from ‘ionic-native’;) like this then there is no error but ‘PushObject’ is not found error occurs. i have tried to removing PushObject and made as const pushObject: any; then no error but during the run time this.push.init not found error occurs. Can you please help me to overcome this.

  • 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..,

  • Tarun Narula

    Hi,

    I Followed the same procedure as described above, But this is not working in IOS
    Is there any requirement to use this in IOS

    Thanks in Advance

  • Tushar

    It’s very good tutorials…. awesome bro…
    Could we use this code in ios also ??

  • Ye Chenchao

    Thanks a lot, but this solution only works for Android.

  • Raj Prethive

    Hey Raja,

    I was trying to use push notification with steps you have mentioned. Once I open the app I am able to see Device registered alert. But when I try to send notification from Firebase I am unable to see any success or error message.

    Also I am getting device registered alert every time I open my app.

    Kindly help me out.

    Thanks,
    Prethive

    • switcute617

      me too

  • lalitha peri

    how can i send chat push notifications from one app to another app in different android phones

  • Raessa Fathul Alim

    dont forget to add Push on provider app.module.ts ..

  • Thiago Adriano

    Good tutorial ūüėČ

  • Gilson Junior

    I’m with this problem

    * What went wrong:
    A problem occurred evaluating root project ‘android’.
    > Failed to apply plugin [class ‘com.google.gms.googleservices.GoogleServicesPlugin’]
    > For input string: “+”

    • Lucas Bastos

      Me too. Same error!

  • Lud Akell

    It’s simple and it works great for Android. Thanks!

    • Lucas Bastos

      Opa, você conseguiu colocar p/ funcionar mesmo? Estou usando Ionic/Cordova e tem sido difícil me livrar do erro de versão do google-services

      • Lud Akell

        Lucas, consegui sim. Esse problema com google-services tem a ver com essa implementa√ß√£o de push? Bom, se voc√™ estiver falando do arquivo de configura√ß√£o google-services.json, se voc√™ n√£o tiver baixado o arquivo, o build ir√° falhar. Mas para corrigir basta que voc√™ baixe o arquivo no seu painel no firebase e o insira na sua pasta “seuProjeto”/platforms/android.

        • Lucas Bastos

          Opa, beleza?

          Po, legal! Eu fiz isso que você falou também, só que meu problema acho que é outro. Você usa outros plugins google?

          Pelo que vi aqui, tem a ver sim! Quem usa outros plugins google tem conflito de versão nesse google-services. Eu aqui uso o plugin do google-maps para o mapa, aí eu só estou conseguindo implementar ou um ou outro, e o erro é esse aqui, muita gente está tendo. Antes dava p/ resolver com uma gambiarra na pasta da plataforma mas agora acho que como atualizou essa versão do google-services passou de 3.0.0 p/ 3.1.0 deve ter mudado alguma coisa.

          https://forum.ionicframework.com/t/google-services-version-conflict-maps-fcm/93695

          Implementar esse plugin do phonegap-push est√° ocasionando no mesmo erro acima do fcm. Bem chato!

          Obrigado!

          • Lud Akell

            Ah soh! Cara, eu ouvi falar mesmo de alguma coisa assim em outra ocasião. Mas esse é o meu primeiro plugin com uso de serviços do Google então não saberia dizer como resolver :(

            Meu próximo passo é a implementação do Google Analytics. Se eu passar por algo semelhante e resolver o problema, posto aqui. Se você conseguir resolver, poste aqui tb! Boa sorte aí!

          • Lucas Bastos

            Beleza! Boa sorte também, abraços!

          • Lucas Bastos

            Meu velho, achei uma solução utilizando o serviço do OneSignal. A documentação para implementar é muito boa e didática e o serviço tem se mostrado excelente por enquanto. Implementei sem maiores problemas no meu app. Caso queira um serviço de Push mais completo, recomendo: http://www.onesignal.com

            Abraços!

          • Lud Akell

            Boa, Lucas!
            I was going to present you a possible solution to the previous problem. For anyone who pass through this, check this out
            https://github.com/fechanique/cordova-plugin-fcm/issues/319

            Implementing Google Analytics, I had the same problems as yours and I changed manually the version of my analytics plugin to the same of Push. Both were set to version 11.0.1 (in my case).

            Doing this should solve but, again in my case, I had another problem related to path of the project (maybe this one specific about Analytics, but just in case…). Windows allow max of 240 caracteres for any file in the project. For those who see any “mergeDebugResources” or “Crunch file” issue, check this one
            https://forum.ionicframework.com/t/mergedebugresources-error-failed-to-crunch-file/94513/2

  • z√ľht√ľ Ňüent√ľrk

    > Failed to apply plugin [class ‘com.google.gms.googleservices.GoogleServicesPlugin’]
    > For input string: “+”
    error

  • sanket

    how can menage the push notification to device to firebase

  • Great tut. How about if I want to handle the tapped notification when app was in background?
    Overall, if someone tap notification when app is in background, by default application opens up. I want user to redirect to specific page depending on notification’s paylod data once he tap on it.

    Is it possible?

  • Salim Ansari

    I want to fire notification event when my app is running in background.
    I am struggling from last 3 to 4 day’

  • Saved me! Many thanks for this!