Customizing iOS notifications your way

Push notifications allow developers to reach users, even when users aren’t actively using an app! With the latest update of iOS Apple provide very useful extensions which are user-friendly.

In this tutorial, I am going to share the configuration, set up and testing of Notification with the media attachments like

• Image
• Audio
• Video

Let’s start..!!!

The very First configuration that we need is to set up the Xcode project and enable the Push notification from the capabilities like the below screenshot

Set up the project bundle id like com.customNotification
Once you are done with the capabilities set up and bundle id set up let’s configure the Developer account and FireBase console.

SET UP FIREBASE CONSOLE

Follow the setup process of firebase configuration.

1. Go to the console and create an iOS project and it will ask you for some basic details like bundle id, App Name and etc..!!!

2. once you set up the console it will allow you to download the GoogleService-Info.PList file. see screenshot

3. Drag and drop the GoogleService-Info.PList file and add it into the project root path.

4. Once the setup has been done go to the project setting where you can set up the cloud messaging by adding the p12 certificate of the project under the Cloud Messaging in APNs Certificates section

So here you are done with the Firebase setup.!!!!! 😊😊

Let’s move forward to Setting up the developer console for Application ID, Certificate, and Profile.

1. See the below screenshot and Create an AppId for the project like com. customnotification

2. Once you create an AppID need to generate the Certificate one is for notification and one is for development. Select the option like below

Select the option for creating a development certificate

this will help in both development and production notification

3. Once you select either of the options it will ask for the CSR certificate which you have to generate from your system. For that follow the below steps
Open Keychain Access→ goes to the Keychain Access menu on the top → select certificate assistant → select request certificate from a certificate authority. Which will open the pop-up in which add your email address and select the save to disk option and complete the process.
This process will create CSR which you have to use while creating the certificates

4. Once you create a certificate go to the profile section and select which environment profile do you want either development, AppStore, or AdHoc Now it’s time to set the code inside the AppDelegate file

Project SetUp

Drag and Drop the file UIApplication+CustomNotification or add the folder MIAppDelegateExtension from the project folder and add it to your project. The link for the demo project is attached below on this page.

Modify the AppDelagate

import Firebase

Configure FirebaseApp.configure() and call NotificationConfiguration(application) Method in didFinishLaunchingWithOptions.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
   FirebaseApp.configure()
   NotificationConfiguration(application)
   return true
}

So, Now here we did with the SetUp for the Notification. Now, Run the project and test the notification and you can see the notification with the title and subTitle like below.

Here we got the text message Notification

Now, Let’s begin with the setup of the Notification Service Extension…!!!

In Xcode

Go to the project navigator

It will lead you to the next pop-up with the available application extension of iOS like below, from which select and add the Notification Service Extension.

Adding Extension will add another folder to the application path with the NotificationService.swift file and Info.PList file.

Now What next? Where to go from here..???🤔🤔🤔

The First and foremost thing which we require is to set up the bundle ID which is most important while setting up the notification service extension.

Make sure that the Bundle ID of the Notification service is prefixed with the main project like as you know we set the project bundle id com.customnotification for main project then the bundle id of the Notification service should be com.customnotification.NotificationService. So the first prefix is the main project bundle id and that is very essential other wise it will give the error.

After configuring the bundle id set up the AppId, and profile with the same bundle id that you set up for the Notification service.

Notification Service Project SetUp

Drag and Drop the file MIService or add the folder MINotificationServiceExtension from the Notification Service project folder and add it to your project.

Inherit NotificationService from the MIService and write down the following method in the default file called NotificationService. Remove unnecessary code

override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
  super.didReceive(request, withContentHandler: contentHandler)
}

Note: Please verify the UNNotificationCategory Identifier in UIApplication+CustomNotification file and inside MIService file it should be the same like you set in your notification payload.

Apart from the setup of the project end and in the firebase, the most important thing is the Payload of the notification which should contain the content_available, mutable_content, and category in the payload. The Value of content_available and mutable_content should be True and the Category should be the same on evrey place like in payload, UIApplication+CustomNotification and inside MIService.

See the example of the payload

{
    "to": "<REGISTRATION_TOKEN_HERE>",
    "mutable-content" : true,
    "content_available" : true,
    "notification": {
        "body" : "Eureka!",
        "title": "Patient is not doing well",
        "click_action" : "provider-body-panel"
        "payload": {
             "story_id" : 1,
             "category" : "CATID1"
        }   
      }
    "image": "https://i.imgur.com/t4WGJQx.jpg"
} 

Now, run the application and check the notification with Image, Audio, and Video

Hurray…!!!!!!!👻👻👻

Conclusion

If you have any queries or questions then you can comment here. Also, check out some of the amazing work that we do at MindInventory and how we help build awesome products for people around the world. 😀

You can download the source code from the below link.

Mindinventory/MI-Notification

Happy Coding…!!!😊😊