Developers Guide

Notification Service Extension (Capacitor)

Suggest Edits

Notification Service Extension has been introduced in iOS 10 by Apple which allows your push 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 also. So It is an Important step which you need to configure properly as described in this documentation.

Add Notification Service Extension

  1. In case your capacitor iOS project isn't already opened in Xcode then run this command to open it in Xcode. Next, follow the below mentioned steps (within Xcode itself) to complete the integtration process.
npx cap open ios
  1. Create Notification Service Extension in your project. To do so, go to File >> New >> Target.
  2. Now Select Notification Service Extension template under iOS section of the dialog box and press on next button to proceed.
  1. 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.
  1. 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 you will see a class with the extension name provided by you while creation and .plist file associated with it.

Swift:

Objective-C

  1. 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 capacitor ios project that's opened in Xcode, then open the terminal and navigate to the ios folder located within your Capacitor Project's root folder using the cd command. For example, if your Project is saved on Desktop and its root folder name is my_capacitor_app, then go to your project's ios folder by using the following command:
$ cd ~/Desktop/my_capacitor_app/ios
  1. If you already have a Podfile in your project. Please skip this step and continue to point number 2.
pod init
  1. Now go to ios folder inside your Capacitor Project's root folder and open your Podfile and add the notifyvisitors dependency at the end within the Podfile for your Notification Service Extension name target like below.
target 'YourNotificationServiceExtension' do
       pod 'notifyvisitors', '7.0.5' /* Replace version number with the latest one available on cocoapods */
 end
  1. Now run the following commands in the terminal from the ios folder directory.
pod repo update && pod install && cd ..
  1. Now, re-open your capacitor ios project in Xcode by running the following command inside the terminal at your Capacitor project's root folder.
npx cap open ios
  1. 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.
  1. 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
  1. 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

#import <notifyvisitors/notifyvisitors.h>

Configure Service Extension’s info.plist

From 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.

<key>App Bundle identifier</key>
         <string>YOUR_APP_MAIN_TARGRT_BUNDLE_ID</string>
         <key>NSExtension</key>
         <dict>
                     <key>NSExtensionPointIdentifier</key>
                     <string>com.apple.usernotifications.service</string>
                     <key>NSExtensionPrincipalClass</key>
                     <string>$(PRODUCT_MODULE_NAME).NotificationService</string>
                     <key>NSExtensionAttributes</key>
                    <dict>
                               <key>UNNotificationExtensionDefaultContentHidden</key>
                               <true/>
                               <key>UNNotificationExtensionInitialContentSizeRatio</key>
                               <real>0.7</real>
                    </dict>
         </dict>

OR
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.
  • 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

Configure Push in SignIn and Capabilities:

Goto 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 are 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.

Modify Push Payload in Notification Service Extension

Now you need to modify Push payload to download and attach media content if available in your payload to display rich media content (image, audio or video). To do so goto your NotificationService.swift/NotificationService.m file and update the didReceiveNotificationRequest() method as shown below.

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…
notifyvisitors.loadAttachment(with: request, bestAttempt: bestAttemptContent, withContentHandler: self.contentHandler)
      }
}

Make sure LoadAttachmentWithRequest() 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.

📘

Important Note

Till the above steps completed you 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:

Main Target of your App:

From Project navigator select your App’s main target and Goto Signing & Capabilities tab if App Groups is not already added then click on + Capabilities symbol on the left corner of this tab and add App Groups as shown in screenshot below.

Once you add App Groups capabilities you will be able to see it in your Signin & Capabilities and then under App Groups click the "+" button and add a new app group giving the group name as group.nv.{Your App Bundle Identifier} where {Your App Bundle Identifier} is the same as the bundle identifier of your main app target as shown in screenshot below. After this press OK.

Example: if Your App’s Bundle Identifier is com.notifyvisitors.sampleiOSApp then the App Group must be named as group.nv.com.notifyvisitors.sampleiOSApp make sure this newly created app group must be checked (Turned on) as shown in screenshot below.

Notification Service Extension Target of your App:

Once you have configured App Groups in your Main App Target you need to activate same App Group into your Notification Service Extension Target as done for your main App target to do so from Project navigator select your Notification Service Extension target and Goto Signing & Capabilities tab if App Groups is not already added then click on + Capabilities symbol on the left corner of this tab and add App Groups as shown in screenshot below.

Once you’ve added App Groups capabilities you will be able to see it in your Signin & Capabilities of your Notification Service Extension Target also then under App Groups if previously created AppGroupID is not visible then click on refresh button just beside the + symbol under App Groups to refresh the list of AppGroups configured in your apple developer account. Select the app group created previously and make sure the same AppGroupID must be checked (Turned on) in your Notification Service Extension Target also as done for your Main App Target.

Example: We have previously created an AppGroupID named group.nv.com.notifyvisitors.sampleiOSApp for your Main App Target make sure the same AppGroupID must be visible here and make it checked (Turned on).

Updated 2 months ago