在通知酬載中傳送圖片

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

如要在 Apple 應用程式中接收及處理通知圖片，您必須新增通知服務擴充功能。通知服務擴充功能可讓應用程式先處理 FCM 酬載中提交的圖片，然後再向使用者顯示通知。

設定通知服務擴充功能

如要新增服務擴充功能，請執行必要的設定工作，以便在 APN 中修改及呈現通知，然後在 NotificationService.m 中新增 FCM 擴充功能輔助 API。具體來說，請使用 FIRMessaging extensionHelper 完成回呼，而不是透過 self.contentHandler(self.bestAttemptContent); 完成回呼，如下所示：

@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 參考說明文件。

將 mutable-content 設為如上所示後，這項傳送要求會在接收用戶端上啟用服務擴充功能，處理酬載中傳送的圖片。