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. La taille des images pour les notifications est limitée à 1 Mo. En dehors de cette limite, elles sont limitées par la compatibilité avec les images native d'Android.

Créer la requête d'envoi

Dans votre requête d'envoi de notification, définissez l'option AndroidConfig suivante :

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

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'une image dans une notification d'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"
       }
     }
   }
 }

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 notification défini comme indiqué, cette requête d'envoi permet au client destinataire de gérer l'image transmise dans la charge utile.