iOS Rich Media Notifications

iOS 10 introduces the ability to send push notifications with images, gifs, and video. To enable this functionality, clients must create a Service Extension, a new type of extension that enables modification of a push payload before it is displayed.

Creating a service extension

To create a Notification Service Extension, navigate to File > New > Target and select Notification Service Extension.

Ensure that Embed In Application is set to embed the extension in your application.

Make sure that you set the deployment target to iOS 10 or higher depending on your specifics. By default, xCode sets deployment target to latest iOS which will silently fail to work on lower OS version. For example, if you set the Service Extension's deployment target to 11.0, and run the app on an iOS 10.3 and an iOS 11.0 device. The Service Extension will not work on the 10.3 device. But by setting the deployment target to 10.0 it will work on both.

Setting up the Service Extension 

A Notification Service Extension is its own binary that is bundled with your app. As such, it must be set up in the Apple Developer Portal with its own App ID and Provisioning Profile. Extensions are generally named with a suffix on the main application’s ID (e.g., com.xtremepush.test.testwatchnotificationservice). Details of supported file types and sizes for rich media in Apple's Docs here:

• https://developer.apple.com/reference/usernotifications/unnotificationattachment  

Finally be sure that notifications are enabled for you service extension. In Targets > Capabilities select your service extension and make sure Push Notifications are on.

Some examples of adding rich media below.

Adding a Picture 

This is the most common rich Media use case and as such has a dedicated media button on the iOS push content page for uploading a picture. iOS supports JPG, GIF and PNG formats up to 10 MB in size.

 If you want to add a picture via API you can use the "push_picture"  param in campaign methods. Details in API docs  here:

• https://support.xtremepush.com/hc/en-us/articles/205573152-Campaign-Methods#create

Simple example of a broadcast iOS push with a picture hosted on your CMS or elsewhere being loaded and sent via API below:

curl -X POST -d '{ "apptoken":"YOURAPPTOKEN", 
"text":"Just Testing My Service Extension", "ios": {"active":1}, 
"push_picture":"https://pathtoyourhostedimage.com/large/gold-coast-coffee30665.jpg", 
"send_type":0, "broadcast":1}' https://external-api.xtremepush.com/api/external/create/campaign

To display the picture on the app side you will need to handle it in your service extension, below you will see some sample screenshots:

You can use XPush SDK to handle image displaying for you. To do it, you will need to link SDK against your extension target first.

If you use cocoapods, you can do something similar to this:

Or, you can add framework manually be using drag and drop into the extension folder, or by adding the Extension to the frameworks 'Target Membership' in the right window, like in the following image.

The notification service code would look like: