iOS rich push notifications with media attachments

Getting started

Make sure you have:

  • Xcode 8.0+
  • OS X El Capitan 10.11
  • Import UserNotifications.framework to your project.

Server Side

{
"aps": {
"alert": {
"body": "Push notification body",
"title": "Push notification title"
},
"mutable-content": 1,
category: "rich-apns"
},
"media-url": "https://i.imgur.com/t4WGJQx.jpg"
}

Client Side

Create a new target and add it to your project.

  • Download the image
  • Save the image
  • Add the disk path of the image to a UNNotificationAttachment

Setting up push notifications in your app

Before we get there though there are several things we have to do first. Initially, we have to register to receive push notifications in our app.

let center = UNUserNotificationCenter.current() center.requestAuthorization(options: [.alert, .sound]) { (granted, error) in  
/* were we authorised or not? */
}
application.registerForRemoteNotifications()
func application(_ application: UIApplication,                   didRegisterForRemoteNotificationsWithDeviceToken deviceToken:Data) {      
let deviceTokenString = deviceToken.reduce("", {$0 + String(format: "%02X", $1)})
print(deviceTokenString)
/* send the device token to your server */
}
func application(_ application: UIApplication,                   didFailToRegisterForRemoteNotificationsWithError error: Error) {          print("i am not available in simulator \(error)")  
}
UNUserNotificationCenter.current().getNotificationSettings() { (setttings) in              
switch setttings.soundSetting {
case .enabled:
print("enabled sound setting")

case .disabled:
print("setting has been disabled")

case .notSupported:
print("something vital went wrong here")
}
}

In your Notification extension

In the following code, we are locating the value for the key media-url. If it exists, we download the image from the URL which is the key’s value.

Adding a custom UI to your notification

Create a new target and add it to your project.

In your Notification extension

  • The Notification Content Extension uses a NotificationViewController, which is a subclass of UIViewController.
  • When you created the Content Extension, Xcode created the NotificationViewController.swift file, a MainInterface.storyboard and a plist file.
  • The UNNotificationExtensionCategory key value is the same as the category value set previously in the payload above. This tells iOS that the push notification you’re triggering is handled with a Content Extension.
  • In MainInterface.storyboard, create the UI that your push notifications will display, just like a regular UIViewController.
  • In NotificationViewController.swift, declare any IBOutlets and connect them to the Storyboard file.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dimitri James Tsiflitzis

Dimitri James Tsiflitzis

Developer, scrum enthusiast, @sequeapp building productivity apps; formerly @nimber, @peopleperhour, @taxibeat; game dev @sprimp and orgniser @cocoaheadsgr