Envoyer une image dans la charge utile de notification

L'API FCM HTTP v1 et le compilateur de notifications permettent d'envoyer des liens vers des images dans la charge utile d'une notification d'affichage, afin de télécharger l'image sur l'appareil après l'envoi. Cette fonctionnalité est compatible avec les images et les vidéos pour les applications Apple (consultez la documentation Apple pour connaître les limites de taille des fichiers).

Pour pouvoir recevoir et gérer des images de notification dans une application Apple, vous devez ajouter une extension de service de notification. L'extension du service de notification permet à votre application de gérer l'image envoyée dans la charge utile FCM avant d'afficher la notification à l'utilisateur final.

Configurer l'extension du service de notification

Pour ajouter une extension de service, effectuez les tâches de configuration requises pour modifier et présenter les notifications dans les APN, puis ajoutez l'API d'assistance de l'extension FCM dans NotificationService.m. Plus précisément, au lieu de terminer le rappel avec self.contentHandler(self.bestAttemptContent);, terminez-le avec FIRMessaging extensionHelper, comme indiqué:

@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];

}
...

Créer la requête d'envoi

Dans votre requête d'envoi de notification, définissez les options ApnsConfig suivantes:

  • fcm_options.image contenant l'URL de l'image
  • headers({ "mutable-content": 1})

L'exemple de requête d'envoi suivant envoie un titre de notification commun à toutes les plates-formes, mais également une image. Voici une approximation de l'effet visuel sur l'appareil d'un utilisateur:

Dessin simple d&#39;une image dans une notification à l&#39;écran

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"
       }
     }
   }
 }

Pour en savoir plus sur les clés disponibles dans les blocs spécifiques à la plate-forme dans le corps du message, consultez la documentation de référence HTTP v1.

Avec mutable-content défini comme indiqué, cette requête d'envoi permet à l'extension de service sur le client destinataire de gérer l'image transmise dans la charge utile.