iOS 10 Rich 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.

Adding a Service Extension

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

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. Typically extensions are named with a suffix on the main application’s ID (e.g., com.appboy.stopwatch.stopwatchnotificationservice).

Configuring The Service Extension To Work With Braze

Braze sends down an attachment payload in the APNS payload under the ab key that we use to configure, download and display rich content:

For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "ab" :
    {
    ...

    "att" :
      {
       "url" : "http://mysite.com/myimage.jpg",
       "type" : "jpg"
       }
    },
  "aps" :
    {
    ...
    }
}

The relevant payload values are:

1
2
3
4
5
6
7
8
9
10
11
// The Braze dictionary key
static NSString *const AppboyAPNSDictionaryKey = @"ab";

// The attachment dictionary
static NSString *const AppboyAPNSDictionaryAttachmentKey = @"att";

// The attachment URL
static NSString *const AppboyAPNSDictionaryAttachmentURLKey = @"url";

// The type of the attachment - a suffix for the file you save
static NSString *const AppboyAPNSDictionaryAttachmentTypeKey = @"type";

To manually display push with a Braze payload, download the content from the value under AppboyAPNSDictionaryAttachmentURLKey, save it as a file with the file type stored under the AppboyAPNSDictionaryAttachmentTypeKey key, and add it to the notification attachments. We provide sample code that you can copy into your Notification Service Extension. Simply changing the class name to the one you picked will automatically provide this functionality.

You can write the Service Extension in either Objective-C or Swift. If you don’t wish to modify our default behavior, we’d recommend using our provided sample code, which is written in Objective-C. If you want to use Swift in your Service Extension, you should create a separate file with methods for our sample code, then create a bridging header file to call those methods.

For our sample code, see the Stopwatch sample application. For Swift sample code, see the Hello Swift sample application.

Creating A Rich Notification In Your Dashboard

To create a rich notification in your Braze dashboard, simple create an iOS push and attach an image or gif, or provide a url that hosts an image, gif, or video. Note that assets are downloaded on the receipt of push notifications, so that if you are hosting your own content you should plan for large, synchronous spikes in requests.

Also note the supported file types and sizes, listed here.

WAS THIS PAGE HELPFUL?
New Stuff!