Customize the appearance of App notifications

Customizing the Appearance of Notifications

Customize the look and feel of notifications for iOS apps using the Notifications Content Application extension.

The framework

  • UserNotificationsUI

directory

  • An overview of the
  • To learn more

An overview of the

When an iOS device receives a notification containing a reminder, the system displays the notification content in two phases. Initially, it displays a banner with a title, subtitle, and an abbreviation from two to four lines of body text from the notification. If the user presses the banner, iOS displays the full notification screen, including any actions related to the notification. The system provides an interface for thumbnail banners, but you can customize the full interface using the Notification Content Application extension.

The notification Content application extension manages the view controller that displays your custom notification interface. This view controller can supplement or replace the default system interface for your notifications. You can use your view controller to:

  • Customize the location of items, including the title, subtitle, and body of the reminder.

  • Replace interface elements with different fonts or styles.

  • Displays application-specific data (for example, data stored in a specific key for notifying valid content).

  • Includes custom images or branding.

The application extension must configure its view controller with existing data, such as the content of the notification and the files that exist in the application extension package. If you use application groups to share data between applications and extensions, you can also use any file in an application group. To ensure that notifications can be submitted in a timely manner, you need to lay out the view as early as possible. Do not perform any long-running tasks, such as trying to retrieve data over the network.

Note: The notification content attached to the app information only supports iOS apps. For information on how to customize the appearance of notifications in watchOS, see watchOS’s Application programming guide.

Add notification content application extensions to your own projects

Add a notification content application to your iOS app

  1. Select File > New > Target in Xcode.

  2. Select the Notification Content extension from the iOS App Extension.

  3. Click Next.

  4. A name.

  5. Click Finish.

Note: You can add multiple notification application extensions to your project at the same time, but each extension must support a unique set of notification categories. You can specify the category of application extensions in its info.plist file, as described in the notification types supported by the declaration.

Add the view to the view controller

Xcode provides a template that contains a storyboard and a view controller for you to configure. Build a custom notification interface by adding views to the view controller. For example, use label to display the title, subtitle, and body of a notification. You can also add ImageViews and views that display non-interactive content. You don’t have to provide any initial content for the view.

You can add interactive controls (such as buttons or switches) in iOS 12 and later. For more information, see Supporting Interactive Controls.

Important note: Never add other view controllers to your application extensions or storyboard files. Your application extension must contain only one view controller.

Configuring a View Controller

You can use the view controller’s didReceiveNotification: method to update its label and other views. The valid content of the notification contains the data needed to configure the view controller. You can also use data from other files in the application extension. Listing 1 shows a version of this method that retrieves the title and body from the notification content and assigns strings to two UILabel controls that are stored as output on the view controller.

Listing 1

Configure the notification interface at run time:

func didReceive(_ notification: UNNotification) { self.bodyText? .text = notification.request.content.body self.headlineText? .text = notification.request.content.title }Copy the code

If you receive a second notification while the view controller is already visible, the system calls the didReceiveNotification: method again with the new notification content.

Declare supported notification types

You need to specify the application extension of the notification content and provide the notification type for the interface. When it receives a notification, the system matches the notification’s category value (type) with the declared category of any notification content application extensions in your application. If a match is found, the system loads the appropriate application extension.

In notice contents applied extension of the Info. In the file, use your extension support to inform the category of the string to configure UNNotificationExtensionCategory keys. The category string is the identifier contained in the UNNotificationCategory object that you register with your iOS app. You can use these strings to distinguish between the types of notifications your application can receive. For example, you can include the string MEETING_INVITE in any notification specifying the receipt of a new meeting invitation. Identifier strings are case sensitive.

The info.plist file in Figure 2 shows the notification content application extensions for two different notification types. Because it supports two types, UNNotificationExtensionCategory key value is composed of an array, including string for GENERAL and PLANE_AVAILABLE. If any of these types of notifications are received, the system displays an extension from the notification content application.

Figure 2

Configure the info.plist file for the notification content application extension

Note UNNotificationExtensionClass key value is the default is a string, it allows you to notify the application content extension only support a notification type. To support multiple types, change the string type to an array of strings.

For local notice, please put the category string in UNMutableNotificationContent categoryIdentifier attributes of objects. For remote notifications, place the string in the JSON category key. For information about declaring notification types for applications, see Declaring Actionable Notification types.

Related Info. The keys in the file for more information, please refer to the UNNotificationContentExtension.

Hide the default notification screen

The system displays some default information in each notification, including information about the custom interface. The system always displays the application name and icon. A screen with a title, subtitle, and notification body is also displayed, but you can hide that part of the screen if you wish.

For example, if your custom interface displays the same information, you might hide the default notification interface. Figure 3 illustrates the layout of the notification interface with and without default content.

Figure 3

Layout of the notification interface

To delete the default content of the system, please add UNNotificationExtensionDefaultContentHidden key to the extension of the Info. The file, and the key value is set to true. About this button for more information, please see UNNotificationContentExtension.

Incorporate media into your interface

To support playback of audio or video from a custom notification interface, do the following:

  • In the View controller’s mediaPlayPauseButtonType property, return the desired button type.

  • In view controller mediaPlayPauseButtonFrame attributes, return to the required size of button.

  • In the mediaPlay method, start playing the media file.

  • In the mediaPause method, stop playing the media file.

The system draws media buttons for you and handles all user interactions. When the button is pressed, it calls mediaPlay and mediaPause so that you can start and stop the play.

To programmatically start or stop playing media files, call the mediaPlayingStarted and mediaPlayingPaused methods of the current NSExtensionContext object. Use the view controller’s extensionContext property to access the extensionContext.

Support for interactive controls

In iOS 12 and later, you can enable user interaction in custom notifications. You can add interactive controls, such as buttons and switches, to custom interfaces.

To enable user interaction:

  1. Open your notification content extension’s info.plist file.

  2. Add UNNotificationExtensionUserInteractionEnabled keys to your extended attributes. Give it a Boolean value and set it to YES.

Figure 4 shows the info.plist file with notification enabled.

Figure 4.

Enable user interaction in the info.plist file of the notification extension

To learn more

Notification content application extension

UNNotificationContentExtension: in order to pass on a local or remote notifications provide custom interface object.