How to set icon from local image for $cordovaLocalNotification in Ionic mobile application?

Question

I'm developing a mobile application using the Ionic framework and am currently trying to configure local notifications. I'm using ngCordova with the local-notification plugin.

The notifications are currently working, but I can't seem to figure out how to set the icon from a local file. My image is currently located in my ionic project repository at path 'www/img/image.png'. I'm trying to schedule the notification using the following code:

  var alarmTime = new Date();
      alarmTime.setMinutes(alarmTime.getMinutes() + 15);

    $cordovaLocalNotification.schedule({
      id: Math.random().toString(),
      date: alarmTime,
      message: 'Timeout Warning',
      title: 'Return to prevent your session from expiring.',
      autoCancel: false,
      icon: 'img/image.png'
    }, $scope);

The notification works, but the desired icon does not appear. In the icon option, I've also tried 'www/img/image.png', as well as 'file://img/image.png'. Each time, I always see the default cordova robot icon instead of the icon I'm trying to specify.

Does anyone have any tips on how to set the icon option properly? The documentation gives examples using external images, but is it possible to use a local image?

Answer 1

$cordovaLocalNotification.schedule({
  id: Math.random().toString(),
  date: alarmTime,
  message: 'Timeout Warning',
  title: 'Return to prevent your session from expiring.',
  autoCancel: false,
  icon: 'someimage'
}, $scope);

The icon name 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 this case they are:

/platforms/android/res/drawable/someimage.png

Found the solution here: ngCordova + local notification plugin

Also, check the plugin documentation on github: https://github.com/katzer/cordova-plugin-local-notifications

It seems that you should use an icon from public url, try uploading your icon to a public reachable url (drive, drobpox, tinypng .. ).

Answer 2

 $scope.scheduleSingleNotification = function () {
        $cordovaLocalNotification.schedule({
          id: 1,
          title: 'GRM APP Builder',
          text: 'Quer café?!?',
          badge: 1,
          icon: 'res://coffee.png',
          data: {
            customProperty: 'custom value 1'
          }
        }).then(function (result) {
          console.log('Notification 1 triggered');
        });
      };

After spend hours with this question, I saw that one comment above it's really right.

If you want to change icon, you need to create a folder called "drawable" in "[my ionic app folder]\platforms\android\res\drawable".

But the trick is: after this you need to quit your livereload mode and execute again CLI command "ionic run android -l -c -s". It's necessary because you need to copy new assets to device.

I only tested with Android device, if you can test with iOS please send a review here.

Answer 3

For use local file use path as file://

You can use any file from www folder as /assets/www/, for example you put image to folder in www/img, path need set as file://assets/www/img/your_file.png

For set your icon application for notification use as file://res/drawable-ldpi-v4/icon.png Example:

      $cordovaLocalNotification.schedule({
            id: message.number,
            date: d,
            message: message['message'],
            title: message['name'],
            //ongoing: true //not cleared messages
            sound: null,
            icon: 'file://res/drawable-ldpi-v4/icon.png'
            //OR file://assets/www/img/your_file.png
        })