Ionic 2 – Push Notifications

Hi Friends,

Whoo… An Ionic tutorial after a looong time… Yup. This post deals with how to receive push notifications on your mobile through an Ionic 2 app and the Ionic-cloud-angular lib. This is a response to many of my friends asking me how to do Push Notifications in Ionic 2 apps.

This post is now obsolete due to the changes made my Ionic team.

Please find the updated version here.

Let’s begin.

A screencast of this tutorial:

 

The code for the tutorial is available here.

Just create a new Ionic 2 app using the below command.

Now we will be creating an android app in this post. So to send/receive push notifications we will be making use of the google cloud messaging API.

I will not be going into how to create a GCM key since there is a very clear and precise document for the same available here.

Once you have finished creating a server key as mentioned in the above document, please give the below command to install the phonegap-push-plugin.

Please give the GCM project number as the SENDER_ID.

Now install the ionic-cloud-angular npm module to make use of the services it provides using the below command.

Now open up app.ts in your ionic project and add a few lines of code as shown below.

Please note that I have included only the android config here. Incase you want to use iOS and Windows; kindly include them here.

Now go back to your terminal and give the below command.

Now this will ask for your ionic.io credentials. If you don’t have an ionic.io account please sign up for one and then give your creds. This command will initialize your app on the ionic.io platform so that you can use a load of useful services such as Push, Authentication, Deploy etc.,

Now give the below command to disable limited pushes.

If you open up ionic.io on a browser you could see your app displayed on the dashboard as shown below.

ionic2push

Now install the app on any mobile device (or Android tablet) using the below command.

Close the app and then open up your ionic.io dashboard. Click on the app name. You will find a screen as shown below.

push2

Go to settings -> Credentials.

In that screen click on the new security profile link and then create a new security profile by giving it a name and choosing development in the dropdown below the name field.

Now in the new profile that appears click on the edit link available at the right end.

A dialog will open up. Choose the android tab at the top.

In the gcm_key field give the server key which you created and click save.

Click on edit again and choose android tab. You should see a screen as shown below now.

push3

Now, Click on Push on the left sidebar and click on new notification button. Type in whatever message you want to send and then click on send. You should receive the push notification on your mobile now.

The other way to push a message to your app would be to use curl. Open up a terminal and give the below command.

Replace the API_TOKEN with the server key, DEV_DEVICE_TOKEN with the token you received while registering your push object. and the PROFILE_TAG with the profile you created in your ionic.io dashboard.

Please watch the screencast video as I feel I have explained it a little clearly there.

Also, kindly share it with all the people out there who have been looking out for push notifications.

