Envoyer une image dans la charge utile de notification

L'API FCM HTTP v1 et le compositeur de notifications prennent en charge l'envoi de liens d'image dans la charge utile d'une notification d'affichage, pour le téléchargement de l'image sur l'appareil après la livraison. Cette fonctionnalité prend en charge à la fois les images et les vidéos pour les applications Apple (voir la documentation Apple pour connaître les limites de taille de fichier).

Pour pouvoir recevoir et gérer des images de notification dans une application Apple, vous devez ajouter une extension du 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 les APN, puis ajoutez l'API d'assistance d'extension FCM dans NotificationService.m . Plus précisément, au lieu de terminer le rappel avec self.contentHandler(self.bestAttemptContent); , complétez-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];

}
...

Construire la demande d'envoi

Dans votre demande 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 demande d’envoi suivant envoie un titre de notification commun à toutes les plateformes, mais il envoie également une image. Voici une approximation de l'effet visuel sur l'appareil d'un utilisateur :

Dessin simple d'une image dans une notification d'affichage

Noeud.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);
  });

REPOS

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 détails complets 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 demande d'envoi permet à l'extension de service sur le client récepteur de gérer l'image fournie dans la charge utile.