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

Transfer the elements from one array list to another array list

The output generated by grunt-contrib-handlebars differs from that of the handlebars npm task

Utilizing javascript to reverse an array and seamlessly filling in the missing elements

Using React.render to render an empty subcomponent within a jsdom environment

Implement handleTextChange into React Native Elements custom search bar component

What is the process of using observables in Angular to retrieve a number or variable?

Instructions on exporting binary data to a PNG file using nodejs

Is it possible for a button to simultaneously redirect and execute a function using asynchronous JavaScript?

What is the method to prevent the label from closing in the MUI 5 datepicker?

Is it possible to bypass the confirmation page when submitting Google Form data?

The Date.UTC function is not providing the correct output

Substitute regular expressions with several occurrences by their respective capture groups

Display message in a modal using React or JavaScript

Filtering data on objects in Angular can be achieved by utilizing the built-in

Is using the new Date function as a key prop in React a good

Arrange the columns in the Table in both ascending and descending order

"Troubleshooting Image Loading Issues in Next.js: A Guide to Reloading Unresponsive

Creating HTML elements using JavaScript compared to importing an HTML fileIn JavaScript,

Adding an active class to a selected list item can easily be accomplished by targeting the

Executing an Ajax callback function to navigate to a different page