Mengirim gambar dalam payload notifikasi

FCM HTTP v1 API dan Notifications Composer mendukung pengiriman link gambar dalam payload notifikasi tampilan, untuk mendownload gambar ke perangkat setelah pengiriman. Fungsi ini mendukung gambar dan video untuk aplikasi Apple (lihat dokumentasi Apple untuk mengetahui batas ukuran file).

Agar dapat menerima dan menangani gambar notifikasi di aplikasi Apple, Anda harus menambahkan Ekstensi Layanan Notifikasi. Dengan ekstensi layanan notifikasi, aplikasi Anda dapat menangani gambar yang dikirim dalam payload FCM sebelum menampilkan notifikasi kepada pengguna akhir.

Menyiapkan ekstensi layanan notifikasi

Untuk menambahkan ekstensi layanan, lakukan tugas penyiapan yang diperlukan untuk mengubah dan menayangkan notifikasi di APNs, lalu tambahkan API pembantu ekstensi FCM di NotificationService.m. Secara khusus, alih-alih menyelesaikan callback dengan self.contentHandler(self.bestAttemptContent);, selesaikan dengan FIRMessaging extensionHelper seperti yang ditunjukkan:

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

}
...

Mem-build permintaan kirim

Dalam permintaan kirim notifikasi, tetapkan opsi ApnsConfig berikut:

  • fcm_options.image yang berisi URL gambar. Apple mewajibkan URL gambar menyertakan ekstensi file yang valid untuk mengidentifikasi jenis resource dengan benar.
  • headers({ "mutable-content": 1})

Contoh permintaan kirim berikut tidak hanya mengirimkan judul notifikasi yang sama ke semua platform, tetapi juga mengirimkan gambar. Berikut adalah perkiraan efek visual pada perangkat pengguna:

Ilustrasi sederhana dari gambar dalam notifikasi tampilan

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

Baca dokumentasi referensi HTTP v1 untuk mengetahui detail lengkap tentang kunci yang tersedia di blok khusus platform dalam isi pesan.

Dengan mutable-content ditetapkan seperti yang ditunjukkan, permintaan kirim ini memungkinkan ekstensi layanan pada klien penerima untuk menangani gambar yang dikirim dalam payload.