Invia un'immagine nel payload di notifica

L'API HTTP v1 di FCM e il compositore di notifiche supportano l'invio di collegamenti di immagini nel payload di una notifica di visualizzazione, per il download di immagini sul dispositivo dopo la consegna. Questa funzionalità supporta sia immagini che video per le app Apple (consulta la documentazione Apple per i limiti delle dimensioni dei file).

Per poter ricevere e gestire le immagini di notifica in un'app Apple, devi aggiungere un'estensione del servizio di notifica . L'estensione del servizio di notifica consente alla tua app di gestire l'immagine consegnata nel payload FCM prima di visualizzare la notifica all'utente finale.

Configura l'estensione del servizio di notifica

Per aggiungere un'estensione del servizio, esegui le attività di configurazione richieste per la modifica e la presentazione delle notifiche negli APN, quindi aggiungi l'API helper dell'estensione FCM in NotificationService.m . Nello specifico, invece di completare la richiamata con self.contentHandler(self.bestAttemptContent); , completalo con FIRMessaging extensionHelper come mostrato:

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

}
...

Costruisci la richiesta di invio

Nella richiesta di invio della notifica, imposta le seguenti opzioni ApnsConfig :

fcm_options.image contenente l'URL dell'immagine
headers({ "mutable-content": 1})

La seguente richiesta di invio di esempio invia un titolo di notifica comune a tutte le piattaforme, ma invia anche un'immagine. Ecco un'approssimazione dell'effetto visivo sul dispositivo di un utente:

Semplice disegno di un'immagine in una notifica visualizzata

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

RIPOSO

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

Consulta la documentazione di riferimento HTTP v1 per dettagli completi sulle chiavi disponibili nei blocchi specifici della piattaforma nel corpo del messaggio.

Con mutable-content impostato come mostrato, questa richiesta di invio consente all'estensione del servizio sul client ricevente di gestire l'immagine consegnata nel payload.