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

With the version of Netmera SDK 3.14.4, you don't need to add a bridging header file to use iOS 10 media push. You should only implement the following methods in your Notification Service Extension to receive rich media push. You can reach for both Swift and Objective-C.

Step 1

Remove the Objective-C Bridging Header file from the project and add: import NetmeraNotificationServiceExtension in the NotificationService.swift file.

target 'your_service_extension_target_name' do

 pod "Netmera/NotificationServiceExtension"

end

After adding the previous line to your Podfile, pod update is used.

Step 2

Make sure you have Xcode 8 or a higher version installed. If not, upgrade your Xcode installation to use iOS10 media push on your application. First you should create a new Notification Service Extension to your application. In order to do that, you should follow those steps:

• open Xcode and navigate to "File" -> "New" -> "Target"

• choose Notification Service Extension from the available options.

Step 3

A new class named "NotificationService" will be created, which should be extended from the "NetmeraNotificationServiceExtension" class. Your NotificationService class should look like the following,

class NotificationService : NetmeraNotificationServiceExtension {

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (_ contentToDeliver: UNNotificationContent) -> Void) {
        super.didReceive(request, withContentHandler: contentHandler)
    }

    override func serviceExtensionTimeWillExpire() {
        super.serviceExtensionTimeWillExpire()
    }

}

Link the "Netmera.framework" to the Notification Service Extension. To do this, add your Notification Service Extension as a target to your Podfile by including the following line:

pod "Netmera/NotificationServiceExtension"

Update your Podfile to install the necessary dependencies and perform the linking process.

And for more to send carousel, slider notification you can review here.

Answer 5

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

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