在通知载荷中发送图片

FCM HTTP v1 API 和 Notifications Composer 支持在显示通知 (display notification) 的载荷中发送图片链接，以便在传送后将图片下载到设备。对于 Apple 平台的应用，此功能支持图片和视频（请参阅 Apple 文档了解文件大小限制）。

如需在 Apple 应用中接收和处理通知图片，您必须添加通知服务扩展程序。 使用通知服务扩展程序，您的应用可以在向最终用户显示通知之前处理 FCM 载荷中传送的图片。

设置通知服务扩展程序

如需添加服务扩展程序，请执行修改和显示 APNs 中的通知所需的设置任务，然后在 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。Apple 要求图片网址包含有效的文件扩展名，以确保能够正确识别资源类型。
  • 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 后，此发送请求即可使接收客户端上的服务扩展程序能够处理载荷中传送的图片。