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