This doc explains why the push template notifications look slightly different than the default notifications and also covers the rendering issues encountered with Push templates.
Size of Push Template Notifications
| Notification Type | Height in Collapse mode | Height in Expand mode |
|---|---|---|
| Native notification (Basic) | 100 dp | ~300 dp |
|
Custom notification SDK version below 11.4.02 & Push templates module version below 2.4.0 |
64 dp | 256 dp |
|
Custom notification SDK version 11.4.02 & above & Push templates module version below 2.4.0 & above |
100 dp | 287 dp |
Push templates with 64dp height
The push dimensions for custom notification is inline with the Android guidelines for custom notifications.
Due to the lesser height in custom notifications, the height of a default notification is bigger than the customized notification. The reason for this is that the custom push notification with height > 64 dp was failing on some devices. And since dynamic layouts are not feasible, we restricted the height to the dimensions as per Android guidelines.
In expanded mode, the available area for an image is as mentioned below:
| Available image height | Buttons present |
|---|---|
| 192 dp | No |
| 152 dp | Yes |
Due to restricted space in the expanded mode, the images might get cropped even though those images appear fine in the native notifications.
Push templates with 100dp height:
- The new and improved Push templates with more area are available for SDK version 11.4.02 & above & the Push templates module version 2.4.0 & above.
- The look and feel of the improved notifications are similar to that of basic notifications in terms of font size, spacing, and padding.
- Customization of the app name and color is supported. We are testing more OEMs and will whitelist the OEMs.
- The 100dp notifications will only work for whitelisted OEMs because the 100dp customization doesn't render properly on all devices, mostly due to various skin customizations done by OEMs on top of the OS. As of now, Google, OnePlus, Samsung, Oppo, Vivo, and Motorola are whitelisted. We are working on adding more OEMs to this list
- In addition to this, we have the provision of whitelisting OEMs at the DB level. This means that you can choose to whitelist more OEMs or blacklist the one that is already whitelisted, after doing due diligence at your end. Just raise a support ticket to modify the set of whitelisted OEMs.
- Whitelisting approach:
- For each OEM, we have tested the latest 3 skin versions because the notification behavior changes wrt different skin versions. This will cover the latest 3 Android versions (Android 11, 10 & 9). Android 12 is not on the consideration list because the notification layout for Android 12 is very different.
- If 100dp renders fine for all the 3 latest skin versions, we will whitelist the OEM else we will consider each OEM on a case-by-case basis.
- If the 100dp is not supported for a device/OEM, the 64dp custom push notification will be rendered
For best results in image rendering, we suggest that you follow these guidelines for all notifications:
1. Maintain an image aspect ratio of ~2:1. We have observed that cropping is minimal when the image is close to this aspect ratio. However, please note that you might notice some cropping on a few devices despite images following this aspect ratio. This is because of 2 reasons:
a. The varying device sizes in Android.
b. Some OEMs add further customizations on top. For eg: In RedMi devices, additional padding is added around push notifications which leads to further cropping of the Push notification & the image.
2. Create images such that the content is center aligned. This would ensure that the main content doesn't get truncated even if some cropping is happening around the margins.
2. Some users receive stylized push notifications without background color
We observed that some of our client users received the push notification with HTML content but without the background color. Let's understand the reason behind this:
Whenever you configure a push template notification with
- HTML text (meaning, you have either set the text as bold/ italic/ underlined/ strike-through or added some text color) and
- Background color
- Image
The SDK renders the notification in the following sequence:
- Renders a basic push notification with HTML text fields & app icon
- Then, it tries to draw the custom layout containing the background color. If you configured an image, then SDK will try to download the image in parallel
Since SDK only gets ~10 secs to render the entire notification, sometimes due to poor internet connectivity or other network issues, the background rendering or image rendering or both might fail. If both fail, then this would result in showing a push notification with only the stylized text and NO background color.
Impact of background color rendering failure:
1. If you set your text color as white, then users would end up seeing a blank notification as shown below if their device theme is set as light mode
2. If you set your text color as black, then users would end up seeing a blank notification as shown below if their device theme is set as dark mode
So, we suggest that:
1. wherever possible, use text colors that contrast with light & dark backgrounds.
2. While creating campaigns on the MoEngage dashboard, check the preview in both dark & light modes to make sure the notification looks fine in both modes.
3. Color inversion in dark mode (device-specific issue)
Another rare issue we have observed is that colors get inverted in dark mode when a Stylized Push is sent. This has been observed only on a few Oppo devices running on Android 10. Though we have taken utmost precautions to prevent this issue, there seems to be some bug with ColorOS (an operating system created by OPPO) which is beyond the scope of MoEngage.
4. Personalization failure
Consider a scenario where you have personalized both the template and backup notifications but not added the personalization fallback. In this situation, if the personalization fails for either the template or backup then the notification will not be sent to any users. This is because template and backup are considered to be part of one payload and since personalization fallback is not present, we won't have any alternate message to send to the user in case of failure.
To avoid this issue, make sure that you add a personalization backup to your messages.