알림 페이로드로 이미지 보내기

FCM HTTP v1 API 및 알림 작성기는 디스플레이 알림의 페이로드로 이미지 링크를 보내 전송 후 기기에 이미지를 다운로드할 수 있도록 지원합니다. 이 기능은 Apple 앱의 이미지와 동영상을 모두 지원합니다(파일 크기 제한은 Apple 문서 참조).

Apple 앱에서 알림 이미지를 수신하고 처리하려면 알림 서비스 확장 프로그램을 추가해야 합니다. 알림 서비스 확장 프로그램을 사용하면 앱에서 최종 사용자에게 알림이 표시되도록 FCM 페이로드로 전송되는 이미지를 처리할 수 있습니다.

알림 서비스 확장 프로그램 설정

서비스 확장 프로그램을 추가하려면 APN에서 알림 수정 및 표시에 필요한 설정 작업을 수행한 후 NotificationService.m에서 FCM 확장 프로그램 도우미 API를 추가하세요. 특히 self.contentHandler(self.bestAttemptContent);로 콜백을 완성하는 대신 다음과 같이 FIRMessaging extensionHelper를 포함해 완성해야 합니다.

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

}
...

보내기 요청 빌드

알림 보내기 요청에서 다음과 같이 ApnsConfig 옵션을 설정합니다.

  • fcm_options.image(이미지 URL 포함)
  • headers({ "mutable-content": 1})

다음 전송 요청 예시는 모든 플랫폼에 공통 알림 제목을 보내지만 이미지도 보냅니다. 다음은 사용자 기기에 표시되는 시각 효과의 근사치입니다.

디스플레이 알림 이미지의 간단한 그림

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

메시지 본문의 플랫폼별 블록에서 제공하는 키에 관한 자세한 내용은 HTTP v1 참조 문서를 확인하세요.

위와 같이 보내기 요청에 mutable-content를 설정하면 수신 클라이언트의 서비스 확장 프로그램이 페이로드로 전송된 이미지를 처리할 수 있습니다.