Push Notifications Tutorial for iOS: Rich Push Notifications

Learn how to modify and enhance push notifications before they are presented to the user, how to create custom UI around your push content, and more! By Mark Struzinski.

4.6 (14) · 1 Review

Download materials
Save for later
Share
You are currently viewing page 4 of 4 of this article. Click here to view the first page.

Implementing the Favorite Action

The UI has a button to add the notified podcast to the list of favorites. This is a perfect example of how to make a push notification actionable and cool.

Add the following method to handle the tap on the favorite button:

@IBAction func favoriteButtonTapped(_ sender: Any) {
  // 1
  guard let podcast = podcast else {
    return
  }

  // 2
  let favoriteSetting = podcast.isFavorite ? false : true
  podcast.isFavorite = favoriteSetting

  // 3
  let symbolName = favoriteSetting ? "star.fill" : "star"
  let image = UIImage(systemName: symbolName)
  favoriteButton.setBackgroundImage(image, for: .normal)

  // 4
  CoreDataManager.shared.saveContext()
}

To handle the favorite button tap, you are:

  1. Checking to make sure a podcast has been set.
  2. Toggling isFavorite on podcast.
  3. Updating the favorite button UI to match the model state.
  4. Updating the Core Data store with the changes.

This is enough to test your first set of changes to the content extension. Set the scheme back to Wendercast, then build and run, and put the app to the background. Next, send the following content from the Push Notifications Tester app:

{
  "aps": {
    "category": "new_podcast_available",
    "alert": {
      "title": "New Podcast Available",
      "subtitle": "Antonio Leiva – Clean Architecture",
      "body": "This episode we talk about Clean Architecture with Antonio Leiva."
    },
    "mutable-content": 1
  },
  "podcast-image": "https://koenig-media.raywenderlich.com/uploads/2016/11/Logo-250x250.png",
  "podcast-link": "https://www.raywenderlich.com/234898/antonio-leiva-s09-e13",
  "podcast-guest": "Antonio Leiva"
}

Once the notification comes in, pull down on it. You’ll see your updated custom interface:

Content extension UI

Tap the Favorite button, and you’ll see it change its state. If you open the Wendercast app to the same podcast, you’ll notice that the state of the favorite button matches that of the notification UI. Awesome!

Final content UI

Implementing the Play Action

Now you’ll implement a deep link into the app for the play action. Add the following method to NotificationViewController:

@IBAction func playButtonTapped(_ sender: Any) {
  extensionContext?.performNotificationDefaultAction()
}

This tells the notification extension to open the application and deliver everything as a standard push.

Next, look at the extension in Wendercast/App/SceneDelegate.swift. This code performs a lot of the same work you’ve been doing in the extensions:

  • Looks for the presence of a podcast link.
  • Attempts to fetch the podcast from the Core Data store.
  • Tells the PodcastFeedTableViewController to load the specified podcast.
  • Plays the specified podcast

Build and run. Send the app to the background, and push the same notification payload you sent last time. This time, tap the Play button. The app will deep link into the podcast detail and begin streaming the episode. You’ve done it!

Where to Go From Here?

Congratulations! You’ve taken a deep dive into rich push notifications. You learned how to:

  • Modify push content
  • Attach media
  • Create custom UIs
  • Navigate interaction between your extensions and their host app

To learn even more, you can study notification actions and how they apply to notification content extensions. With customizable UI and user interaction enabled, the possibilities are practically endless! To get started, check out the official documentation:

You can download the completed project files by clicking on the Download Materials button at the top or bottom of the tutorial.

If you have any comments or questions, please join the forums below!