Envía una imagen en la carga útil de la notificación

La API de HTTP v1 de FCM y el Compositor de Notifications admiten el envío de vínculos de imágenes en la carga útil de una notificación en pantalla para la descarga de imágenes en el dispositivo después de la entrega. Esta función es compatible con imágenes y videos para apps para Apple (consulta la documentación de Apple a fin de conocer los límites de tamaño de archivo).

Para recibir y manejar imágenes de notificaciones en una app para Apple, debes agregar una extensión del servicio de notificaciones. Esta extensión permite que tu app maneje la imagen entregada en la carga útil de FCM antes de mostrar la notificación al usuario final.

Configura la extensión del servicio de notificaciones

A fin de agregar una extensión de servicio, realiza las tareas de configuración necesarias para modificar y presentar notificaciones en APNS y, luego, agrega la API auxiliar de la extensión de FCM a NotificationService.m. Específicamente, en lugar de completar la devolución de llamada con self.contentHandler(self.bestAttemptContent);, complétala con FIRMessaging extensionHelper como se muestra a continuación:

@interface NotificationService () <NSURLSessionDelegate>
@property(nonatomic) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property(nonatomic) UNMutableNotificationContent *bestAttemptContent;
@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];

    // Modify the notification content here as you wish
    self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [modified]",
    self.bestAttemptContent.title];

  // Call FIRMessaging extension helper API.
  [[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent
                                            withContentHandler:contentHandler];

}
...

Crea la solicitud de envío

En la solicitud de envío de notificaciones, configura las siguientes opciones de ApnsConfig:

  • fcm_options.image que contiene la URL de la imagen. Apple requiere que la URL de la imagen incluya una extensión de archivo válida para identificar correctamente el tipo de recurso.
  • headers({ "mutable-content": 1})

En el siguiente ejemplo de solicitud de envío, se envía tanto el título de notificación común a todas las plataformas como una imagen. Esta es una aproximación del efecto visual en el dispositivo de un usuario:

Dibujo simple de una imagen en una notificación en pantalla

Node.js

const topicName = 'industry-tech';

const message = {
  notification: {
    title: 'Sparky says hello!'
  },
  android: {
    notification: {
      imageUrl: 'https://foo.bar.pizza-monster.png'
    }
  },
  apns: {
    payload: {
      aps: {
        'mutable-content': 1
      }
    },
    fcm_options: {
      image: 'https://foo.bar.pizza-monster.png'
    }
  },
  webpush: {
    headers: {
      image: 'https://foo.bar.pizza-monster.png'
    }
  },
  topic: topicName,
};

getMessaging().send(message)
  .then((response) => {
    // Response is a message ID string.
    console.log('Successfully sent message:', response);
  })
  .catch((error) => {
    console.log('Error sending message:', error);
  });

REST

POST https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send HTTP/1.1

Content-Type: application/json
Authorization: Bearer ya29.ElqKBGN2Ri_Uz...HnS_uNreA
{
  "message":{
     "topic":"industry-tech",
     "notification":{
       "title":"Sparky says hello!",
     },
     "android":{
       "notification":{
         "image":"https://foo.bar/pizza-monster.png"
       }
     },
     "apns":{
       "payload":{
         "aps":{
           "mutable-content":1
         }
       },
       "fcm_options": {
           "image":"https://foo.bar/pizza-monster.png"
       }
     },
     "webpush":{
       "headers":{
         "image":"https://foo.bar/pizza-monster.png"
       }
     }
   }
 }

Consulta la documentación de referencia de HTTP v1 para obtener información detallada sobre las claves disponibles en los bloques específicos de la plataforma del cuerpo del mensaje.

Con el mutable-content configurado como se muestra, esta solicitud de envío permite que la extensión de servicio alojada en el cliente receptor controle la imagen entregada en la carga útil.