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. La taille des images pour les notifications est limitée à 1 Mo et, par ailleurs, elles sont limitées par la prise en charge native des images Android.

Construire la demande d'envoi

Dans votre demande d'envoi de notification, définissez l'option AndroidConfig suivante :

  • notification.image contenant l'URL de l'image

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 notification définie comme indiqué, cette demande d'envoi permet au client destinataire de gérer l'image fournie dans la charge utile.