Send ImagePreview within firebase cloud messaging to iOS

Is there a way to to add a key for imageURL below that shows as image preview on the right side of a push notification or do i need to create a Notification Content Extension to make it work?

`const message = {
    apns: {
      payload: {
        aps: {
          'mutable-content': 1, 
          alert: {
            title: title,
            body: body,
            image: imageURL,
          },
        },
      },
      fcm_options: {
        image: imageURL, 
      },
    },
    data: {
      articleId: articleId,
      'media-url': imageURL, 
    },
    tokens: tokens,
  };`

I'm getting the image through, but just if the user long presses on the push notification and then it appears below, but i want it to look like in the screenshot:

Thanks

After more research the issue seems to be, how the image is handled within the NotificationService, which results in no thumbnail being shown.

Anybody knows what needs to be done differently here?

Please see below the Swift code for reference

import UserNotifications
import UIKit

class NotificationService: UNNotificationServiceExtension {
    
    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?
    
    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.contentHandler = contentHandler
        bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
        
        if let bestAttemptContent = bestAttemptContent {
            // Modify the notification content here...
            bestAttemptContent.title = "\(bestAttemptContent.title) [modified]"
            
            var urlString:String? = nil
            if let urlImageString = request.content.userInfo["image"] as? String {
                urlString = urlImageString
            }
            
            loadAttachment(for: urlString, withType: "jpg") { attachment in
                if let attachment = attachment {
                    // Set the attachment and the content handler only if the image is successfully loaded
                    bestAttemptContent.attachments = [attachment]
                }
                // Complete the notification modification process
                contentHandler(bestAttemptContent)
            }
         }
    }
    
    override func serviceExtensionTimeWillExpire() {
        // Called just before the extension will be terminated by the system.
        // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
        if let contentHandler = contentHandler, let bestAttemptContent = bestAttemptContent {
            contentHandler(bestAttemptContent)
        }
    }
}

extension NotificationService {
    func loadAttachment(for urlString: String?, withType type: String, completionHandler: @escaping (UNNotificationAttachment?) -> Void) {
        guard let urlString, let attachmentURL = URL(string: urlString) else {
            completionHandler(nil)
            return
        }
        
        let fileExt = "jpg"
        
        let session = URLSession(configuration: .default)
        session.downloadTask(with: attachmentURL) { (temporaryFileLocation, response, error) in
            if let error = error {
                print("Error while downloading image: \(error)")
                completionHandler(nil)
            } else if let temporaryFileLocation {
                let fileManager = FileManager.default
                let localURL = URL.documentsDirectory.appendingPathComponent("note_image", conformingTo: .jpeg).appendingPathExtension(fileExt)
                do {
                    try fileManager.moveItem(at: temporaryFileLocation, to: localURL)
                    print("File moved to \(localURL)")
                    
                    // Adding the type hint option along with the thumbnail hidden key
                    let attachment = try UNNotificationAttachment(
                        identifier: UUID().uuidString,
                        url: localURL,
                        options: [
                            UNNotificationAttachmentOptionsTypeHintKey: 

"public.jpeg", // Type hint for JPEG image
                            UNNotificationAttachmentOptionsThumbnailHiddenKey: NSNumber(booleanLiteral: false)
                        ]
                    )
                    
                    completionHandler(attachment)
                } catch {
                    print("Got an error while parsing attachment image: \(error)")
                    completionHandler(nil)
                }
            } else {
                completionHandler(nil)
            }
        }.resume()
    }
}

here is how it currently looks, when the user 3d presses on the push notification:

and here where I want to see the image as thumbnail as well:

found the solution, deployment targets of service extension and main need to be aligned. Service extension can't have a higher deployment target than main

Send ImagePreview within firebase cloud messaging to iOS
 
 
Q