How to send/receive push notifications from ionic mobile app?

Question

I have a messaging app built using the Ionic framework (on cordova). I plan on building this for android, and I'd like a way to send and recieve push notifications from the app using javascript/ionic.

Are there any good tutorials out there on how to go about setting something like this up?

Answer 1

There is example application made available by Holly Schinsky. The core of it is the usage of PushPlugin which is the standard method to handle push notifications on Cordova. There is quite extensive tutorial provided for this subject on their documentation on that GitHub repository. The main method is pushNotification.register which registers the device to listen for push notifications.

If you instead need to trigger notification locally, you might want to take a look at Local notification plugin instead. With it you can add notifications to be shown on the device without the need for external services to send the push notifications.

Answer 2

Use this plugin https://github.com/phonegap-build/PushPlugin.

Android devices receive push notifications through the Google Cloud Messaging (GCM) service, whereas iOS devices receive them from the Apple Push Notifications (APN) Service.

The way the notifications are received (by sound, alert etc) is a combination of the options set in the application code upon registration as well as the user’s device settings for notifications.

If you want more specific follow below tutorial :

http://devgirl.org/2013/07/17/tutorial-implement-push-notifications-in-your-phonegap-application/

Answer 3

ngCordova has a plugin that supports Push Notifications. It has sample code for iOS and Android. Check it out: http://ngcordova.com/docs/plugins/pushNotifications/

Answer 4

The latest phonegap-plugin-push allows you to register and receive push notifications in your ionic apps. It is maintained at the following Github link:

https://github.com/phonegap/phonegap-plugin-push

Installation:

cordova plugin add https://github.com/phonegap/phonegap-plugin-push --variable SENDER_ID="XXXXXXX"

Where the XXXXXXX in SENDER_ID="XXXXXXX" maps to the project number in the Google Developer Console. To find the project number login to the Google Developer Console, select your project and click the menu item in the screen shot below to display your project number.

If you are not creating an Android application you can put in anything for this value.

Note: You may need to specify the SENDER_ID variable in your package.json.

"cordovaPlugins": [
    {
      "variables": {
        "SENDER_ID": "XXXXXXX"
      },
      "locator": "phonegap-plugin-push"
    }
  ]

Note: You need to specify the SENDER_ID variable in your config.xml if you plan on installing/restoring plugins using the prepare method. The prepare method will skip installing the plugin otherwise.

<plugin name="phonegap-plugin-push" spec="1.6.0">
    <param name="SENDER_ID" value="XXXXXXX" />
</plugin>

After installation you can now add code below to your main javascript file to register and receive push notifications:

    $ionicPlatform.ready(function () {

         var push = PushNotification.init({
           android: {
             senderID: "XXXXXXX"//, //project token number (12 digit) from https://console.developers.google.com
             // forceShow: "true", //force show push notification when app is in foreground on Android only.
           },
           browser: {
             pushServiceURL: 'http://push.api.phonegap.com/v1/push'
           },
           ios: {
             /*senderID: "XXXXXXX",*/ //If using GCM for ios, project token number (12 digit) from https://console.developers.google.com
             /*gcmSandbox: 'true',*/ //If using GCM for ios
             alert: 'true',
             badge: 'true',
             sound: 'true',
           },
           windows: {}
         });

         PushNotification.hasPermission(function (permissionResult) {
           if (permissionResult.isEnabled) {
             $log.debug("has permission for push notification");

             /*Register device with GCM/APNs*/
             push.on('registration', function (data) {
               // data.registrationId
               $log.debug("data.registrationId: " + data.registrationId);          
             });

             push.on('notification', function (data) {
               // data.message,
               // data.title,
               // data.count,
               // data.sound,
               // data.image,
               // data.additionalData
               $log.debug(JSON.stringify(data));
             });

             push.on('error', function (e) {
               // e.message
               $log.debug("e.message: " + e.message);
               //alert(e.message);
             });
           }
         });
       }
     }