how to display image in ios push notification?
If you want to customize the appearance of local and remote notifications, perform the following steps:
-
Create a
UNNotificationCategory
and add to theUNUserNotificationCenter
category:let newCategory = UNNotificationCategory(identifier: "newCategory", actions: [ action ], minimalActions: [ action ], intentIdentifiers: [], options: []) let center = UNUserNotificationCenter.current() center.setNotificationCategories([newCategory])
Create a UNNotificationContentExtension:
then use code or storyboard to customize your UIViewController
.
- 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 UNNotificationContentExtension
s plist.
Example:
{
"aps" : {
"alert" : {
"title" : "title",
"body" : "Your message Here"
},
"mutable-content" : "1",
"category" : "newCategory"
},
"otherCustomURL" : "http://www.xxx.jpg"
}
- 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
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.
You have to do some work on creating push notification and also when you are handling.
-
When you creating payload you need to add extra attribute attachment, something like below:
{ aps : { alert: { }, mutable-content:1 } my-attachment = "url to resource" }
-
When you receive notification system will call
didReceive
method of service extension, override notification extensiondidReceive
method like thispublic 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.