How to show a modal while receive notifications?

ionic-v1
1

I register my notification callback in app.js like this:

angular.module('starter', ['ionic', 'starter.services', 'starter.controllers'])

.run(function($ionicPlatform){
    $ionicPlatform.ready(function(){
        localNotification = window.plugin.notification.local;
        pushNotification  = window.plugins.pushNotification;

        var platform = device.platform.toLowerCase();
        //register callback here...
    });
})

the callback function is a global function like this:

var onNotificationAPN = function(event){
    //show a modal here...
}

My question is, if I want to show a modal in this callback, how can I achieve this?
Modals are defined in controller, how can I access the modal and show it in a global function?

2

You should be able to move this to a controller and have no issues.

.controller('MyCtrl', function ($scope, $ionicPlatform) {

  $ionicPlatform.ready(function () {
    alert('Ionic And Cordova ready');
  });
});

This way you can set up everything and make sure it all happens within the ionicPlatform.ready.
Tested it out on an actual device and got things to work.

3

Yes, it works, thanks so much!

4

however, I still have another problem.
I use the Push Notification Plugin from phonegap-build:

In the doc, when I register the callbacks, I need to do something like this:

pushNotification.register(
    tokenHandler,
    errorHandler, {
        "badge":"true",
        "sound":"true",
        "alert":"true",
        "ecb":"onNotificationAPN"
    });

I want to show a view when user clicks the push notification, that means I need to do something in the onNotificationAPN function.

In the github README doc, onNotificationAPN is a global function, so it’s OK.
However, in my case, I want to register a function in my controller, so I can call $location or $scope to change the view.

I try this:

$scope.onNotificationAPN = function(event) {
    alert('onNotificationAPN scope');
};
.....
var args = {"badge":"true", "sound":"true", "alert":"true", "ecb":"$scope.onNotificationAPN"};
pushNotification.register(tokenHandler, errorHandler, args);

it can not work.
What’s the right way to achieve this?

5

Hmm, I’ll be honest…I’ve never messed around with the push-notification plugins. I use PushWoosh for my notifications.

@Calendee, have any ideas for this?

6

Seems like the same questions are popping up… Instead of trying to call back directly to my Angular code, I used a couple of lines of code in the following manner:

                //This works for me because in my code I have a factory called
                //      PushProcessingService with method registerID
                var elem = angular.element(document.querySelector('[ng-app]'));
                var injector = elem.injector();
                var myService = injector.get('PushProcessingService');
                myService.registerID(e.regid);

Or if all you want to do is redirect somewhere, you can just use window.location. More info here.

2 Likes
7

Thanks for your reply.
Even though you use PushWoosh, you still need to show something when user clicks the push notification, right?
PushWoosh callback is like this:

document.addEventListener('push-notification', function(event) {
        var notification = event.notification;
        navigator.notification.alert(notification.aps.alert);
        pushNotification.setApplicationIconBadgeNumber(0);
    });

This is almost the same with my case.
If I want to show a modal here, what can I do?

8

Have you tried removing $scope from the onNotificationAPN It’s a shot in the dark because PushWoosh calls its own notification window so I’ve never had to deal with it.

Are you getting anything in you console?

9

Complete noob to push notifications. Are you talking about dealing with these push notifications happen while the app is open or while the app is closed. I’m assuming while the app is open.

My suggestion would be to have the push notification update a service. Then, in some controller, do a watch on the value in the service. If the service value “hasNotification” changes, then the controller will open the modal.

Does that help?

10

Thanks, Calendee.
Indeed, what I need is how to communicate with the angular controller module from a native global js function.
Your advice is quite smart to use the service as the media of communication between native js and angular, I think it can solve my problem.

However, I found out another simple way before your advice:
At first, I try to show a modal on notification, and failed.
Then, I decided to redirect to a view like this:

window.location.href = "#/menu/promotions"

And it works, without talking to angular directly.
The solution is so simple, I didn’t think of this because angular still works like a magic to me.
Sorry to bother everyone for this!

11

I tried, and failed:(

12

The callback function needs to be global, but you can invoke your service method by using an injector like this:

services.service('MyPushService', function ($ionicPlatform, $cordovaPush, $cordovaDialogs) {

    var iosConfig = {
        "badge": "true",
        "sound": "true",
        "alert": "true",
        "ecb": "onNotificationAPN"
    };

    $ionicPlatform.ready(function () {
        $cordovaPush.register(iosConfig).then(function (appId) {
            console.log("Registered push events: " + JSON.stringify(appId));
        }, function (err) {
            console.log("Could not register push events: " + JSON.stringify(err));
        });
    });

    this.onNotificationAPN = function (event) {

        if (event.alert)
            $cordovaDialogs.alert(event.alert);

        if (event.sound)
            $cordovaDialogs.beep(1);

        if (event.badge) {
            $cordovaPush.setBadgeNumber(event.badge);
        }
    };
});

function onNotificationAPN(event) {
    var injector = angular.element(document.getElementById('main')).injector();
    injector.invoke(function (MyPushService) {
        MyPushService.onNotificationAPN(event);
    });
}
3 Likes
13

Has anyone figured out how to display a modal or $ionicpopup? Alert() works from app.js. But anything else won’t.

Right now, I’m working around this by always displaying the notification, but it’d be nice to display a pop-up if the app is in the foreground.

14

I just got it to work using the push plugin (https://github.com/phonegap/phonegap-plugin-push) in combination with the cordova-plugin-dialogs plugin (https://github.com/apache/cordova-plugin-dialogs).