ngCordova + local notification plugin

ionic-v1
2

One day a question, second day later the answer :wink: I should rather start a blog instead of litter here :wink:
One simple answer to my problems described above is: do not use ngCordova for local notifications. Use the plugin original examples. They work as described. ngCordova methods don’t. Simple as that. The whole magic about this plugin is:

  1. add plugin using CLI (instruction: https://github.com/katzer/cordova-plugin-local-notifications)

  2. in app_init.js or where you init your app add code that expose plugin events to the controllers. My way is:

var app = angular.module('app', [ 'ionic' ... ])

.run(function($rootScope, $ionicPlatform, ...) {

  $ionicPlatform.ready(function() {
    if (window.cordova) {
      document.addEventListener("deviceready", function() {
        window.plugin.notification.local.onadd = app.onReminderAdd;
        window.plugin.notification.local.onclick = app.onReminderClick;
        window.plugin.notification.local.oncancel = app.onReminderCancel;
        window.plugin.notification.local.ontrigger = app.onReminderTrigger;
     }, false);
  }

app.onReminderAdd = function(id, state, json) {
  $timeout(function() {
    $rootScope.$broadcast('onReminderAdded', id, state, json);
  }, 100);
}
// other events this way as well... You can do this 
// without the timeout of course
}
  1. Add event handlers to your selected controller e.g.
$scope.$on('onReminderAdded', function(event, id, state, json) {
  console.log('notification ADDED, id: ' + id  + ' state:' + state + ' json:' + json );
});
  1. Now add functions that add notifications, cancel, etc, and you can handle the new traffic from notifications using the events above. For example simple code for adding an immediate notification:
$scope.addNotification = function(tit, msg) {
  window.plugin.notification.local.add({
      id: 'MYLN',
      title:   tit,
      message: msg,
      icon:      'ic_notification',
      smallIcon: 'ic_notification_small',
});

What’s worth mentioning, because it is not explained in the plugin documentation, is the icons handling procedure. The icons names in the above example points to the location: /platforms/android/res/drawable/ To make the plugin use the icons, the image files must be located in this path and named as defined in the parameters. In my case they are:

/platforms/android/res/drawable/ic_notification.png and
/platforms/android/res/drawable/ic_notification_small.png

By trail and error I’ve found that best sizes are 48x48 for the bigger and 24x24 for the smaller.

Happy notifying!

Rafaellop