BigPicture notifications are not visible in android

[naveenthontepu]

Description

Unable to show big picture notifications when triggering notifications using Pinpoint. I am using test messaging feature for sending out a push notification to my android device the following is the request

{"Addresses":{"":{"ChannelType":"GCM"}},"Endpoints":{},"MessageConfiguration":{"GCMMessage":{"Title":"🌾🌾Sri Lalitha HMT Rice bag🌾🌾 ","Action":"DEEP_LINK","Body":"🌾🌾Sri Lalitha HMT Rice bag sdfsdf🌾🌾 ","ImageUrl":"https://pics.superk.in/assets/customer-app/notification-icons/Ugadi+Notifications/Ugadi_offer.jpeg","SmallImageIconUrl":"","ImageIconUrl":"","Url":""}}} 

The Image is being shown as the Large Icon but is not being shown as Big Picture Notification.

Categories

• Analytics
• API (REST)
• API (GraphQL)
• Auth
• Authenticator
• DataStore
• Notifications (Push)
• Storage

Steps to Reproduce

1. Trigger a normal notification using the Pinpoint test messaging feature with a android media url with a big picture.

Screenshots

Platforms

• iOS
• Android
• Web
• macOS
• Windows
• Linux

Flutter Version

3.19.3

Amplify Flutter Version

2.2.0

Deployment Method

Amplify Gen 2

Schema

[tyllark]

Hello @naveenthontepu, unfortunately we do not support this feature. However as described in the last paragraph here you can handle data messages to display local notifications. Using flutter_local_notifications: ^19.0.0 and http: ^1.3.0 I was able to produce the following local notification:

[tyllark]

I set Amplify.Notifications.Push.onNotificationReceivedInBackground to call back to the global function _handleDataMessage defined below. _handleDataMessage will parse the MessageData and create a local notification using Android's BigPictureStyle.

@pragma("vm:entry-point")
Future<void> _handleDataMessage(PushNotificationMessage message) async {
  try {
    final data = _getMessageData(message);
    if (data == null) return;

    await _showLocalNotifications(data);
  } catch (e) {
    //Exception Processing Data
  }
}

Map<String, dynamic>? _getMessageData(PushNotificationMessage message) {
  final json = message.data['pinpoint.jsonBody'] as String?;
  if (json == null) return null;

  return jsonDecode(json) as Map<String, dynamic>;
}

FlutterLocalNotificationsPlugin? _localNotifications;
Future<void> _showLocalNotifications(Map<String, dynamic> data) async {
  await _intializeLocalNotifications();

  //Parse Message Data
  final title = data['LocalTitle'] as String?;
  final body = data['LocalBody'] as String?;
  final imageUrl = data['LocalImageUrl'] as String?;
  final style = await _getStyle(title, body, imageUrl);

  return _localNotifications?.show(
    0, //TODO: add id support
    title,
    body,
    NotificationDetails(
      android: AndroidNotificationDetails(
        'channelId', //TODO: add channel id
        'channelName', //TODO: add channel name
        styleInformation: style,
      ),
    ),
  );
}

Future<void> _intializeLocalNotifications() async {
  if (_localNotifications != null) return;

  final localNotifications = FlutterLocalNotificationsPlugin();
  InitializationSettings initializationSettings = InitializationSettings(
    android: AndroidInitializationSettings('@mipmap/ic_launcher'),
  );

  await localNotifications.initialize(initializationSettings);
  _localNotifications = localNotifications;
}

Future<BigPictureStyleInformation?> _getStyle(
  String? title,
  String? body,
  String? imageUrl,
) async {
  final image = await _getImage(imageUrl);
  if (image == null) return null;

  return BigPictureStyleInformation(
    image,
    contentTitle: title,
    summaryText: body,
  );
}

Future<ByteArrayAndroidBitmap?> _getImage(String? imageUrl) async {
  if (imageUrl == null) return null;

  final response = await http.get(Uri.parse(imageUrl));
  return ByteArrayAndroidBitmap.fromBase64String(
    base64Encode(response.bodyBytes),
  );
}

I then used the following test message via the aws cli to send the data message to my Android device.

{
    "Addresses": {
        "YOUR_TOKEN": {
            "ChannelType":"GCM"
        }
    },
    "Endpoints": {},
    "MessageConfiguration": {
        "GCMMessage": {
            "SilentPush": true,
            "Data": {
              "LocalTitle": "🌾🌾Sri Lalitha HMT Rice bag🌾🌾",
              "LocalBody": "🌾🌾Sri Lalitha HMT Rice bag sdfsdf🌾🌾",
              "LocalImageUrl": "https://pics.superk.in/assets/customer-app/notification-icons/Ugadi+Notifications/Ugadi_offer.jpeg"
            }
        }
    }
}

[naveenthontepu]

Is there any plan to suppprt this feature? as in the marketing landscape it a very basic requirement for all the apps.
Firebase messaging lib in flutter also supports this out of the box.
I would prefer to use the firebase library instead of handling it ourselves by sending it as a silent notification because when the actual silent notification has to be sent to delete unregistered endpoints it needs to be handled separately again.

[tyllark]

Hello @naveenthontepu, we are using a library from Amplify Android for displaying the local notification and they only support BigTextStyle at this time. I'm reaching out to them to see their plans for this feature request. I will get back to you here once I have an update.

[naveenthontepu]

FYI, as this is not supported out of the box by amplify flutter and handling it by ourself even after the lib integration is forcing us to use firebase sdk but the problem is both the libraries can't exist at the same time.

We are unable to remove the support of amplify-push-notification library as the PN library registers the APNS/FCM token in the analytics library and analytics library doesn't expose the registering of APNS/FCM token to Pinpoint endpoint by the application.

If the supporting of Big picture notification is not supported then you should be atleast expose registering the APNS/FCM tokens to the Pinpoint endpoint so that these push notification and analytics libraries exist independent of each other.

[tyllark]

Hello @naveenthontepu, I've reached out to the Amplify Android team and they confirmed they are also getting feature requests to support the customization of Pinpoint notifications. We are going to create a few designs and open a feature request against the Amplify Android SDK (which we use to display local notifications). Ill provide updates here once we get a design approved.

Push notification token registration should only be tied to amplify_push_notifications as that is where we wrap FirebaseMessagingService for Android and call registerForRemoteNotifications for iOS. Notifications depends on Analytics for recording campaign and journey events, but you should be able to use another push notification solution in conjunction with amplify_analytics_pinpoint. If you are still experiencing issues in regards to this, let me know and Ill attempt to reproduce the error.

As a side note, if you are using Pinpoint to send the notification the payload will arrive as a data message, which would require you to parse the message's data and display a local notifications as we are doing in our package. I understand you are trying to avoid this, so I wanted to give you a heads up.

{
	"notification": null,
	"data": {
		"pinpoint": {
			"notification": {
				"imageUrl": "MY_IMAGE_URL",
				"title": "MY_TITLE",
				"body": "MY_BODY",
				"silentPush": 0
			},
			"campaign": {
				"campaign_id": "_DIRECT"
			}
		}
	}
}