CleverTap / clevertap-react-native

CleverTap React Native SDK
Other
59 stars 71 forks source link

Image is not showing in iOS Rich push notification #409

Open kuldeepAlG opened 2 months ago

kuldeepAlG commented 2 months ago

Image is not coming ios but its coming fine on the android side image in sending in push notification from clevertap dashboard: https://db7hsdc8829us.cloudfront.net/dist/1712904832/i/13ca46afbff14e4c83711a78a4cd5145.jpeg I have followed the exact same steps mentioned in the link. https://github.com/CleverTap/clevertap-react-native/blob/HEAD/docs/iospushtemplates.md

Changes i have done in my:

  1. Podfile Added the below code at the last of the podfile

    target 'NotificationService' do pod "CTNotificationService", :modular_headers => true end

  2. NotificationService.h

import <CTNotificationService/CTNotificationService.h>

import "UIKit/UIKit.h"

@interface NotificationService : CTNotificationServiceExtension @end

  1. NotificationService.m I have removed all the auto generated code and added only below code

import "NotificationService.h"

@implementation NotificationService

  • (void)didReceiveNotificationRequest:(UNNotificationRequest )request withContentHandler:(void (^)(UNNotificationContent _Nonnull))contentHandler { [super didReceiveNotificationRequest:request withContentHandler:contentHandler]; }

@end

  1. NotificationService/info.plist

I have replaced the value of NSExtensionPrincipalClass to CTNotificationServiceExtension and again reverted it but non of these is working

Can anyone guide me, if im missing anything?

akashvercetti commented 2 months ago

@kuldeepAlG Could you help us with a few things so we can check it out?

Also, we have a sample app with rich pushes enabled in our github repo. Could you check the implementation there and see if it matches yours? Here it is: https://github.com/CleverTap/clevertap-react-native/tree/master/Example

kuldeepAlG commented 2 months ago

@kuldeepAlG Could you help us with a few things so we can check it out?

  • your push notification JSON payload key values.
  • package.json if possible.

Also, we have a sample app with rich pushes enabled in our github repo. Could you check the implementation there and see if it matches yours? Here it is: https://github.com/CleverTap/clevertap-react-native/tree/master/Example

@akashvercetti Im sending notification from Clevertap Dashboard. And when clicking on it im getting this object. _{"W$dt": "APPLE", "W$id": "0_0", "W$pivot": "wzrk_default", "W$rnv": false, "ct_mediaType": "image", "ct_mediaUrl": "https://db7hsdc8829us.cloudfront.net/dist/1712904832/i/52867f6f7303452183e71654ce3d3203.jpeg", "wzrk_acctid": "TEST-8-9-***Z"}

Im attaching relevant libs from package.json file : "clevertap-react-native": "^2.2.1", "@react-native-community/push-notification-ios": "^1.11.0", "@react-native-firebase/app": "^18.5.0", "@react-native-firebase/messaging": "^18.5.0",

akashvercetti commented 2 months ago

@kuldeepAlG Your image URL works fine on our sample app. We are able to get the image in a rich push. Heres my payload:

{
    "W$dt" = APPLE;
    "W$id" = "0_0";
    "W$pivot" = "wzrk_default";
    "W$rnv" = 1;
    aps =     {
        alert =         {
            body = dfsgdfg;
            title = dfgdfg;
        };
        "mutable-content" = 1;
    };
    "ct_mediaType" = image;
    "ct_mediaUrl" = "https://db7hsdc8829us.cloudfront.net/dist/1712904832/i/52867f6f7303452183e71654ce3d3203.jpeg";
    "wzrk_acct_id" = "W9R-486-4W5Z";
}

Your payload needs to have mutable-content as 1 to trigger the notification extension. When you select "Rich Media" from the dashboard, ensure that it is set as 1. I have attached the screenshot of values from the dashboard.

Screenshot 2024-09-04 at 4 32 56 PM
kuldeepAlG commented 2 months ago

@akashvercetti Thank you for the quick response. Im sending notification from Clevertap dashboard and i have already checked the mutable content box, still the image is not coming in the notification. Can you let me know how to add this from dashboard.

aps = { alert = { body = dfsgdfg; title = dfgdfg; }; "mutable-content" = 1; };

Screenshot 2024-09-04 at 4 39 55 PM

Even after setting aps in Custom key-value pairs. Im not getting it when clicking the notification

Screenshot 2024-09-04 at 5 59 07 PM
akashvercetti commented 2 months ago

@kuldeepAlG I was able to get the notification image after creating a campaign. Are you clicking on the notification? or dragging it downwards? Clicking it would open the app. You can either drag the notification downwards if you receive it on the top of the screen, or you can long press the notification for it to expand and let it show the image.

kuldeepAlG commented 2 months ago

@kuldeepAlG I was able to get the notification image after creating a campaign. Are you clicking on the notification? or dragging it downwards? Clicking it would open the app. You can either drag the notification downwards if you receive it on the top of the screen, or you can long press the notification for it to expand and let it show the image.

@akashvercetti I have tried dragging and long press the notification for it to expand, but no image is showing in either case. The image is not coming in the notification. From where i can customised my APS object. Im trying to add it as a Custom key-value pairs but its not reflecting

akashvercetti commented 2 months ago

@kuldeepAlG you do not need to add "aps" keys in custom key-values.

kuldeepAlG commented 2 months ago

@kuldeepAlG you do not need to add "aps" keys in custom key-values.

  • Could you please attach a video of the notification arriving and the long press/drag action taken on it?
  • Also Could you please attach images of all the values you add while creating the campaign?

@akashvercetti

  1. Video of the notification arriving and the long press/drag action taken: https://drive.google.com/file/d/1tiHG-cF0kJS2dAbd-0-7PpNOlzHwzTs6/view
  2. Screenshot of values: https://drive.google.com/file/d/1PptGAvGowQgti9xLkH1ZkJLXJ2w_Kg2x/view
akashvercetti commented 2 months ago

@kuldeepAlG To debug this further, i can suggest 2 steps: