UserNotification Example III – Notification Extention

6 minutes, 12 seconds

This example share a lot of common from UserNotification Example I, it will use time trigger because it’s the simplest way to test notification. Besides, we will use delegate to make the notification appeared inside in-app.

1. Ask Permission and Set Delegate


// Put at header
import UserNotifications

// Inside viewDidLoad()
UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .sound, .badge])
{ (granted, error) in
  // Enable or disable features based on authorization.
}

let current = UNUserNotificationCenter.current()
current.delegate = self

// add to class declaration
UNUserNotificationCenterDelegate

// MARK:- UNUserNotificationCenterDelegate
func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
  // To show the banner in-app
  completionHandler([.badge, .alert, .sound])
}

2. Action Outlet

We make a action outlet from a button.

We create a simple content of notification, and set the notification get triggered after 5 seconds.


@IBAction func setNotif(_ sender: Any) {
  
  let content = UNMutableNotificationContent()
  content.title = "Title"
  content.subtitle = "Subtitle"
  content.body = "This is an example of body text, this should be a sentence long."
  content.sound = UNNotificationSound.default()
  content.badge = (UIApplication.shared.applicationIconBadgeNumber + 1) as NSNumber; // Always Increment!
  content.categoryIdentifier = "notification-category" // For Actionable notification
  
  let trigger = UNTimeIntervalNotificationTrigger.init(timeInterval:5, repeats: false)
  
  // Schedule the notification
  let request = UNNotificationRequest.init(identifier: "id-123", content: content, trigger: trigger)
  let center = UNUserNotificationCenter.current()
  center.add(request)
  
}

You may test it, and it may look like this.

Notif

Adding the Notification Content Extension

1. Generate Notification Extension Target

Go to File > New > Target, choose ‘Notification Content Extention’ from iOS panel at Application Extension section.

Named it as ‘Notification Extension’. Leave everything else for default.

We will get a folder with content like this.

Screen Shot 2016-11-02 at 1.38.45 PM.png

We have a NotificationViewController.swift, a storyboard and Info.plist.

2. Edit Info.plist

And to make sure that the Notification Content Extension get showed is at the Info.plist, make sure your notification’s category is the same with the want that we will declared in Info.plist.

infoplist.png

Open the Info.plist file, find the UNNotificationExtensionCategory, inside NSExtentionAttributes, burried inside NSExtension. Name it as “notification-category”.

Also, when you have the notification extension, you may end up using the same attibutes like title, subtitle, and body. Why not hide the default view which showing event we have the notification extension. To hide it add this key “UNNotificationExtensionDefaultContentHidden” and set the value as “YES“, inside NSExtensionAttributes’s dictionary.

We also want to make the initial content show up not too big, so we can set this key “UNNotificationExtensionInitialContentSizeRatio” to “0.3” because we will have smaller content footprint.

3. Storyboard

Screen Shot 2016-11-02 at 1.52.27 PM.png

Simple editing to the default storyboard, create 3 labels and put in into stacked. Pin the stack view around the superview. Learn some tips on Auto Layout.

Set the stack view’s distribution as ‘Fill Proportionally’.

4. NotificationViewController

We need to properly link the labels to the view controller as IBOutlet like so.


@IBOutlet weak var lbl_title: UILabel!
@IBOutlet weak var lbl_subtitle: UILabel!
@IBOutlet weak var lbl_body: UILabel!

Then there is template method that is being called when the notification is out. We just need to edit inside the method.


func didReceive(_ notification: UNNotification) {

  self.lbl_title?.text = notification.request.content.title
  self.lbl_subtitle?.text = notification.request.content.subtitle
  self.lbl_body?.text = notification.request.content.body
  
}

Open the Info.plist file, find the UNNotificationExtensionCategory, inside NSExtentionAttributes, burried inside NSExtension. Name it as “notification-category”.

Also, when you have the notification extension, you may end up using the same attibutes like title, subtitle, and body. Why not hide the default view which showing event we have the notification extension. To hide it add this key “UNNotificationExtensionDefaultContentHidden” and set the value as “YES“, inside NSExtensionAttributes’s dictionary.

We also want to make the initial content show up not too big, so we can set this key “UNNotificationExtensionInitialContentSizeRatio” to “0.3” because we will have smaller content footprint.

3. Storyboard

Screen Shot 2016-11-02 at 1.52.27 PM.png

Simple editing to the default storyboard, create 3 labels and put in into stacked. Pin the stack view around the superview. Learn some tips on Auto Layout.

Set the stack view’s distribution as ‘Fill Proportionally’.

4. NotificationViewController

We need to properly link the labels to the view controller as IBOutlet like so.


@IBOutlet weak var lbl_title: UILabel!
@IBOutlet weak var lbl_subtitle: UILabel!
@IBOutlet weak var lbl_body: UILabel!

Then there is template method that is being called when the notification is out. We just need to edit inside the method.


func didReceive(_ notification: UNNotification) {

  self.lbl_title?.text = notification.request.content.title
  self.lbl_subtitle?.text = notification.request.content.subtitle
  self.lbl_body?.text = notification.request.content.body
  
}

Here you have it, this will appear when you pull down the notification.

notfi extension.png