Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
API HTTP v1 của FCM và Trình soạn thông báo hỗ trợ việc gửi đường liên kết đến hình ảnh trong tải trọng của một 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 các ứng dụng của Apple (xem tài liệu của Apple để biết giới hạn về kích thước tệp).
Để có thể nhận và xử lý hình ảnh thông báo trong một ứng dụng Apple, bạn phải thêm Notification Service Extension (Tiện ích dịch vụ thông báo).
Tiện ích dịch vụ thông báo cho phép ứng dụng của bạn xử lý hình ảnh được gử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 dịch vụ thông báo
Để thêm một tiện ích 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à trình bày thông báo trong APNs, sau đó thêm API trợ giúp tiện ích FCM vào NotificationService.m.
Cụ thể, thay vì hoàn tất lệnh gọi lại bằng self.contentHandler(self.bestAttemptContent);, hãy hoàn tất lệnh gọi lại bằng FIRMessaging extensionHelper như minh hoạ:
@interfaceNotificationService()<NSURLSessionDelegate>
@property(nonatomic)void(^contentHandler)(UNNotificationContent*contentToDeliver);@property(nonatomic)UNMutableNotificationContent*bestAttemptContent;@end@implementationNotificationService-(void)didReceiveNotificationRequest:(UNNotificationRequest*)requestwithContentHandler:(void(^)(UNNotificationContent*_Nonnull))contentHandler{self.contentHandler=contentHandler;self.bestAttemptContent=[request.contentmutableCopy];// Modify the notification content here as you wishself.bestAttemptContent.title=[NSStringstringWithFormat:@"%@ [modified]",self.bestAttemptContent.title];// Call FIRMessaging extension helper API.[[FIRMessagingextensionHelper]populateNotificationContent:self.bestAttemptContentwithContentHandler:contentHandler];}...
Tạo yêu cầu gửi
Trong yêu cầu gửi thông báo, hãy đặt các lựa chọn ApnsConfig sau đây:
fcm_options.image chứa URL hình ảnh. Apple yêu cầu URL hình ảnh phải có đuôi tệp hợp lệ để xác định chính xác loại tài nguyên.
headers({ "mutable-content": 1})
Yêu cầu gửi ví dụ sau đây sẽ gửi một tiêu đề thông báo chung đến tất cả các nền tảng, nhưng cũng gửi một hình ảnh. Dưới đây là hình ảnh minh hoạ hiệu ứng hình ảnh trên thiết bị của người dùng:
Node.js
consttopicName='industry-tech';constmessage={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);});
Hãy xem tài liệu tham khảo HTTP phiên bản 1 để biết đầy đủ thông tin chi tiết về các khoá có trong các khối dành riêng cho nền tảng trong nội dung thư.
Khi mutable-content được đặt như minh hoạ, yêu cầu gửi này cho phép tiện ích 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.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-09-06 UTC."],[],[],null,["The FCM HTTP v1 API and the\n[Notifications composer](//console.firebase.google.com/project/_/notification)\nsupport sending image links in the payload of a display\nnotification, for image download to the device after delivery.\nThis functionality supports both images and videos for Apple apps\n(see Apple documentation for file size limits).\n| Keep in mind:\n|\n| - Images uploaded via the Notifications composer are limited to 300KB in size.\n| - Images stored or served from Cloud Storage are subject to standard [quota limits](https://firebase.google.com/pricing)\n\nTo be able to receive and handle notification images in an Apple app, you must add\na [Notification Service Extension](https://developer.apple.com/documentation/usernotifications/unnotificationserviceextension).\nThe notification service extension allows your app to handle the image\ndelivered in the FCM payload before displaying the notification to the end user.\n\nSet up the notification service extension\n\nTo add a service extension, perform the required setup tasks for\n[modifying and presenting notifications](https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/ModifyingNotifications.html)\nin APNs, and then add the FCM extension helper API in `NotificationService.m`.\nSpecifically, instead of completing the callback with\n`self.contentHandler(self.bestAttemptContent);`,\ncomplete it with `FIRMessaging extensionHelper` as shown: \n\n @interface NotificationService () \u003cNSURLSessionDelegate\u003e\n @property(nonatomic) void (^contentHandler)(UNNotificationContent *contentToDeliver);\n @property(nonatomic) UNMutableNotificationContent *bestAttemptContent;\n @end\n\n @implementation NotificationService\n\n - (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {\n self.contentHandler = contentHandler;\n self.bestAttemptContent = [request.content mutableCopy];\n\n // Modify the notification content here as you wish\n self.bestAttemptContent.title = [NSString stringWithFormat:@\"%@ [modified]\",\n self.bestAttemptContent.title];\n\n // Call FIRMessaging extension helper API.\n [[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent\n withContentHandler:contentHandler];\n\n }\n ...\n\nBuild the send request\n\nIn your notification send request, set the following [ApnsConfig](/docs/reference/fcm/rest/v1/projects.messages#ApnsConfig)\noptions:\n\n- `fcm_options.image` containing the image URL. Apple requires that the image URL includes a valid file extension to correctly identify the resource type.\n- `headers({ \"mutable-content\": 1})`\n\nThe following example send request sends a common notification title to all platforms, but it also sends an image. Here's an approximation of the\nvisual effect on a user's device:\n\nNode.js \n\n const topicName = 'industry-tech';\n\n const message = {\n notification: {\n title: 'Sparky says hello!'\n },\n android: {\n notification: {\n imageUrl: 'https://foo.bar.pizza-monster.png'\n }\n },\n apns: {\n payload: {\n aps: {\n 'mutable-content': 1\n }\n },\n fcm_options: {\n image: 'https://foo.bar.pizza-monster.png'\n }\n },\n webpush: {\n headers: {\n image: 'https://foo.bar.pizza-monster.png'\n }\n },\n topic: topicName,\n };\n\n getMessaging().send(message)\n .then((response) =\u003e {\n // Response is a message ID string.\n console.log('Successfully sent message:', response);\n })\n .catch((error) =\u003e {\n console.log('Error sending message:', error);\n });\n\nREST \n\n POST https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send HTTP/1.1\n\n Content-Type: application/json\n Authorization: Bearer ya29.ElqKBGN2Ri_Uz...HnS_uNreA\n {\n \"message\":{\n \"topic\":\"industry-tech\",\n \"notification\":{\n \"title\":\"Sparky says hello!\",\n },\n \"android\":{\n \"notification\":{\n \"image\":\"https://foo.bar/pizza-monster.png\"\n }\n },\n \"apns\":{\n \"payload\":{\n \"aps\":{\n \"mutable-content\":1\n }\n },\n \"fcm_options\": {\n \"image\":\"https://foo.bar/pizza-monster.png\"\n }\n },\n \"webpush\":{\n \"headers\":{\n \"image\":\"https://foo.bar/pizza-monster.png\"\n }\n }\n }\n }\n\nSee the\n[HTTP v1 reference documentation](https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages)\nfor complete detail on the keys available in platform-specific blocks in the\nmessage body.\n\nWith `mutable-content` set as shown, this send request enables the service\nextension on the receiving client to handle the image delivered in the payload."]]