Push Messaging

Antsomi's App Push feature empowers you to deliver impactful notifications to your mobile app users, fostering effective engagement and communication. These push notifications provide a dynamic avenue for timely, personalized, and efficient information delivery, enhancing user interactions with your mobile application.

Before continuing, please ensure that you've added the React Native SDK to your app.

For Android

For Android integration, you'll need to ensure you have the correct Application ID. Once you have it, provide it in the Antsomi SDK configuration and we will handle the rest for you.

TypeScript

import AntsomiRnSDK from '@antsomicorp/antsomirnsdk';

AntsomiRnSDK.config('<YOUR_PORTAL_ID>','<YOUR_SOURCE_ID>','<YOUR_APPLICATION_ID>', '<YOUR_APP_GROUP_ID>');

If you're unsure how to obtain the Application ID, kindly follow these instructions.

The App Group ID is required when your app runs on iOS devices, otherwise, you can leave it as any string.

For iOS

For iOS integration, you'll need to create a Notification Service Extension and ensure it's part of the same app group as your Flutter app. Then, provide the App Group ID to the Antsomi SDK during the integration process.

iOS development requires an iOS 11+ device (iPhone, iPad, iPod Touch) for testing.

You can also use the Xcode 14+ simulator with iOS 16+ to replicate your app environment.

Step 1: Add an iOS Service Extension

The AntsomiNotificationService enables your iOS app to receive feature-rich notifications, including images, buttons, and badges.

1.1: Within your project's iOS folder, open the .xcworkspace file in Xcode.

1.2: Select File > New > Target

1.3: Select Notification Service Extension and press Next

Create a new Notification Service Enxtension

1.4: Provide the Extension Name (e.g., NotificationExtension) and select the Swift language (Objective-C is also acceptable if needed).

1.5: Then click Finish. Do not select Activate on the dialog shown after selecting Finish.

1.6: To maintain Xcode in debugging mode for your app rather than the extension, please click Cancel when prompted to activate the scheme.

If you selected Activate by accident, you can simply switch back to debug your app in Xcode (next to the Play button).

Active the scheme pop-up

1.7: Open the project with Xcode, in the Project Navigator, select the top-level project directory and select the NotificationExtension target.

Make sure that the Deployment Target is configured to match the value of your Main Application Target. Unless you have a particular reason to do otherwise, we recommend setting the Deployment Target to iOS 10. This version of iOS is essential for accessing Rich Media in push notifications. Note that iOS versions older than 10 will not support Rich Media.

Step 2: Update the React Native project

2.1: Close the Xcode project. In the /ios directory of your React Native project, open the Podfile, and add the following outside of the main target (should be at the same level as your main target):

Ruby

#Add this to notification extension
target 'NotificationExtension' do
  use_frameworks!
  use_modular_headers!
  pod 'AntsomiFramework', '0.0.9'
end

2.2: Open the terminal, in the ios directory, and run pod install.

2.3: Open the <project-name>.xcworkspace file (Make sure you open the .xcworkspace file).

In your project, at the NotificationExtension folder, navigate to NotificationService and modify the code like below:

Swift

import Foundation
import UserNotifications
import AntsomiFramework

class NotificationService: AntsomiNotificationService {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.contentHandler = contentHandler
        bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
        super.didReceive(request, withContentHandler: contentHandler)
    }
}

Step 3: Enable iOS Push Capability in Xcode

3.1: In the main app target, select Signing & Capabilities > All > + Capability, enable Push Notifications.

Popup Signing & Capabilities

3.2: Enable Background Modes and check Remote Notifications.

Popup Background Modes

Step 4: Add App Group to your app

1.1 Go to your main app target, select Signing & Capabilities > All > + Capability, search for App Group

4.2: Under App Groups click the + button

4.3: Set the App Groups container identifier.

4.4: Go to the NotificationExtension Target, select Signing & Capabilities > All > + Capability, search for App Group, and add App Group to your NotificationExtension target.

Make sure the NotificationServiceExtension and your app have the same App Group ID.

Finally, you can go back to the integration process to continue initing the Anstomi SDK in your main React Native app:

TypeScript

import AntsomiRnSDK from '@antsomicorp/antsomirnsdk';

if (Platform.isAndroid) {
  AntsomiRnSDK.config('<YOUR_PORTAL_ID>','<YOUR_SOURCE_ID>','<YOUR_APPLICATION_ID>', '<YOUR_APP_GROUP_ID>');
}