Guía de configuración de iconos de push

Este documento explica cómo configurar los iconos pequeños de la barra de notificaciones, los iconos del lado derecho y las imágenes grandes.

📱 Métodos de configuración de iconos en iOS

Configuración de icono pequeño

Ir a Images.xcassets-AppIcon y configurar el icono iPhone Notification con las siguientes dimensiones:

• 40 x 40px
• 60 x 60px

Configuración de icono del lado derecho / imagen grande

✅ Versiones compatibles

• Compatible con iOS 10 y versiones posteriores a partir del EngageLab iOS SDK v3.0.0.

🧑‍💻 Configuración del cliente

1. Crear un servicio Service Extension.

2. Añadir el archivo mtpush-extension-ios-xxx.xcframework al proyecto Service Extension.

3. Añadir los dos frameworks siguientes:

   • libz.tbd
   • libresolv.tbd

4. Llamar al método [mtpushSetAppkey:] para configurar el AppKey (asegurarse de que coincida con el AppKey utilizado al crear la aplicación AppPush).

5. En el callback [didReceiveNotificationRequest:], obtener el enlace de la imagen. El código de ejemplo es el siguiente:

              
              - (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
  self.contentHandler = contentHandler;
  self.bestAttemptContent = [request.content mutableCopy];
  self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [NotificationService]", self.bestAttemptContent.title];
  
  NSString * attachmentPath = self.bestAttemptContent.userInfo[@"my-attachment"];
  //if exist
  if (attachmentPath) {
    //download
    NSURL *fileURL = [NSURL URLWithString:attachmentPath];
    [self downloadAndSave:fileURL handler:^(NSString *localPath) {
      if (localPath) {UNNotificationAttachment * attachment = [UNNotificationAttachment attachmentWithIdentifier:@"myAttachment" URL:[NSURL fileURLWithPath:localPath] options:nil error:nil];
        self.bestAttemptContent.attachments = @[attachment];
      }
      [self apnsDeliverWith:request];
    }];
  }else{[self apnsDeliverWith:request];
  }
}

            

🌐 Configuración del lado del servidor

Configurar los campos mutable-content y extras en ios:

JSON de ejemplo:

              
              "notification": {
  "ios": {
    "alert": {
      "title": "title",
      "subtitle": "subtitle"
    },
    "mutable-content": true,
    "extras": {
      "my-attachment": "https://raw.githubusercontent.com/Tikon/imgRepo/master/ic_launcher.png"
    }
  }
}

            

🤖 Métodos de configuración de iconos en Android

✅ Versiones compatibles

Compatible a partir del EngageLab Android SDK v4.4.0.

📡 Compatibilidad por canal

📝 Notas:

• OPPO: cuando el targetSdkVersion supera 20 y la versión de ColorOS > 5.0, la primera notificación muestra una imagen grande con conexión WiFi.
• Xiaomi: a partir de agosto de 2023, ya no se admite la configuración dinámica de iconos e imágenes grandes durante el push.

🎨 Configuración de icono pequeño

🧑‍💻 Configuración del cliente

• Si el proyecto contiene el recurso res/drawable/mtpush_notification_icon, se utilizará como icono predeterminado.
• Si este recurso no existe, se utilizará de forma predeterminada el icono de la aplicación.

Ejemplo de configuración del canal FCM:

              
              <meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/mtpush_notification_icon" />
<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/colorAccent" />

            

🌐 Configuración del lado del servidor

🖼️ Configuración de icono del lado derecho / imagen grande

🌐 Descripción de campos del lado del servidor

❓ Preguntas frecuentes

Problemas relacionados con el icono pequeño

1. ¿Se muestra en gris?

• En Android nativo 5.0 y versiones posteriores, si el targetSdkVersion de la app ≥ 21, el sistema aplicará forzosamente un color de máscara a los iconos pequeños de notificación, haciendo que se vean en gris. Para garantizar un buen contorno y reconocimiento, se recomienda utilizar iconos huecos sin sombras, degradados ni fondos, y nombrarlos como mtpush_notification_icon, sustituyendo el archivo por uno del mismo nombre en el directorio res/drawable del proyecto. Además, asegurarse de que todos los archivos de iconos relacionados con notificaciones (p. ej., drawable-xxhdpi para distintas densidades) dentro del directorio res se sustituyan de forma uniforme por los nuevos recursos de icono.
• Debido a restricciones de algunos sistemas (p. ej., teléfonos OnePlus o Google con Android 10), no se puede resolver.
• Los launchers de Xiaomi pueden almacenar iconos en caché. Tras la configuración, reiniciar el teléfono y volver a realizar la prueba.

Problemas relacionados con el icono del lado derecho / imagen grande

¿El icono o la imagen no se muestra?

1. Canal EngageLab: comprobar si se ha llamado a la interfaz del builder de estilo predeterminado de la barra de notificaciones. En caso afirmativo, eliminarla, desinstalar la app y volver a intentarlo.
2. APNs (iOS): el icono del lado derecho y la imagen grande corresponden a la misma imagen. En primer plano, el desplegable de notificación muestra la imagen grande; en otros casos, solo se muestra el icono del lado derecho.
3. FCM (Android): antes de expandirse, se muestra el icono del lado derecho; después de expandirse, se muestra la imagen grande.