Custom Interactive Remote Push Notification in iOS

Tram Ho

Introduction

Since iOS 10, Apple has provided rich notification support for push notifications with new frameworks: UserNotifications and UserNotificationsUI .

Using these frameworks, we can customize push notification notifications with the following capabilities:

  • Customize type and content/UI of push notifications.
  • Provide the corresponding custom actions and responses for each type of notification.
  • Change the content of push notifications before showing them to the user.
  • Customize custom push notifications for specific time periods or geographic areas.

In addition to supporting rich notification, Apple has also added interactive custom UI push notifications in iOS 13. Previously, we could only customize actions that users could interact with just like the action-sheet format on iPhone UI. With the new interactive notification style, we can display a lot of UI types and interact on the push notification interface.

This is a really big change for push notifications. For example, we can provide text fieldm switches, sliders, steppers or any custom control we want, and we can customize the custom push notification preview easily.

In this article, we will build an interactive custom push notification UI to display a Youtube video preview with buttons that users can interact with. In addition, users can also rate videos and comments on a text field. Specifically, the tasks should be as follows:

  • Setup project and dependencies.
  • Require push notification permission, type and category.
  • Simulate test push notification.
  • Setup Notification Extension target infoplist.
  • Setup UI for notification content.
  • Received handle notifications and user interactions.

To be able to simulate push push notification test on the simulator, we need to download and install at least Xcode 11.4 or higher from the Apple developer website

Setup project and dependencies

To get started, create a new Xcode project with a unique bundle identifier. Then, go to the Signing & Capabilities tab of the project. Click button + Capabilities and select push notification. The goal is to enable the push notification feature in the project’s App ID.

Next, we create a new app extension target for the custom content notification UI. From the menu bar, click File > New > Target . Type notification in the text field filter and select Notification Content Extension . Name it and click finish.

Then, activate the newly created scheme in the alert dialog, then close the project.

Next, we will init Cocoapods for the project and declare the dependencies we need to use. Open a terminal, navigate to the current project folder and type the pod init command. Then open the newly created Pod file with the text editor and add the following dependencies:

  1. XCDYoutubeKit : A library that allows you to play Youtube videos using AVPlayer
  2. Cosmos : A library custom control that displays star ratings.

In the terminal, run the pod install command to install the above dependencies on the targets. Once done, open the .xcworkspace file with Xcode and build test Command + B to make sure everything works correctly.

Register push notification

Next, we need to register permission to enable push notifications in the app using the UNUserNotificationCenter class. Import the UserNotifications framework in AppDelegate and add the code in the method (_:didFinishLaunchingWithOptions:) .

  1. First, call the requestAuthorization method and pass the array of options. In this case we need alert , badge and sound .
  2. Second, init UNNotificationCategory and pass a unique category identifier string. Here, since we don’t need custom actions, we pass an empty action array.
  3. Finally, call the setNotificationCategories method and pass in the newly created custom notification category.

Simulate remote push notification for testing

Starting with Xcode 11.4, Apple has finally provided a new feature to enable push notification emulation locally. The method is very simple. We just need to create an apns json file containing the content payload. Also we need to add some other keys besides the aps key. It is the Simulator Target Bundle key with the value of App ID in need of push notification. The file is in json format but the file extension is .apns , for example:

As above, we have 2 videoId keys and description that aim to get the Youtube video URL and additional display information on the custom UI. To test push notification on simulator, run the app, accept notification permission. Then, hide the app to backgroun and drag and drop the newly created .apns file into the running simulator.

Setup Notification Extension target infoplist

We need to add the keys for the notification content extension in Info.plist. In dictionary NSExtension > NSExtensionAttributes , add the following keys and NSExtension > NSExtensionAttributes :

  1. UNNotificationExtensionDefaultContentHidden : This key determines when to hide the default title and body label of the push notification. In this example, we want to hide them, so let’s set it to YES .
  2. UNNotificationExtensionUserInteractionEnabled : This key determines whether or not to enable interactive UI on push notifications. Set it to YES .
  3. UNNotificationExtensionCategory : This key specifies the notification type category identifier registered in AppDelegate.
  4. UNNotificationExtensionInitialContentSizeRatio : Content size ratio default when UI preview is displayed for the first time, default value is 1 .

Setup UI for the notification content preview

The next task is to create the UI preview for the notification. Open the MainInterface.storyboard file in the target notification extension and customize the UI as you like.

Handle receive notification and UI interaction

Open the NotificationViewController.swift file, in this file will have the NotificationViewController class which is a sub class of UIViewController and conform to UNNotificationContentExtension . The didReceive(_:) method didReceive(_:) will be called when a push notification is received via payload. Code handle the view, setup property when receiving notifications and interactive as follows:

  1. Import all required frameworks such as: AVKit , UserNotifications , UserNotificationsUI , XCYoutubeKit , and Cosmos at the top of the file.
  2. Declare all IBOutlet properties for labels, buttons, views, and text views.
  3. Declare IBAction methods for buttons.
  4. Declare properties that save the status of isSubscibed and isFavorited with the observer property. In this case, the text and color of the buttons will change based on the above bool variables.
  5. Declaring constants stores the height value of the views.
  6. In the viewDidLoad method, set the initial view state for the buttons and the stack views. Review stack view and submit label will be hidden.
  7. In the didReceive(_:) method, we will get the content and set text for the video video title and label video description from the payload. Also get videoId and use XCDYouTubeClient to get the URL of Youtube video.
  8. After obtaining the URL, initialize AVPlayerViewController with the above URL and then display and play the video in Player View .
  9. When you tap the review button, displays the stack view review. When tap the submit button, hide the stack view review and display a message with label submit. For subscribe and favorite buttons, when taped, it changes the text and color of these buttons.

Build and run the project, drag and drop the prepared .apns file into the simulator to test push notification, we get the following result:

Conclusion

The above is just a simple example of custom interactive push notification UI. There are many possibilities and use cases that you can create and apply. Different from the monotonous and boring notification notification lines, custom interactive push notifications bring new user experiences, help increase interaction between users and your app.

Share the news now

Source : Viblo