在通知酬載中傳送圖片

FCM HTTP v1 API 通知編輯器 支援在顯示畫面的酬載中傳送圖片連結 通知將圖片下載至裝置 這項功能支援 Apple 應用程式的圖片和影片 (如需檔案大小限制，請參閱 Apple 說明文件)。

如要在 Apple 應用程式中接收及處理通知圖片，您必須新增 通知服務擴充功能。 通知服務擴充功能可讓應用程式處理圖片 ，之後才向使用者顯示通知。

設定通知服務擴充功能

如要新增服務擴充功能，請先執行必要的設定工作， 修改及顯示通知 ，然後在 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
  • 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 參考說明文件 ，完整瞭解 Ad Exchange 平台中 訊息內文。

如設定 mutable-content 所示，這個傳送要求會啟用服務 延伸至接收用戶端上傳送的映像檔，以處理酬載中傳送的圖片。