Ionic2 Push Notification

Everything is going mobile and engaging your mobile app users timely is a key to success of your business. With push notifications, you as a business can decide when, why, what and how to tell the users of your app about a business event which matters to them.(say an e-commerce app have new inventory). It brings the customer into the app's ecosystem even when they are offline(not actively using the app).

push notification on mobile device

Implementing push notifications with ionic2(a hybrid mobile app framework) which is maried to angular2(the nest gen web framwework) has neven been this easier. Follow along with me for the rest of the post.

    Setting up google cloud messaging platform

  • Create a google console project and enable google cloud messaging api in it, take a note of your google gcm key and your google project number, Click here for set up
  • Create a simple node server
  • Install express $ npm install express
  • Install node js google cloud messaging module $ npm install node-gcm
  • Your server.js should be finally
  • var express = require('express');
    var gcm = require('node-gcm');
    var app = express();
    var gcmApiKey = 'XXXXXXXXXXXXX'; // GCM API KEY OF YOUR GOOGLE CONSOLE PROJECT
    
    var server = app.listen(3000, function () {
        console.log('server is just fine!');
    });
    
    app.get('/', function (req, res) {
        res.send("This is basic route");
    });
    
    app.get('/push', function (req, res) {
        var device_tokens = []; //create array for storing device tokens
        
        var retry_times = 4; //the number of times to retry sending the message if it fails
        var sender = new gcm.Sender(gcmApiKey); //create a new sender
        var message = new gcm.Message(); //create a new message
        message.addData('title', 'PushTitle');
        message.addData('message', "Push message");
        message.addData('sound', 'default');
        message.collapseKey = 'Testing Push'; //grouping messages
        message.delayWhileIdle = true; //delay sending while receiving device is offline
        message.timeToLive = 3; //number of seconds to keep the message on 
        //server if the device is offline
        
        //Take the registration id(lengthy string) that you logged 
        //in your ionic v2 app and update device_tokens[0] with it for testing.
        //Later save device tokens to db and 
        //get back all tokens and push to multiple devices
        device_tokens[0] = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
        sender.send(message, device_tokens[0], retry_times, function (result) {
            console.log('push sent to: ' + device_tokens);
            res.status(200).send('Pushed notification ' + device_tokens);
        }, function (err) {
            res.status(500).send('failed to push notification ');
        });
    });
    										

Prerequites for ionic2 apps

  • Andorid sdk version 23 or above(or else your ionic v2 app wont build)
  • Latest android build and platform tools
  • Latest ionic version(ionic2 beta25 or above), ionic cli.
  • Latest cordova, cordova cli

Setting up ionic2 app

  • Create a sample ionic version 2 typescript project $ ionic start pushapp tutorial --v2 --ts
  • Add cordova push plugin $ cordova plugin add phonegap-plugin-push --variable SENDER_ID="XXXXXXXXX" here XXXXX is your google project number
  • Update the app's package.json with following code
  • "cordovaPlugins": [
        {
          "variables": {
            "SENDER_ID": "XXXXXXXXXX"
          },
          "locator": "phonegap-plugin-push"
        }
      ]
    
  • Open app.ts and import push import {Push} from 'ionic-native';
  • Update the app.ts's initializeApp method with
  • initializeApp() {
        this.platform.ready().then(() => {
          StatusBar.styleDefault();
          var push = Push.init({
            android: {
              senderID: "XXXXXXXXX"
            },
            ios: {
              alert: "true",
              badge: true,
              sound: 'false'
            },
            windows: {}
          });
          push.on('registration', (data) => {
            console.log(data.registrationId);
            alert(data.registrationId.toString());
          });
          push.on('notification', (data) => {
            console.log(data);
            alert("Hi, Am a push notification");
          });
          push.on('error', (e) => {
            console.log(e.message);
          });
        });
      }
    										
  • Create android platform $ ionic platform add android
  • Build android $ ionic build android
  • Deploy to android device $ ionic run android

Testing push notifications

  • Open browser or any rest client say post man
  • hit http://localhost:3000/push
  • Boom! You get a notification in your device

Clone the ionic2 setup from my git repo

Feedback

If this post helps you in setting up push notifications, do share.