Rich Push Notifications in iOS

Push notifications are used to present information to users using the app to inform them about something or redirect them to some specific section of the app when clicked in notification popup.

Push Notification popping out

Note: Be careful while triggering push notifications in your app and avoid unnecessary triggering because it may be irritating to your app users and may result in disabling push notification by user or even result in uninstall of your app by user.

What do you need to master this tutorial

• Xcode (latest if possible)
• Swift language knowledge
• Prior knowledge of Push Notification
• Apple Developer Program Membership (Paid)

Popcorn if possible so that this won’t be boring. Jokes apart, let’s continue.

Rich Push Notification

Full description Rich Push Notification Popup

The above push notification looks fascinating right? These types of push notifications can handle media content are called rich push notifications. Trending apps like Facebook, Instagram, Khalti, etc use this kind of notification to notify their users.

The key advantage of push notification with multimedia is that it grabs users attention to some extent. Also the notification will justify its message that it has or tends to convey.

The above push notification looks fascinating right? These types of push notifications can handle media content are called rich push notifications. Trending apps like Facebook, Instagram, Khalti, etc use this kind of notification to notify their users.

The key advantage of push notification with multimedia is that it grabs users attention to some extent. Also the notification will justify its message that it has or tends to convey.

Overview

iOS 10 has introduced the Rich Push Notification feature which allows you to add image, video, audio or gif attachments to your push notifications. You can also add a custom UI to your rich notification to make it more appealing.

Pre-requisites

Before setting up for your app to support rich notification, your app must first be able to support push notification. I won’t be going through those steps so please make your app able to handle normal push notifications, I will be waiting for you right here. So let’s do that and follow along with me. It won’t be that hard.

Creating a custom push notification with an image

We are going to pop out a notification with a custom image to make our app’s notification more appealing. To do this firstly we have to create a new Notification Service Extension which will modify the content of a remote notification before its delivered to the user. I am sure you have heard about Extensions if you have been programming in Swift even for some days and let me inform you before you get confused, here we are not using that type of extension. Don’t worry I will tell you what we are using here.

Adding a Notification Service Extension

A Notification Service Extension can be added right in Xcode by selecting File -> New -> Target and Select Notification Service Extension. If you didn’t find it you can search for it by typing its initials.

Adding a Notification Service Extension to your project

This will create a new Swift file containing a class which inherits UNNotificationServiceExtension. This is our entry point for catching a remote notification and modifying it according to our needs before it’s been displayed to the user.

Note: The extension will only be called if the following requirements are met:

• The payload of the remote notification includes the mutable-content key with value set to 1.
• User have permitted the app to pop push notification

Confused? Let us dig in about what we are talking

Breakpoint after clicking notification

Here I sent a push rich push notification and placed a debug point which is executed after clicking the notification. Now I will check the payload of the notification through userInfo of response, let me show you how to do it.

Printing notification payload in Xcode console

Here I printed the object in the console of my Xcode. This is the payload of the push notification I recently sent. In order for you to show a rich push notification, the payload must contain a mutable-content key with the value 1 like in the image shown above.

Also note that you cannot modify silent notifications or those that only play a sound or badge the app’s icon.

Adding an Image to Push Notification

To add an image as an attachment to a push notification we need to adjust the code of UNNotificationServiceExtension class. We will have to perform the following steps:

• Check if an image URL exists
• Download the image and save to disk
• Attach the image file URL to the notification
• Send back the modified notification

This class gets the image URL from the notification request and save it to the disk.

NotificationService class

The code will use the default notification content as a best attempt fallback, tries to fetch the attachment and returns the modified rich notification if it succeeds. The overridden didReceive method has a limited time to perform the task. If your method is not calling the completion black before the time runs out the overridden function serviceExtensionTimeWillExpire() method will be called with the best attempt content available by that time. If nothing is done, it will fall back to the original normal content notification.

Note: If your notification does not contain any image please check for the key in the notification payload with the image url and replace your key with the key “image_url” currently used in the code. This may solve your problem.