Having trouble enabling push notifications on Android with ngCordova

Question

Having trouble enabling push notifications on Android with ngCordova

Having trouble with push notifications through the ngCordova plugin. Followed the sample code from

(with a slight change - no deviceready listener, code inside ionicPlatform.ready listener)

Below is the code snippet:

angular.module('myApp', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $rootScope, $state, $cordovaPush) {
  $ionicPlatform.ready(function() {
    var config = {
      "senderID": "myID100001000"
    };

    $cordovaPush.register(config).then(function(result) {
      alert(result);
    }, function(err) {
      alert(err);
    })      
  }); 

  $rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
    switch(notification.event) {
      case 'registered':
        if (notification.regid.length > 0 ) {
          alert('registration ID = ' + notification.regid);
        }
        break;

      default:
        alert('An unknown GCM event has occurred');
        break;
    }
  });  
})

Upon app start, the "OK" alert shows up confirming successful $cordovaPush.register call. Expected a "registered" notification event right after but never received it.

Seeking assistance. Much appreciated!

javascript angularjs cordova ionic-framework

Answer 1

Answer №1

While the solution is hinted at in the comments, a proper answer is needed.

It's crucial to note that the register callback will always return OK if you provide a valid senderID. However, if the

$cordovaPush:notificationReceived

event isn't triggered (which may take a moment), it indicates that the ID could be incorrect.

Remember to utilize the Project Number instead of the Project ID.

To acquire the number, navigate to the API Console, choose your project, and you'll land on the Overview page. At the top of this page, you'll find something similar to this:

Project ID: your-project-id        Project Number: 0123456789

Simply copy and employ the project number, and everything should function properly.

Answer 2

While the solution is hinted at in the comments, a proper answer is needed.

It's crucial to note that the register callback will always return OK if you provide a valid senderID. However, if the

$cordovaPush:notificationReceived

event isn't triggered (which may take a moment), it indicates that the ID could be incorrect.

Remember to utilize the Project Number instead of the Project ID.

To acquire the number, navigate to the API Console, choose your project, and you'll land on the Overview page. At the top of this page, you'll find something similar to this:

Project ID: your-project-id        Project Number: 0123456789

Simply copy and employ the project number, and everything should function properly.

Answer 3

Answer №2

Dealing with this issue extensively, I've come to discover that there are currently two iterations of the cordova push plugin available:

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

While both versions are compatible with ngCordova, only the outdated one is properly documented.

The deprecated version goes by $cordovaPush while the newer one is labeled as $cordovaPushV5, each boasting distinct functionalities.

In my case, the issue arose when attempting to integrate the cordova-plugin-push using outdated documentation from the ngCordova platform.

The provided code snippet illustrates how to implement the latest version for Push notifications successfully:

 /*
         * Current iteration of Push notification events
         */
        function registerV5() {

            $ionicLoading.show({
                template: '<ion-spinner></ion-spinner>'
            });

            if (ionic.Platform.is('browser')) {
                alert("You are running on browser, please switch to your device for notifications.");
                $ionicLoading.hide();
                return;
            }

            /**
             * Configuration doc:
             * https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/API.md#pushnotificationinitoptions
             */
            var GCM_PROJECT_ID = 'xxxxxx';

            $cordovaPushV5.initialize({
                "android": {
                    "clearNotifications": false,
                    "senderID" : GCM_PROJECT_ID
                }
            });

            $cordovaPushV5.register().then(function (deviceToken) {
                console.log("Successfully registered", deviceToken);

                $scope.data.deviceToken = deviceToken;

                // Below code required to configure $cordovaPushV5 notifications emitter. 
                // Don't pass function it's not handler.
                $cordovaPushV5.onNotification();
                $cordovaPushV5.onError();

                $ionicLoading.hide();
            }, function (error) {
                console.log("Failed registration");
                console.log("error object : ", error);
                $ionicLoading.hide();
            });
        }

        $rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data) {
            console.log("notification received");
            console.log("data object: ", data);

            var foreground = data.additionalData.foreground || false;
            var threadID = data.additionalData.payload.threadID || '';
            var group = data.additionalData.payload.group || false;

            if (foreground) {
                // Handle foreground push notifications
                console.log('Receive notification in foreground');
            } else {
                // Manage push messages while app is in background or closed
                console.log('Receive notification in background');
                // Open FB Messenger app when user clicks notification UI while app is inactive.
                if (typeof data.additionalData.coldstart != "undefined" && data.additionalData.coldstart == false)
                    if (!group)
                        // Open FB Messenger chat window for specific user
                        window.open('fb-messenger://user/' + threadID, '_system', 'location=no');
                    else
                        // Open FB Messenger group chat window
                        window.open('fb-messenger://groupthreadfbid/' + threadID, '_system', 'location=no');                
            }
        });

        $rootScope.$on('$cordovaPushV5:errorOccurred', function(event, error) {
            console.log("notification error occurred");
            console.log("event object: ", event);
            console.log("error object: ", error);
        });

