how to display image in ios push notification?

Question

iOS 10 introduced push notification framework updates,

UserNotificationsUI.framework

As written on apple docs, it lets us customize the appearance of local and remote notifications when they appear on the user’s device.

So if anyone have idea how to display image in push notification when on lock screen. same like andorid push notification are doing.

Thanks,

Answer 1

If you want to customize the appearance of local and remote notifications， perform the following steps：

1. Create a UNNotificationCategory and add to the UNUserNotificationCenter category:

   let newCategory = UNNotificationCategory(identifier: "newCategory",
                                            actions: [ action ],
                                            minimalActions: [ action ],
                                            intentIdentifiers: [],
                                            options: [])
   
   let center = UNUserNotificationCenter.current()
   
   center.setNotificationCategories([newCategory])
   

2. Create a UNNotificationContentExtension:

then use code or storyboard to customize your UIViewController.

3. Add category to UNNotificationContentExtension's plist:

4.Push Notification

Local Notification

Create a UNMutableNotificationContent and set the categoryIdentifier to "newCategory" which includes UNUserNotificationCenter's categories and UNNotificationContentExtension's plist:

let content = UNMutableNotificationContent()
content.title = ...
content.body = ...
content.categoryIdentifier = "newCategory"

let request = UNNotificationRequest.init(identifier: "newNotificationRequest", content: content, trigger: nil)

let center = UNUserNotificationCenter.current()
center.add(request)

Remote Notification

Set "mutable-content : 1" and "category : newCategory". Note that the category value is set to "newCategory" which matches what you previously added to UNUserNotificationCenter and UNNotificationContentExtensions plist.

Example:

 {
    "aps" : {
        "alert" : {
        "title" : "title",
        "body" : "Your message Here"
        },
        "mutable-content" : "1",
        "category" : "newCategory"
    },
    "otherCustomURL" : "http://www.xxx.jpg"
 }

5. Note: you need a device or simulator which supports 3DTouch, otherwise you can't show a custom UNNotificationContentExtension viewcontroller.（In iOS10 Beta1, it`s not work. But now this work without 3d touch）

And ... if you just want to show an image on a push notification displayed on the lock screen, you need to add UNNotificationAttachment:

let content = UNMutableNotificationContent()
content.title = ...
content.body = ...
content.categoryIdentifier = "newCategory"

let fileURL: URL = ... //  your disk file url, support image, audio, movie

let attachement = try? UNNotificationAttachment(identifier: "attachment", url: fileURL, options: nil)
content.attachments = [attachement!]

let request = UNNotificationRequest.init(identifier: "newNotificationRequest", content: content, trigger: nil)

let center = UNUserNotificationCenter.current()
center.add(request)

For more detail feature,Demo

Answer 2

Actually if you are setting up a local notification and you're just interested in having an image show up in the notification itself, you don't have to bother with NotificationsUI.framework or UNNotificationContentExtensions at all. That is only useful if you want a custom UI when the user 3D touches or expands the notification.

To add an image that is already on the device (either shipped with the app, or generated/stored by the app at some point before the notification is created), then you only need to add a UNNotificationAttachment with a file URL where the path ends in .png (or .jpg will likely work too?). Something like this:

UNMutableNotificationContent *content = [UNMutableNotificationContent new];
content.title = @"Title";
content.body = @"Body";
content.sound = [UNNotificationSound defaultSound];
NSURL *imageURL = [NSURL URLWithString:@"file:/some/path/in/app/image.png"];
NSError *error;
UNNotificationAttachment *icon = [UNNotificationAttachment attachmentWithIdentifier:@"image" URL:imageURL options:nil error:&error];
if (error)
{
    NSLog(@"error while storing image attachment in notification: %@", error);
}
if (icon)
{
    content.attachments = @[icon];
}

Then when the notification appears, the image will show up on the right-hand side of the notification banner like it does for Messages notifications. And you don't have to jump through all of the hoops of setting up a content extension with a categoryIdentifier, etc.

EDIT: Updated to add that this is only a valid solution for local notifications.

Answer 3

You have to do some work on creating push notification and also when you are handling.

1. When you creating payload you need to add extra attribute attachment, something like below:

   {        
       aps : {
           alert: { },
           mutable-content:1
       }
       my-attachment = "url to resource"
   }
   

2. When you receive notification system will call didReceive method of service extension, override notification extension didReceive method like this

   public func didReceive(_ request:UNNotificationRequest, withContentHandler contentHandler:(UNNotificatinContent) -> Void) {
       let fileUrl = //
       let attachment = UNNotificationAttachment(identifier : "image", url: fileUrl, options: nil)
       let content = request.content.mutableCopy as! UNMutableNotificationContent
       content.attachment = [attachment]
       contentHandler(content)
   }
   

Here is WWDC video talk on this topic.

Answer 4

Implement your notification's custom view using a UIViewController that conforms to UNNotificationContentExtension.

See https://developer.apple.com/reference/usernotificationsui/unnotificationcontentextension