iOS 10 Push Notifications

Images, GIFs, Audio and Video

You can now send rich media in a push notification, including images, GIFs, audio, and video clips. Including media in your push notification can increase the open rate and drive more engagement to your app.

Expanded detail view with 3D Touch

Push notifications can include an expanded view upon 3D Touch that displays applets, such as a map or a calendar. The user no longer has to open an app to see important contextual information such as a car arriving on a map or the date of a calendar invite.

Notification Actions

Once a push notification is expanded, users can take immediate actions. With a messaging app, you could reply directly without opening the app. With an events app, you could accept a calendar invite within the notification. Notification Actions empower the developer to deliver a push notifications experience tailor made for their app.

How do I send rich notifications in iOS 10 using the Push Notifications API?

Before you continue reading, you should already have our Push Notifications API up and running and you should be receiving notifications on your iOS client. If you haven’t already, you should go ahead and do that here.

Adding media attachments to Push Notifications in iOS 10 is a huge update for developers, and it will transform the way that iOS users engage with applications.

OK, so first things first, you need to update your version of the PusherSwiftCocoaPod to version 3.0.0.

pod 'PusherSwift'

Go ahead and open your existing Xcode project. Assuming that the project isn’t currently written in Swift 3, which it probably isn’t, Xcode 8 will ask you to convert your code to Swift 3 code. You should do this, as we experienced issues trying to use legacy languages (as Apple call anything older than Swift 3!).

Better still, if you are just looking to play around with rich notifications in iOS 10, we’d recommend creating a new Xcode project from scratch, setting up our Push Notifications API in just a few minutes, and then continuing with this tutorial.

First, head to your application target. Choose Capabilities and ensure that ‘Push Notifications’ is enabled and that ‘Remote notifications’ is selected under Background Modes.

Swift 3 introduces some changes to the methods for registering your applications for remote notifications. The syntax is also a little different in places.

Head to AppDelegate.swift (where you should already be registering for remote notifications if you’re using an existing project).

Import UserNotifications and replace the code you are already using in didFinishLaunchingWithOptions with this code:

let center = UNUserNotificationCenter.current()
center.requestAuthorization(options: [.alert, .sound]) { (granted, error) in
// actions based on whether notifications were authorized or not
}
application.registerForRemoteNotifications()

You’ll also need to replace your code in didRegisterForRemoteNotificationsWithDeviceToken with:

pusher.nativePusher().register(deviceToken: deviceToken)
pusher.nativePusher().subscribe(interestName: "donuts")

Now, this is where all the really brand new shiny stuff begins! Choose File > New > Target and select Notification Service Extension.

self.contentHandler = contentHandler
        bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)

        // Get the custom data from the notification payload
        if let notificationData = request.content.userInfo["data"] as? [String: String] {
            // Grab the attachment
            if let urlString = notificationData["attachment-url"], let fileUrl = URL(string: urlString) {
                // Download the attachment
                URLSession.shared.downloadTask(with: fileUrl) { (location, response, error) in
                    if let location = location {
                        // Move temporary file to remove .tmp extension
                        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: "", url: tmpUrl) {
                            self.bestAttemptContent?.attachments = [attachment]
                        }
                    }
                    // Serve the notification content
                    self.contentHandler!(self.bestAttemptContent!)
                    }.resume()
            }
        }

The following example is using a Node JS server.

pusher.notify(['donuts'], {
  apns: {
    aps: { 
      alert: { 
        title: "Pusher's Native Push Notifications API", 
        subtitle: "Bringing you iOS 10 support!", 
        body: "Now add more content to your Push Notifications!"
        }, 
        "mutable-content": 1,
        category: "pusher"
      },
    data: {
      "attachment-url": "https://pusher.com/static_logos/320x320.png"
    } 
  },
  webhook_url: "https://example.com/endpoint",
  webhook_level: "INFO"
});