Blog Ionic PushV5

Phonegap Push Plugin, ngCordova pushV5, Ionic Framework - Example and usage

Push Plugin

Currently there are two different Cordova PushPlugin's available, one is now deprecated.

• https://github.com/phonegap-build/PushPlugin (deprecated)
• https://github.com/phonegap/phonegap-plugin-push (new one)

Both have support in ngCordova, one is supported as $cordovaPush (the depreceated one)

https://github.com/driftyco/ng-cordova/blob/master/src/plugins/push.js

and the new one is supported as $cordovaPushV5

https://github.com/driftyco/ng-cordova/blob/master/src/plugins/push_v5.js

Using PushV5

In this article I show how to use the new one, push_v5 / $cordovaPushV5. First follow instructions on how to start with a "starter" project using Ionic Framework (http://ionicframework.com/). Add ngCordova to it with

bower install ngCordova

Add the V5 Push Plugin using

ionic plugin add phonegap-plugin-push

Add to your index.html

<!-- ngCordova bundle -->
<script type="text/javascript" src="lib/ngCordova/ng-cordova.js"></script>

or the minified version

Add to your app.js file (is the main javascript file starting your ionic app - of course you can use a different filename)

/*
 * start within Platform ready
 */
$ionicPlatform.ready(function() {
    // register push notification and get local push token
    localStorage.myPush = ''; // I use a localStorage variable to persist the token
    $cordovaPushV5.initialize(  // important to initialize with the multidevice structure !!
        {
            android: {
                senderID: "1111111111"
            },
            ios: {
                alert: 'true',
                badge: true,
                sound: 'false',
                clearBadge: true
            },
            windows: {}
        }
    ).then(function (result) {
        $cordovaPushV5.onNotification();
        $cordovaPushV5.onError();
        $cordovaPushV5.register().then(function (resultreg) {
            localStorage.myPush = resultreg;
            // SEND THE TOKEN TO THE SERVER, best associated with your device id and user
        }, function (err) {
            // handle error
        });
    });
});

/*
 * Push notification events
 */
$rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data) {  // use two variables here, event and data !!!
    if (data.additionalData.foreground === false) {
        // do something if the app is in foreground while receiving to push - handle in app push handling
        }
    } else {
       // handle push messages while app is in background or not started
    }
    if (Device.isOniOS()) {
        if (data.additionalData.badge) {
            $cordovaPushV5.setBadgeNumber(NewNumber).then(function (result) {
                // OK
            }, function (err) {
                // handle error
            });
        }
    }

    $cordovaPushV5.finish().then(function (result) {
        // OK finished - works only with the dev-next version of pushV5.js in ngCordova as of February 8, 2016
    }, function (err) {
        // handle error
    });
});

$rootScope.$on('$cordovaPushV5:errorOccurred', function(event, error) {
    // handle error
});

You need to setup the server side to process push messages, you need to setup Google Android and Apple App Store setups in order to get push working on client and server. See as well Mobile for more information.