Gửi hình ảnh trong phần tải thông báo

API FCM HTTP v1 và Trình soạn thảo thông báo hỗ trợ gửi liên kết hình ảnh trong tải trọng của thông báo hiển thị để tải hình ảnh xuống thiết bị sau khi gửi. Chức năng này hỗ trợ cả hình ảnh và video cho ứng dụng Apple (xem tài liệu của Apple để biết giới hạn kích thước tệp).

Để có thể nhận và xử lý hình ảnh thông báo trong ứng dụng Apple, bạn phải thêm Tiện ích mở rộng dịch vụ thông báo . Tiện ích mở rộng dịch vụ thông báo cho phép ứng dụng của bạn xử lý hình ảnh được phân phối trong tải trọng FCM trước khi hiển thị thông báo cho người dùng cuối.

Thiết lập tiện ích mở rộng dịch vụ thông báo

Để thêm tiện ích mở rộng dịch vụ, hãy thực hiện các tác vụ thiết lập bắt buộc để sửa đổi và hiển thị thông báo trong APN, sau đó thêm API trợ giúp tiện ích mở rộng FCM trong NotificationService.m . Cụ thể, thay vì hoàn thành lệnh gọi lại bằng self.contentHandler(self.bestAttemptContent); , hãy hoàn thành nó với FIRMessaging extensionHelper như được hiển thị:

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

}
...

Xây dựng yêu cầu gửi

Trong yêu cầu gửi thông báo của bạn, hãy đặt các tùy chọn ApnsConfig sau:

  • fcm_options.image chứa URL hình ảnh
  • headers({ "mutable-content": 1})

Yêu cầu gửi ví dụ sau sẽ gửi tiêu đề thông báo chung tới tất cả các nền tảng, nhưng nó cũng gửi một hình ảnh. Dưới đây là hiệu ứng hình ảnh gần đúng trên thiết bị của người dùng:

Vẽ hình ảnh đơn giản trong thông báo hiển thị

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

NGHỈ NGƠI

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

Xem tài liệu tham khảo HTTP v1 để biết chi tiết đầy đủ về các khóa có sẵn trong các khối dành riêng cho nền tảng trong nội dung thư.

Với mutable-content được đặt như được hiển thị, yêu cầu gửi này cho phép tiện ích mở rộng dịch vụ trên máy khách nhận xử lý hình ảnh được phân phối trong tải trọng.