Further insights can be found on Github at: https://github.com/driftyco/ng-cordova/issues/1125 and on this resource: https://github.com/yafraorg/yafra/wiki/Blog-Ionic-PushV5

Answer 4

Dealing with this issue extensively, I've come to discover that there are currently two iterations of the cordova push plugin available:

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

While both versions are compatible with ngCordova, only the outdated one is properly documented.

The deprecated version goes by $cordovaPush while the newer one is labeled as $cordovaPushV5, each boasting distinct functionalities.

In my case, the issue arose when attempting to integrate the cordova-plugin-push using outdated documentation from the ngCordova platform.

The provided code snippet illustrates how to implement the latest version for Push notifications successfully:

 /*
         * Current iteration of Push notification events
         */
        function registerV5() {

            $ionicLoading.show({
                template: '<ion-spinner></ion-spinner>'
            });

            if (ionic.Platform.is('browser')) {
                alert("You are running on browser, please switch to your device for notifications.");
                $ionicLoading.hide();
                return;
            }

            /**
             * Configuration doc:
             * https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/API.md#pushnotificationinitoptions
             */
            var GCM_PROJECT_ID = 'xxxxxx';

            $cordovaPushV5.initialize({
                "android": {
                    "clearNotifications": false,
                    "senderID" : GCM_PROJECT_ID
                }
            });

            $cordovaPushV5.register().then(function (deviceToken) {
                console.log("Successfully registered", deviceToken);

                $scope.data.deviceToken = deviceToken;

                // Below code required to configure $cordovaPushV5 notifications emitter. 
                // Don't pass function it's not handler.
                $cordovaPushV5.onNotification();
                $cordovaPushV5.onError();

                $ionicLoading.hide();
            }, function (error) {
                console.log("Failed registration");
                console.log("error object : ", error);
                $ionicLoading.hide();
            });
        }

        $rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data) {
            console.log("notification received");
            console.log("data object: ", data);

            var foreground = data.additionalData.foreground || false;
            var threadID = data.additionalData.payload.threadID || '';
            var group = data.additionalData.payload.group || false;

            if (foreground) {
                // Handle foreground push notifications
                console.log('Receive notification in foreground');
            } else {
                // Manage push messages while app is in background or closed
                console.log('Receive notification in background');
                // Open FB Messenger app when user clicks notification UI while app is inactive.
                if (typeof data.additionalData.coldstart != "undefined" && data.additionalData.coldstart == false)
                    if (!group)
                        // Open FB Messenger chat window for specific user
                        window.open('fb-messenger://user/' + threadID, '_system', 'location=no');
                    else
                        // Open FB Messenger group chat window
                        window.open('fb-messenger://groupthreadfbid/' + threadID, '_system', 'location=no');                
            }
        });

        $rootScope.$on('$cordovaPushV5:errorOccurred', function(event, error) {
            console.log("notification error occurred");
            console.log("event object: ", event);
            console.log("error object: ", error);
        });

Further insights can be found on Github at: https://github.com/driftyco/ng-cordova/issues/1125 and on this resource: https://github.com/yafraorg/yafra/wiki/Blog-Ionic-PushV5

Having trouble enabling push notifications on Android with ngCordova

Answer №1

Answer №2

Similar questions

Is it possible to include spaces in a JavaScript alert message?

Is there a way to include a React component within the setContent method of Leaflet?

NodeJS Express Application Error: Unable to access /url

Picture in the form of a radio button

What is the best way to utilize mapping and filtering distinct values in an array using TypeScript?

Struggling to add custom styles to an Ionic radio button

Bringing in a script and invoking a function on a specific variable

The width of Material UI Grid decreases every time it is re-rendered

Using the filter() function in jQuery allows for efficient sorting and

How should I proceed if a TypeScript definition file that I am relying on is lacking a specific definition?

Converting Venn diagram code from JavaScript <script> tags to Angular 2: A step-by-step guide

Ways to verify if a Discord.js snowflake is present in a collection of other identification numbers

Retrieve a file from a URL using Javascript's AJAX functionality

explore a nested named view using ui-router

Exception: Closing the database connection failed: db.close is not a callable

Combining two forms into one PHP page, but intending to submit only a single form

Perform activities within a component responsible for displaying a flatlist

Navigating the issue of updateMany not functioning properly in mongoose and nodejs

Can the data retrieved from a jsonp call that may be considered "bad" be utilized effectively?

Non-responsive Click Event on Dynamically Created Div Class