Learn here how to display an image from an Adobe Campaign push notification on an iOS device.

Note:

This tutorial focuses on iOS only.

Step 1: Set up push notification

Push notification is supported by SDK V4 and Experience Platform SDKs.

The mobile applications receiving push notifications must be configured by an administrator in the Adobe Campaign interface.

By configuring both Adobe Campaign and Adobe Mobile Services, you will be able to use your mobile application's data for your campaigns. For more on this, refer to this page.

To send push notifications with an Experience Cloud SDK application, a mobile app has to be set up in Adobe Experience Platform Launch and be configured in Adobe Campaign. For more on this, refer to this page.

Step 2: Customize your push notification in Adobe Campaign

To fine-tune your push notification, Adobe Campaign allows you to access a set of advanced options while designing a push notification.

  1. Create a push notification. For more on this, refer to this page.

  2. From your push notification content page, access the Advanced options section.

  3. Enter the URL of your file in the Rich media content URL field.
    For iOS 10 or higher, you can insert image, gif, audio and video files. 

    push_notif_advanced_6
  4. Preview and save your push notification.

Step 3: Adapt the Mobile application code

After customizing your push notification in Adobe Campaign, you have to configure your mobile application to display the image on devices.

Note:

If your application is in Objective-C, refer to the following documentation.

If your app is in Swift, follow the steps below: 

  1. Open your xCode project.

  2. In your Xcode project, select File > New > Target.

  3. Select Notification Service Extension.

    image2019-1-11_16-32-10
  4. Verify that the NotificationService.swift file class is created.

  5. Edit this class and replace the default content with the following.
    This allows the application to handle the incoming parameter with the image URL, parse it, copy it locally and then display it from the the push notification.

    import UserNotifications
    
    class NotificationService: UNNotificationServiceExtension {
        
        var contentHandler: ((UNNotificationContent) -> Void)?
        var bestAttemptContent: UNMutableNotificationContent?
        
        override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
            self.contentHandler = contentHandler
            bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
    
            if let bestAttemptContent = bestAttemptContent {
                var urlString:String? = nil
                if let urlImageString = request.content.userInfo["media-attachment-url"] as? String {
                    urlString = urlImageString
                }
                
                if urlString != nil, let fileUrl = URL(string: urlString!) {
                    print("fileUrl: \(fileUrl)")
                    
                    // Download the attachment
                    URLSession.shared.downloadTask(with: fileUrl) { (location, response, error) in
                        if let location = location {
                            // Move temporary file to remove .tmp extension
                            if (error == nil) {
                                let tmpDirectory = NSTemporaryDirectory()
                                let tmpFile = "file://".appending(tmpDirectory).appending(fileUrl.lastPathComponent)
                                let tmpUrl = URL(string: tmpFile)!
                                try! FileManager.default.moveItem(at: location, to: tmpUrl)
                                
                                // Add the attachment to the notification content
                                if let attachment = try? UNNotificationAttachment(identifier: fileUrl.lastPathComponent, url: tmpUrl) {
                                    bestAttemptContent.attachments = [attachment]
                                    }
                            }
                            if(error != nil) {
                                print("Failed to download attachment: \(error.debugDescription)")
                            }
                        }
                        // Serve the notification content
                        contentHandler(bestAttemptContent)
                    }.resume()
                }
            }
        }
        
        override func 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.
            if let contentHandler = contentHandler, let bestAttemptContent = bestAttemptContent {
                contentHandler(bestAttemptContent)
            }
        }
        
    }
    
    dispay

The mobile should receive the following payload while notification is sent.
The image URL is mapped with key media-attachment-url. This is the key/value pair that you have to handle from the application code perspective to download and display the image.

userInfo: [AnyHashable("media-attachment-url"): https://pbs.twimg.com/profile_images/876737835314950144/zPTs9b7o.jpg, AnyHashable("_dId"): 1de3ef93, AnyHashable("_mId"): h280a5, AnyHashable("aps"): {

    alert =     {

        body = "Message Body here";

        title = "This a push from Campaign";

    };

    badge = 1;

    "mutable-content" = 1;

}]

Step 4: Test sending the push

You can now test building your application and the delivery you created in step 2 above. For more information on preparing and sending your push notification, refer to this page.

push_notif_advanced_34

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy