Developer Guide
API GuideDeveloper Guide
  • Overview
    • Getting Started
    • Customers and Visitors
    • Events and Business Objects (BOs)
      • Sample Event Templates
  • Website
    • Getting Started
      • Direct JS Implementation
      • JS Integration via GTM
      • Tracking Haravan website events
    • Tracking Users
    • Tracking Events
      • [Direct] Sample E-Commerce Events
        • View Product
        • Add a Product to the Shopping Cart
        • View the Shopping Cart
        • Remove a Product from the Shopping Cart
        • Search for Product(s)
        • Checkout Shopping Cart
        • Apply Promotion Code
        • Purchase Product(s)
      • [GTM] Sample E-Commerce Events
        • View Product
        • Add a Product to the Shopping Cart
        • View the Shopping Cart
        • Remove a Product from the Shopping Cart
        • Search for Product(s)
        • Checkout Shopping Cart
        • Apply Promotion Code
        • Purchase Product(s)
    • Web Push
  • Android
    • Getting Started
    • Tracking Users
    • Tracking Events
    • Push Messaging
    • App Inbox Messaging
  • iOS
    • Getting Started
      • Integration of Antsomi iOS SDK
    • Tracking Users
    • Tracking Events
    • Push Messaging
  • Hybrid Apps
    • React Native
      • Tracking Users
      • Tracking Events
        • Sample E-Commerce Events
          • View Product
          • Add a Product to the Shopping Cart
          • View the Shopping Cart
          • Remove a Product from the Shopping Cart
          • Search for Product(s)
          • Checkout Shopping Cart
          • Apply Promotion Code
          • Purchase Product(s)
      • Push Messaging
      • App Inbox Messaging
    • Flutter
      • Tracking Users
      • Tracking Events
        • Sample E-Commerce Events
          • View Product
          • Add a Product to the Shopping Cart
          • View the Shopping Cart
          • Remove a Product from the Shopping Cart
          • Search for Product(s)
          • Checkout Shopping Cart
          • Purchase Product(s)
      • Push Messaging
      • App Inbox Messaging
      • App In-line Content
  • Antsomi Service Integrations
    • Media Template
    • Media JSON
      • Sample E-Commerce Events
        • Search for Product(s)
        • View Product
        • Add a Product to the Shopping Cart
        • Checkout Shopping Cart
        • Purchase Product(s)
      • Sample User Events
        • Sign-in
        • Sign-up
      • Sample Opt-in Events
        • Subscribe to Email marketing
        • Subscribe to OneSignal channel
  • 3rd Party Integrations
    • Shopify
      • Tracking Shopify website events
    • LINE
      • Integrating LINE Login with your web app
    • Google Ad Manager
      • Targeting CDP365 segment via PPID(s)
Powered by GitBook
On this page
  • For Android
  • For iOS
  1. Hybrid Apps
  2. React Native

Push Messaging

PreviousPurchase Product(s)NextApp Inbox Messaging

Last updated 1 year ago

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

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.

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 .

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

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

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):

#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:

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.

3.2: Enable Background Modes and check Remote Notifications.

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:

import AntsomiRnSDK from '@antsomicorp/antsomirnsdk';

if (Platform.isAndroid) {
  AntsomiRnSDK.config('<YOUR_PORTAL_ID>','<YOUR_SOURCE_ID>','<YOUR_APPLICATION_ID>', '<YOUR_APP_GROUP_ID>');
}
.
instructions
added the React Native SDK to your app
Create a new Notification Service Enxtension
Active the scheme pop-up
Popup Signing & Capabilities
Popup Background Modes