Envoyer une image dans la charge utile de notification

L'API FCM HTTP v1 et le composeur de notifications permettent d'envoyer des liens d'images dans la charge utile d'une notification à afficher, pour que les images soient téléchargées 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 notifications 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 fournie 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 APNs, puis ajoutez l'API d'assistance pour 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. Apple exige que l'URL de l'image inclue une extension de fichier valide pour identifier correctement le type de ressource.
  • headers({ "mutable-content": 1})

L'exemple de requête d'envoi suivant envoie un titre de notification commun à toutes les plates-formes, mais il envoie é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 d&#39;affichage

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

Consultez la documentation de référence HTTP v1 pour obtenir des informations détaillées sur les clés disponibles dans les blocs spécifiques à la plate-forme dans le corps du message.

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 fournie dans la charge utile.