Display image in notification bar with remote notification(Rich media push notification) in iOS 10

Question

I have integrated APNS and want to display image in remote notification like below;

I have used below code with reference link;

AppDelegate.h

#import <UserNotifications/UserNotifications.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate,UNUserNotificationCenterDelegate>

AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
     [self registerForRemoteNotification];
     UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
     UIViewController *vc1 = [storyboard instantiateViewControllerWithIdentifier:@"mainscreen"];
     self.window.rootViewController = vc1;
     return YES;
}

- (void)registerForRemoteNotification 
{
        if(SYSTEM_VERSION_GRATERTHAN_OR_EQUALTO(@"10.0")) {
            UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
            center.delegate = self;
            [center requestAuthorizationWithOptions:(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge) completionHandler:^(BOOL granted, NSError * _Nullable error){

                 [[UIApplication sharedApplication] registerForRemoteNotifications];
            }];
        }
        else {
            [[UIApplication sharedApplication] registerUserNotificationSettings:[UIUserNotificationSettings settingsForTypes:(UIUserNotificationTypeSound | UIUserNotificationTypeAlert | UIUserNotificationTypeBadge) categories:nil]];
            [[UIApplication sharedApplication] registerForRemoteNotifications];
        }
}

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken{

            DeviceToken = [[NSString alloc]initWithFormat:@"%@",[[[deviceToken description] stringByTrimmingCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@"<>"]] stringByReplacingOccurrencesOfString:@" " withString:@""]];
            NSLog(@"Device Token = %@",DeviceToken);
    }

Then, I have created new target with UNNotificationServiceExtension and created new bundle id "com.RichPush.app.Service-Extension" , I have also created new certificate and provision profile with above bundle for UNNotificationServiceExtension.

NotificationService.h

#import <UserNotifications/UserNotifications.h>
@interface NotificationService : UNNotificationServiceExtension
@end

NotificationService.m

#import "NotificationService.h"

@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];

    // Modify the notification content here...
    //self.bestAttemptContent.body = [NSString stringWithFormat:@"%@ [modified]", self.bestAttemptContent.body];

    // check for media attachment, example here uses custom payload keys mediaUrl and mediaType
    NSDictionary *userInfo = request.content.userInfo;
    if (userInfo == nil) {
        [self contentComplete];
        return;
    }

    NSString *mediaUrl = userInfo[@"mediaUrl"];
    NSString *mediaType = userInfo[@"mediaType"];

    if (mediaUrl == nil || mediaType == nil) {
        [self contentComplete];
        return;
    }

    // load the attachment
    [self loadAttachmentForUrlString:mediaUrl
                            withType:mediaType
                   completionHandler:^(UNNotificationAttachment *attachment) {
                       if (attachment) {
                           self.bestAttemptContent.attachments = [NSArray arrayWithObject:attachment];
                       }
                       [self contentComplete];
                   }];

}

- (void)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.
    [self contentComplete];
}

- (void)contentComplete {
    self.contentHandler(self.bestAttemptContent);
}

- (NSString *)fileExtensionForMediaType:(NSString *)type {
    NSString *ext = type;

    if ([type isEqualToString:@"image"]) {
        ext = @"jpg";
    }
   return [@"." stringByAppendingString:ext];
}

- (void)loadAttachmentForUrlString:(NSString *)urlString withType:(NSString *)type completionHandler:(void(^)(UNNotificationAttachment *))completionHandler  {

    __block UNNotificationAttachment *attachment = nil;
    NSURL *attachmentURL = [NSURL URLWithString:urlString];
    NSString *fileExt = [self fileExtensionForMediaType:type];

    NSURLSession *session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]];
    [[session downloadTaskWithURL:attachmentURL
                completionHandler:^(NSURL *temporaryFileLocation, NSURLResponse *response, NSError *error) {
                    if (error != nil) {
                        NSLog(@"%@", error.localizedDescription);
                    } else {
                        NSFileManager *fileManager = [NSFileManager defaultManager];
                        NSURL *localURL = [NSURL fileURLWithPath:[temporaryFileLocation.path stringByAppendingString:fileExt]];
                        [fileManager moveItemAtURL:temporaryFileLocation toURL:localURL error:&error];

                        NSError *attachmentError = nil;
                        attachment = [UNNotificationAttachment attachmentWithIdentifier:@"" URL:localURL options:nil error:&attachmentError];
                        if (attachmentError) {
                        NSLog(@"%@", attachmentError.localizedDescription);
                        }
                    }
                    completionHandler(attachment);
                }] resume];
}
@end

I used below plist for service extension:

My Playload is;

    {
    "aps": {
        "alert": {
            "title": "title",
            "body": "Your message Here",
            "mutable-content": "1",
            "category": "myNotificationCategory"
        }
    },
    "mediaUrl": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/FloorGoban.JPG/1024px-FloorGoban.jpg",
    "mediaType": "image"
 }

Please let me know where I am wrong.

Thanks in Advance.

Gamete

Answer 1

You need to put the "mutable-content": "1", flag outside the "alert"-object in your payload.

Gogetter

Answer 2

You have a mistake here:

Then, I have created new target with UNNotificationServiceExtension and created new bundle id "com.RichPush.app.Service-Extension" , I have also created new certificate and provision profile with above bundle for UNNotificationServiceExtension.

use UNNotificationContentExtension instead of UNNotificationServiceExtension

after create new target, xcode will create swift (obj- c) file and storyboard interface

I have a simple example on swift code, which load image and show on large push notification view

class NotificationViewController: UIViewController, UNNotificationContentExtension {


//image provided from storyboard
@IBOutlet weak var image: UIImageView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any required interface initialization here.
}

func didReceive(_ notification: UNNotification) {
    let userInfo = notification.request.content.userInfo
    // get image url 
   // and load image here  
} 
}

From Apple doc:

UNNotificationServiceExtension Modifies the content of remote notifications before they are delivered to the user.

and

UNNotificationContentExtension Presents a custom interface for a delivered local or remote notification.

Collywobbles

You don't need UNNotificationContentExtension if you just want to show an image in notification. UNNotificationContentExtension is used to provide custom interface for Notification (not the preview though). – Christenechristening

Answer 3

Your notification payload should be like this:

   aps =     {
        alert =         {
            body = Testing;
            title = Dining;
        };
        badge = 1;
        "content-available" = 1;
        "mutable-content" = 1;
        sound = "Bleep-Sound.wav";
    };

}

Content-available and mutable-content should be outside the alert and also you should add the badge count too....

Iridium