feat: capacitor localnotification image is not showing

[armanhadifatah]

Bug Report

Latest Dependencies:

@capacitor/cli: 1.4.0

@capacitor/core: 1.4.0

@capacitor/android: 1.4.0

@capacitor/ios: 1.4.0

Affected Platform(s)

I tested it on Android and web also

• Android
• iOS
• Electron
• Web

Current Behavior

when showing notification no image is shown in the notification

Expected Behavior

when adding url and id to attachments it should show image in notification

Sample Code or Sample Application Repo

 LocalNotifications.schedule({
      notifications: [
        {
          title: "aaaa",
          body: "Body",
          id: 1,
          actionTypeId: 'OPEN_PRODUCT',
          attachments: [
            { id: 'face', url: 'https://khanoo.com/wp-content/uploads/estate_images/house/77-1576179614/230174.jpg' }
          ],
          schedule: {
            every: "minute"
          },
         
          extra: null
        }
      ]
    });

Reproduction Steps

Just test my code which i provided to see if you can see image or not

Other Technical Details

npm --version output: 6.13.4

node --version output: v12.13.1

pod --version output (iOS issues only): 1.9.0.beta.2

[jcesarmobile]

http/https urls are not supported by iOS (native API limitation)

on Android and Web the attachments are not shown as images, should be implemented

[malekian78]

i think attachments is not work for android.... for android you can use "largeIcon:" property to show your image first copy your image in res/drawable folder (not in 'res' only) and then write the name of your image in largeIcon........for example:
i copy my 'manager.png' in 'android\app\src\main\res\drawable'
then in my code:
LocalNotifications.schedule({
notifications: [
{
title: 'the title',
body: 'msg body',
id: 1,
largeIcon:'manager',
smallIcon:'manager'
}
]
});
it's look small but i think it much better than nothing.....

[ivanov84]

If someone wants to show big image with notification then you need to add this code at line 185 in LocalNotificationManager.java:

if (localNotification.getAttachments() != null) {
  mBuilder.setStyle(
    new NotificationCompat.BigPictureStyle()
      .bigPicture(localNotification.getBigImage(context))
    );
}

And this code at line 386 in LocalNotifications.java:

import android.net.Uri;
...
public Bitmap getBigImage(Context context) {
  if (attachments != null && attachments.size() > 0) {
    try {
      LocalNotificationAttachment bp = attachments.get(0);
      String bpUrl = bp.getUrl();
      final AssetUtil assets = AssetUtil.getInstance(context);
      Uri uri = assets.parse(bpUrl);
      if (uri != Uri.EMPTY) {
        return assets.getIconFromUri(uri);
      }
    } catch (Exception e){
      e.printStackTrace();
    }
  }
  return null;
}

And also you need to fix a bug in a capacitor file
node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/plugin/util/AssetUtil.java
at line 328:

change from

String authority = context.getPackageName() + ".provider";

to

String authority = context.getPackageName() + ".fileprovider";

And at line 106:

change from

String resPath = path.replaceFirst("file:/", "www").replaceFirst("\\?.*$", "");

to

String resPath = path.replaceFirst("file:/", "public").replaceFirst("\\?.*$", "");

Then these links (url: 'file://assets/notifications/preview.jpg') will work in your javascript scheduling code:

{
    id: 666,
    largeIcon: bigIcon,
    schedule: { at: rem },
    title: title,
    body: text,
    largeBody: text,
    attachments: [{ id: 'my_preview', url: 'file://assets/notifications/preview.jpg' }]
}

---

Also that plugin architecture is too ill-considered and I see error !!! FAILED BINDER TRANSACTION !!! when load standard images that worked fine with katzer plugin.

In order to fix somehow, I added compression in capacitor file
node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/plugin/util/AssetUtil.java
at line 259:

InputStream stream = context.getContentResolver().openInputStream(uri);
BitmapFactory.Options options = new BitmapFactory.Options();
options.inPreferredConfig = Bitmap.Config.RGB_565;
return BitmapFactory.decodeStream(stream, null, options);

Instead of that:

InputStream input = context.getContentResolver().openInputStream(uri);
return BitmapFactory.decodeStream(input);

P.S.: But bigImage should be no more then 512x256 and largeIcon no more then 256x256