iOS Rich Push Message

This feature is supported in React Native SDK version 3.26.0 and above.

To display push messages with images in an iOS app, add a Notification Service Extension and complete the configuration below.

For details on iOS Rich Push Notifications, refer to Rich Push Notification.

Add Notification Service Extension to Your App

Open your project by opening the /ios/{APP_NAME}.xcworkspace file with Xcode, then select File > New > Target... at the top of the project and choose Notification Service Extension as shown below.

Enter an appropriate name and click Finish.

You need to add the Hackle dependency to the Extension you added earlier in your Podfile.

Add the Hackle dependency as follows.

target 'NotificationServiceExtension' do
  pod 'Hackle'
end

Configure Minimum Deployment

If the minimum supported version differs between the app and the extension, images may not be displayed depending on the app version.

e.g.) If the app's minimum supported version is iOS 15 and the extension's minimum supported version is iOS 18:

iOS 15 and above, below iOS 18: images are not displayed.
iOS 18 and above: images are displayed.

The Notification Service Extension requires a separate minimum supported version specification from the app.

It is recommended to set Minimum Deployment to the same version as the app.

Integrate with the Hackle SDK

Add Image to Push Message

Add the handleRichNotification function in the didReceive function to handle push images.

import UserNotifications
import Hackle

class NotificationService: UNNotificationServiceExtension {

    var defaultNotificationContent: UNNotificationContent?
    var contentHandler: ((UNNotificationContent) -> Void)?

    override func didReceive(
      _ request: UNNotificationRequest,
      withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void
    ) {
        self.defaultNotificationContent = request.content
        self.contentHandler = contentHandler

        if Hackle.handleRichNotification(request: request, contentHandler: contentHandler) {
            return
        }

        contentHandler(request.content)
    }

    override func serviceExtensionTimeWillExpire() {
      if let contentHandler = contentHandler,
         let defaultNotificationContent = defaultNotificationContent {
            contentHandler(defaultNotificationContent)
        }
    }
}

#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 *))contentHandler {
    self.defaultNotificationContent = request.content;
    self.contentHandler = contentHandler;

    if ([Hackle handleRichNotificationWithRequest:request contentHandler:contentHandler]) {
        return;
    }
    contentHandler(request.content);
}

- (void)serviceExtensionTimeWillExpire {
    self.contentHandler(self.bestAttemptContent);
}
@end

PreviousiOS Push Message Integration NextIn-App Message Event Listener

Last updated 1 month ago