--- agentTools: projectIndex: https://docs.nvecta.com/llms.txt --- # Notification Service Extension (React Native) Notification Service Extension has been introduced in iOS 10 by Apple which allows you to add images, audio or video content to your push notification. NotifyVisitors SDK will use it to enable you to add **Action buttons**, **badge counts,** and to track **delivery counts** in your NotifyVisitors panel. So It is an important step which you need to configure properly as described in this documentation. ## Add Notification Service Extension **1.1** Now, go to the ios folder inside your **React Native Project's root folder** and open your iOS project in **Xcode** by double clicking on the **.xcworkspace** file and once your React Native iOS project is opened in **Xcode**, create **Notification Service Extension** in your project. To do so, go to **File >> New >> Target**. **1.2** Now Select **Notification Service Extension** template under iOS section of the dialog box and press on next button to proceed. [block:image] { "images": [ { "image": [ "https://files.readme.io/78a2917-1._NSE_Template.png", "ServiceExtTemplate.png", "" ], "align": "center" } ] } [/block] **1.3** In the next prompt, provide the name of the extension target and select the programming language which you want to use and then click on the Finish button as shown in the screenshot below. [block:image] { "images": [ { "image": [ "https://files.readme.io/7d91ecc-2._NSE_NameandLanguage.png", "ObjC_ServiceExtName.png", "" ], "align": "center" } ] } [/block] **1.4** Once the target is created, press '**Cancel**' when prompted to activate the scheme. After this your notification service extension will be added to the project and you'll see a **class** with the extension name you specified during creation, as well as an **info.plist** file associated with it. ### Swift: [block:image] { "images": [ { "image": [ "https://files.readme.io/c929685-3._NSE_ProjectNavigatorSwift.png", "Swift_ServiceExtName.png", "" ], "align": "center" } ] } [/block] ### Objective-C [block:image] { "images": [ { "image": [ "https://files.readme.io/fad248c-4._NSE_ProjectNavigatorObjC.png", "", "" ], "align": "center" } ] } [/block] **1.5** Now we can proceed to add further configuration to this newly created target. Under this target you need to complete **Import Notifyvisitors SDK**, **Configure info.plist**, **add code to NotificationService file** and **configure AppGroup** properly to complete this setup. Further steps are defined below in detail to complete this setup. ## Import NotifyVisitors SDK in your Notification Service Extension: 1. Now **close** your React Native iOS project that's opened in **Xcode**, then open the terminal and navigate to the ios folder located within your React Native Project's root folder using the cd command. **For example**, if your Project is saved on Desktop and its root folder name is **AwesomeProject**, then go to your project's ios folder by using the following command: ```ruby $ cd ~/Desktop/AwesomeProject/ios ``` 2. Now go to **ios** folder inside your **React Native Project's root folder**, open your **Podfile** and add the **notifyvisitorsNotificationService** dependency at the end within the **Podfile** for your **Notification Service Extension** name target like below. ```ruby Podfile target 'YourNotificationServiceExtension' do pod 'notifyvisitorsNotificationService' end ``` 3. Now run the following commands in the terminal at your React Native Project root folder: ```ruby $ npx pod-install ios ``` 4. Now, re-open your React Native iOS project in Xcode (by going to the ios folder present inside the React Native Project's root folder) and follow the steps mentioned below in Xcode itself to complete the remaining Notification Service Extension integration process. 5. If you have selected **Objective-C** as the language while creating the **Notification Service Extension** in the above steps, then you can directly import our header file in your **NotificationService.m** file. However, if you are using **Swift** language then you need to create a separate **Bridging-Header** file and then import our header file as done earlier in the app’s main target. To do so create a new header file and name it as per the following format **YOUR\_ServiceExtension\_NAME-Bridging-Header.h** For example: if your Service Extension name is **MyNotificationServiceExtension**, then the header file name will be **MyNotificationServiceExtension-Bridging-Header.h**. Now add the following import statement in **YOUR\_ServiceExtension\_NAME-Bridging-Header.h** for accessing SDK Classes. > 📘 Note > > Make sure that the path of your **bridge-header.h** file is included in build settings under **Swift compiler-code generation** as Objective-C bridging header: **YOUR\_ServiceExtension\_NAME/YOUR\_ServiceExtension\_NAME-Bridging-Header.h** ```objectivec #import ``` ## Configure Service Extension’s info.plist Now in Xcode inside the project navigator go to your **Notification Service Extension** project target and open **info.plist** as source code (right click on **info.plist** and click on **Open as >> Source code**) and add the following code in it. ```xml info.plist key>App Bundle identifier YOUR_APP_MAIN_TARGRT_BUNDLE_ID NSExtension NSExtensionPointIdentifier com.apple.usernotifications.service NSExtensionPrincipalClass $(PRODUCT_MODULE_NAME).NotificationService NSExtensionAttributes UNNotificationExtensionDefaultContentHidden UNNotificationExtensionInitialContentSizeRatio 0.7 ``` [block:html] { "html": "
\n OR\n
" } [/block] You can simply open the **info.plist** & add the keys which works the same as above for this. * Add a new row by going to the menu and clicking **Editor**>**Add Item**. Set a key **App Bundle identifier** as **String** and set its value to **your app’s main target Bundle Identifier**. [block:image] { "images": [ { "image": [ "https://files.readme.io/6674c55-5._NSE_InfoPlist_01.png", "service_new.png", "" ], "align": "center" } ] } [/block] * Expand **NSExtension** & add **NSExtensionAttributes** as **Dictionary**. Inside **NSExtensionAttributes** dictionary add two keys, first key is **UNNotificationExtensionDefaultContentHidden** as **Boolean**, its value should be **YES** and the second key is **UNNotificationExtensionInitialContentSizeRatio** as **Number**, its value should be **0.7** [block:image] { "images": [ { "image": [ "https://files.readme.io/85f381d-6._NSE_InfoPlist_02.png", "NotificationServiceExtAtrributes.png", "" ], "align": "center" } ] } [/block] ## Configure Push in SignIn and Capabilities: Go to **Signing & Capabilities** tab of your **Notification Service Extension target** and click on + symbol on the left corner of this tab and add **Push Notifications** and if you have **upgraded Xcode** and **Push Notifications** was already added in previous version of Xcode then remove **Push Notifications** and add it again to configure push notification properly for the upgraded devices. [block:image] { "images": [ { "image": [ "https://files.readme.io/3aeb946-8._NSE_PushCapabilities.png", "", "" ], "align": "center" } ] } [/block] ## Modify Push Payload in Notification Service Extension Now you need to update the code to download and attach media content if available in your push payload to display rich media content **(image, audio or video)**. To do so, go to your **NotificationService.swift**/**NotificationService.m** file and update the **didReceiveNotificationRequest()** method as shown below. ```swift override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) { self.contentHandler = contentHandler bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent) if let bestAttemptContent = bestAttemptContent { // Modify the notification content here… notifyvisitorsNotificationService.didReceive(request, withBestAttempt: bestAttemptContent, withContentHandler: self.contentHandler) } } ``` ```objectivec - (void)didReceiveNotificationRequest: (UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler { self.contentHandler = contentHandler; self.bestAttemptContent = [request.content mutableCopy]; // Modify the notification content here… [notifyvisitorsNotificationService didReceiveNotificationRequest: request withBestAttemptContent: self.bestAttemptContent withContentHandler: self.contentHandler]; } ``` Make sure **notifyvisitorsNotificationService.didReceive()** method of our SDK is called in the end of the **didReceiveNotificationRequest()** if you modify payload after calling this method then SDK may not work properly so you can put some checks to identify your other payloads if you need to handle any. Now in your same **NotificationService.swift/NotificationService.m** file update the **serviceExtensionTimeWillExpire()** method as shown below. ```swift override func serviceExtensionTimeWillExpire() { if let contentHandler = contentHandler, let bestAttemptContent = bestAttemptContent { notifyvisitorsNotificationService.serviceExtensionTimeWillExpire() } } ``` ```objectivec - (void)serviceExtensionTimeWillExpire { [notifyvisitorsNotificationService serviceExtensionTimeWillExpire]; } ```
> 📘 Important Note > > Once the above steps are completed, your app will be able to receive rich push. Action Buttons and badge counts can be displayed but till now delivery count is not enabled so you will see 0 as delivery count. To enable push delivery count in from your app to our panel, you need to follow the next step to configure **AppGroup** properly to enable delivery count. ## Configure App Groups for All Targets: Let's set up **AppGroups** in your app to count push deliveries in your NotifyVisitors panel. First, we'll select an **AppGroupID** and set it up in each of the **info.plist** of your two targets (i.e. **Your App's Main Target** and **Your Notification Service Extension Target**), and then we'll use the same **AppGroupID** to create and activate the same **AppGroup** in both target’s **Signing & Capabilities Tabs**. To configure this way, follow the steps listed below. 1. Let’s assume the **AppGroupID** we want to use is **group.{Your App Bundle Identifier}.Notifyvisitors** where **{Your App Bundle identities}** is the same as your **App Bundle Identifier** of your Main App Target. 2. Now from the Project Navigator, go to your **Main App** project target, open **info.plist** as source code (right-click on **info.plist** and select **Open as >> Source code**), and paste the following code into it. ``` nvAppGroupKey group.{Your App Bundle Identifier}.notifyvisitors ``` [block:html] { "html": "
\n OR\n
" } [/block] You can simply open the **info.plist**, add a new row, and define a **nvAppGroupKey** as a **String** with a value of **group.{your app bundle identifier}.notifyvisitors** [block:image] { "images": [ { "image": [ "https://files.readme.io/a56f63ae47e121bb56555ef53156d67891de4c7461649e3305870596692665e0-NSE_AppGroupNV_SDK_1.png", "", "" ], "align": "center" } ] } [/block] 3. Repeat **step 2** for the **info.plist** file in your **Notification Service Extension Target** project folder and enter the exact same key and values as in step 2. > 📘 Note > > Make sure it is case sensitive and is exactly the same in both the **info.plist** files. 4. Now, from the Project Navigator, select your app's Main Target and go to the **Signing & Capabilities** tab. If **App Groups** have not already been added, click + Capabilities symbol in the left corner of this tab and add **App Groups**, as shown in the screenshot below. [block:image] { "images": [ { "image": [ "https://files.readme.io/1d41aca55f9b845b3142cc1f2c983419218c47333e3e11dfe3e43b2bcc8f2b6f-NSE_AppGroupNV_SDK_2.png", "", "" ], "align": "center" } ] } [/block] 5. Once you have finished adding **AppGroups** capabilities you will be able to see it in your **Signing & Capabilities** and then under **AppGroups** click "+" button to create a new app group with the same name as the value added to **info.plist** for both targets (i.e **group.{Your App Bundle Identifier}.Notifyvisitors**), as shown in the screenshot below. Finally, click OK. [block:image] { "images": [ { "image": [ "https://files.readme.io/cc81f1308d7ed88c9562330f1379d9463349d22968e46b075821c18daa2660b1-NSE_AppGroupNV_SDK_3.png", "", "" ], "align": "center" } ] } [/block] 6. **Example:** If you have set the **AppGroupID** to **group.com.mySampleiOSApp.Notifyvisitors** in both **info.plist** files, then add the same **AppGroup** to **Signing & Capabilities**, and ensure that this newly created AppGroup is checked **(Turned On)**, as shown in the screenshot below. [block:image] { "images": [ { "image": [ "https://files.readme.io/16d4fdc1abe2dc78206cfc99b14c66da8409f5efe41879b668b36896678b9e1b-NSE_AppGroupNV_SDK_4.png", "", "" ], "align": "center" } ] } [/block] 7. Once you have configured **AppGroups** in your **Main App Target**, you must activate the **same AppGroup** in your **Notification Service Extension Target**. To do so, select your **Notification Service Extension target** from the Project Navigator and go to the **Signing & Capabilities** tab. If **AppGroups** have not already been added, click the **+ Capabilities** symbol in the left corner of this tab and add **App Groups** as shown in the screenshot below. [block:image] { "images": [ { "image": [ "https://files.readme.io/bee348919c744859946ce5074edb5d705d59eb56a59fb57359ec3f70b7a09270-NSE_AppGroupNV_SDK_5.png", "", "" ], "align": "center" } ] } [/block] Once you've added **AppGroups** capabilities, you'll be able to see them in your **Notification Service Extension** Target's **Signing & Capabilities**. If a previously created **AppGroupID** isn't visible, click the refresh button next to the + symbol under App Groups to refresh the list of **AppGroups** configured in your Apple Developer account. Select the previously created app group and ensure that the same **AppGroupID** is checked **(Turned on)** in your **Notification Service Extension Target** as you did for your **Main App Target**. **Example:** You have recently created an **AppGroupID** called **group.com.mySampleiOSApp.Notifyvisitors** for your **Main App Target**, and make sure the same **AppGroupID** is visible and checked **(Turned On)** in the Signing & Capabilities of your Notification Service Extension Target. [block:image] { "images": [ { "image": [ "https://files.readme.io/3cebc618348435c7adef1daf2f3fdcac9a112c27c519ba012dcf9a40b2dcf27c-NSE_AppGroupNV_SDK_4.png", "", "" ], "align": "center" } ] } [/block]