> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-angular-v5-docs-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Increment App Icon Badge Count

> Guide to implementing app icon badge count updates using Notification Service Extension in iOS.

<Accordion title="AI Integration Quick Reference">
  * **Requires:** UNNotificationServiceExtension target in your app
  * **Purpose:** Update badge count when push notification received
  * **Implementation:** Override `didReceive(_:withContentHandler:)` in extension
  * **Related:** [Push Notifications](/notifications/push-overview) · [Prepare for Background](/sdk/ios/prepare-your-app-for-background-updates)
</Accordion>

This guide helps you set up an incremented badge for the app icon using **Notification Service Extension**.

***

## UNNotificationServiceExtension

This service grabs the data from the push notification payload, the user can modify its content and display the customized data on to the push notification.

In our case, we are modifying the data of the push notification and incrementing the badge count when a new push notification is received.

***

### **Step 1: Add UNNotificationServiceExtension inside the app.**

1. Click on `File` --> `New` --> `Targets` --> `Application Extension` --> `Notification Service Extension`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/QcHXltXFKjSg4WPo/images/d4a84e6b-1623200443-bb70b5b37a3e82f702b763fc451aa531.png?fit=max&auto=format&n=QcHXltXFKjSg4WPo&q=85&s=74132cf45607803d71ae89062ef7d28a" width="729" height="525" data-path="images/d4a84e6b-1623200443-bb70b5b37a3e82f702b763fc451aa531.png" />
</Frame>

2. Add `Product Name` and click on `Finish`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/T0aTXbhtWmYnVWC0/images/af9e666a-1623200445-edb5abbaa420f4a2cc0dd5e8dd9fda06.png?fit=max&auto=format&n=T0aTXbhtWmYnVWC0&q=85&s=0828d1413ea0ee0bbc1acdcb65f04f10" width="729" height="527" data-path="images/af9e666a-1623200445-edb5abbaa420f4a2cc0dd5e8dd9fda06.png" />
</Frame>

***

### **Step 2: Setup App Groups.**

1. Click on `Project` --> `Targets` --> `Your app Target` --> `Signing & Capabilities` --> `[+]` --> `App Groups`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/6IESCr-kzBV6qAKP/images/7fadbb62-1623200449-9854c6a6ca08ca1d8e9992f6fb634784.png?fit=max&auto=format&n=6IESCr-kzBV6qAKP&q=85&s=016c6b8f692256cd8b9f6f4105b91098" width="679" height="518" data-path="images/7fadbb62-1623200449-9854c6a6ca08ca1d8e9992f6fb634784.png" />
</Frame>

2. In App Groups, click on `[+]` --> `Add a new container` --> `Enter group name` --> `OK`.

<Note>
  Kindly, create a group name using the combination of 'group' and 'App's bundle identifier' i.e `group.com.yourApp.bundleId`.
</Note>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/5NIKqN7BW7oUoBak/images/705d0bd9-1623200455-5a2cc7bf19dd3ecd0c23da1f7ba9f1e9.png?fit=max&auto=format&n=5NIKqN7BW7oUoBak&q=85&s=b54a8d6d67eeac1824df41be7b2cf43a" width="525" height="175" data-path="images/705d0bd9-1623200455-5a2cc7bf19dd3ecd0c23da1f7ba9f1e9.png" />
</Frame>

3. Make sure you've selected the app group which you've created earlier.

4. Click on `Project` --> `Targets` --> `Notification Service Extension Target` --> `Signing & Capabilities` --> \[+] --> `App Groups`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/PJhf5xm-xXvMA0BD/images/4c26c701-1623200459-ce45c7b71753e282fa9ceea59f6277ce.png?fit=max&auto=format&n=PJhf5xm-xXvMA0BD&q=85&s=909c450225e817f7229d346097fa422d" width="679" height="518" data-path="images/4c26c701-1623200459-ce45c7b71753e282fa9ceea59f6277ce.png" />
</Frame>

5. Select the same App Group which you've created in `Your app Target`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/QcHXltXFKjSg4WPo/images/d519ba8e-1623200465-600ea61aeb6e76808eb9f84538f512b0.png?fit=max&auto=format&n=QcHXltXFKjSg4WPo&q=85&s=21669b5834ff9ae0d52f815cd71b9663" width="1244" height="677" data-path="images/d519ba8e-1623200465-600ea61aeb6e76808eb9f84538f512b0.png" />
</Frame>

***

### Step 3: Setup user suit for storing badge count.

1. Open `AppDelegate.swift` and add below code in `applicationWillEnterForeground(_ application: UIApplication)`.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    func applicationWillEnterForeground(_ application: UIApplication) {

        UserDefaults(suiteName: "group.com.yourApp.bundleId")?.set(1, forKey: "count")
        UIApplication.shared.applicationIconBadgeNumber = 0

    }
    ```
  </Tab>
</Tabs>

***

### Step 4: Setup Notification service extension to increment badge count.

1. Open `NotificationService.swift` and replace the below code in it.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    import UserNotifications

    class NotificationService: UNNotificationServiceExtension {

        var contentHandler: ((UNNotificationContent) -> Void)?
        var bestAttemptContent: UNMutableNotificationContent?
        let defaults = UserDefaults(suiteName: "group.com.yourApp.bundleId")

        override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
            self.contentHandler = contentHandler
            bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
            var count: Int = defaults?.value(forKey: "count") as! Int
            if let bestAttemptContent = bestAttemptContent {
                bestAttemptContent.title = "\(bestAttemptContent.title) "
                bestAttemptContent.body = "\(bestAttemptContent.body) "
                bestAttemptContent.badge = count as? NSNumber
                count = count + 1
                defaults?.set(count, forKey: "count")
                contentHandler(bestAttemptContent)
            }
        }

        override func serviceExtensionTimeWillExpire() {

            if let contentHandler = contentHandler, let bestAttemptContent =  bestAttemptContent {
                contentHandler(bestAttemptContent)
            }
        }
    }
    ```
  </Tab>
</Tabs>

## Refer Sample App

We have implemented it in our push notification sample app. You can download the sample app.

[Download Push Notification Sample App](https://github.com/cometchat-pro-samples/ios-swift-push-notification-app/archive/master.zip)

Or else [view it on Githhub](https://github.com/cometchat/cometchat-push-notification-app-ios).

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Push Notifications" icon="bell" href="/notifications/push-overview">
    Set up push notifications for your iOS app
  </Card>

  <Card title="Mark Delivered from Push" icon="check" href="/sdk/ios/marking-delivered-with-push-notification">
    Mark messages as delivered via push notification
  </Card>

  <Card title="Remove Delivered Notifications" icon="trash" href="/sdk/ios/remove-delivered-notifications">
    Programmatically remove delivered notifications
  </Card>

  <Card title="Background Updates" icon="mobile-screen" href="/sdk/ios/prepare-your-app-for-background-updates">
    Keep real-time connection alive in background
  </Card>
</CardGroup>