Hope this helps you guys. Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • senthil

    running error i m attached image check me

    • In the latest version of ionic-cloud-angular(0.0.14) they have changed a lot of code and hence this error occurs. I have been trying to get push working with the new release and will update once I get it to work. In the meantime you could change the version no. in package.json file to 0.0.12, run npm install again and this would fix the error.. Thanks

      • senthil

        thank you.

        error is fixed but push notification not working. my versions is 0.0.15 and i changed to 0.0.12. why push notification not working?

        here is the code

        import {Component} from ‘@angular/core’;
        import {Platform, ionicBootstrap} from ‘ionic-angular’;
        import {StatusBar} from ‘ionic-native’;
        import {TabsPage} from ‘./pages/tabs/tabs’;
        import {Push, CloudSettings, provideCloud} from ‘@ionic/cloud-angular’;

        const cloudSettings: CloudSettings = {
        ‘core’: {
        ‘app_id’: ‘b05c4918’,
        ‘gcm_key’: ‘862819242642’
        }
        };

        @Component({
        templateUrl: ‘build/app.html’
        })
        export class MyApp {

        rootPage: any = TabsPage;

        constructor(private platform:Platform) {
        this.rootPage = TabsPage;

        platform.ready().then(() => {

        var raja = new Push({
        pluginConfig: {
        android: {
        senderID: “862819242642”
        }
        }
        })

        raja.register((token) => {
        raja.saveToken(token);
        })

        StatusBar.styleDefault();
        });
        }
        }

        ionicBootstrap(MyApp, [provideCloud(cloudSettings)])

        package.json code

        “dependencies”: {
        “@angular/common”: “2.0.0-rc.3”,
        “@angular/compiler”: “2.0.0-rc.3”,
        “@angular/core”: “2.0.0-rc.3”,
        “@angular/http”: “2.0.0-rc.3”,
        “@angular/platform-browser”: “2.0.0-rc.3”,
        “@angular/platform-browser-dynamic”: “2.0.0-rc.3”,
        “@ionic/cloud-angular”: “0.0.12”,
        “es6-shim”: “^0.35.0”,
        “ionic-angular”: “2.0.0-beta.10”,
        “ionic-native”: “1.2.4”,
        “ionicons”: “3.0.0”,
        “reflect-metadata”: “^0.1.3”,
        “rxjs”: “5.0.0-beta.6”,
        “zone.js”: “^0.6.12”
        },

      • Rashid

        Hi Raja!

        Have you implemented “@ionic/cloud-angular”: ” 0.0.16″ in app.ts in order to work push-notification with this version?

        • No bro, I am waiting for some docs to come out. They have made a lot of changes. I had a look at the code. Once the docs come out, I will try it out and let you know.. Have a nice day.. :)

  • senthil

    hi push notification is working but some times not working. what is the actual reason for this?

  • arsene

    continue to wait for the update of the post and want to see other service like Auth and Analytics. thanks for this post

    • Hi Arsene.. Sorry bro.. but most of the code in the ionic-cloud-angular repo has been changed. I am still waiting for the updated docs. Once that is available, I will update this post.. :)

  • Tweets Nearby

    Why does raja.register have red underline?

  • arsene

    no update until now?

    • Hi Arsene,
      Sorry bro, The team has changed a lot of code. I have to spend several hours to go through the code and figure out how to make this work or wait for the docs to get updated. I am waiting for the docs. Once they come out, I will post an update. Thanks for reading.. Have a nice day.. :)

    • Hi Arsene, I have updated this post – http://tphangout.com/ionic-2-push-notifications-2/
      Thanks.

  • ashish

    HI Raja ,
    i am trying exactly same thing . but i am not able to get any notification on mobile .
    can you please help on how to debug to get idea where it’s failing ?

  • Kesavan

    Hi
    I am unable to get push notification even though i have changed the ionic-cloud-angular id to 0.0.12. Can any one tell he what should be done in order to receive push notifications?

  • Don’t work :(. Did you know another method for make it this

  • Kesavan

    Hi can u please working code

  • Carinha que mora logo ali

    not work :), have news updates

  • Stevan Grubac

    Hello, any update for push notifications?

  • Ashfaq Zeemath

    error has no exported member ‘ionicBootstrap’.

    “dependencies”: {
    “@angular/common”: “^2.0.0”,
    “@angular/compiler”: “^2.0.0”,
    “@angular/compiler-cli”: “0.6.2”,
    “@angular/core”: “^2.0.0”,
    “@angular/forms”: “^2.0.0”,
    “@angular/http”: “^2.0.0”,
    “@angular/platform-browser”: “^2.0.0”,
    “@angular/platform-browser-dynamic”: “^2.0.0”,
    “@angular/platform-server”: “^2.0.0”,
    “@ionic/cloud-angular”: “^0.7.0”,
    “@ionic/storage”: “^1.0.3”,
    “ionic-angular”: “^2.0.0-rc.1”,
    “ionic-native”: “^2.2.3”,
    “ionicons”: “^3.0.0”,
    “ng2-translate”: “^3.1.2”,
    “rxjs”: “5.0.0-beta.12”,
    “zone.js”: “^0.6.21”
    }