Invia un'immagine nel payload di notifica

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

Per poter ricevere e gestire le immagini delle notifiche 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 fornita nel payload FCM prima di visualizzare la notifica per l'utente finale.

Configurare l'estensione del servizio di notifica

Per aggiungere un'estensione del servizio, esegui le attività di configurazione richieste per modificare e presentare le notifiche in APN, quindi aggiungi l'API helper dell'estensione FCM in NotificationService.m. Nello specifico, invece di completare il callback 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];

}
...

Crea la richiesta di invio

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

  • fcm_options.image contenente l'URL dell'immagine. Apple richiede che l'URL dell'immagine includa un'estensione di file valida per identificare correttamente il tipo di risorsa.
  • 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&#39;immagine in una notifica display

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

Consulta la documentazione di riferimento di HTTP v1 per informazioni dettagliate 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 fornita nel payload.