Push Notifications for React Native apps

By now, you would have already integrated Apptics if you are using any other module. If not, refer to the integration guide.

Push notifications are available in React Native version 0.10.0-beta.1.

iOS setup

Import and initialize in a notification service extension.
Specify the pod 'AppticsNotificationServiceExtension' in your podfile.
The podfile will look something similar to the one below.

Copied# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, '14.5'
prepare_react_native_project!

# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# ```
flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'AwesomeProject' do
  config = use_native_modules!
  
  use_react_native!(
    :path => config[:reactNativePath],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    :flipper_configuration => flipper_config,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )
  
  script_phase :name => 'Apptics pre build', :script => 'sh "./Pods/Apptics-SDK/scripts/run" --upload-symbols-for-configurations="Release, Appstore" --app-group-identifier="group.com.jambav.appticsapp"', :execution_position => :before_compile


  target 'AwesomeProjectTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )
  end
end

target 'NotificationServiceExtension' do
  pod 'AppticsNotificationServiceExtension', '2.1.3'
end

Show full

Show less

Note: Pass the common app group identifier --app-group-identifier="group.MAIN_BUNDLE_IDENTIFIER.apptics" to the run script as mentioned in the above sample podfile.

From your terminal, navigate to the iOS folder and run pod install --repo-update.
Open the .xcworkspace file in Xcode.
Go to your root project in Xcode and select the main app target. Navigate to the Signing & Capabilities tab.
If push notifications are not enabled, click + Capability and add push notifications.

Click + Capability again and add Background modes.
Also, enable the remote notifications.

Add notification service extension

The AppticsNotificationServiceExtension enables your iOS app to receive the rich notifications with images, buttons, and badges. It is also essential for Apptics' confirmed devliery analytics stats.

In Xcode, navigate to File > New > Target.
Select the Notification Service Extension and click Next.

Give a name to the NotificationServiceExtension and click Finish.

When prompted to activate the scheme after selecting Finish, click Cancel to avoid activating it.

In Xcode, select the NotificationServiceExtension target.
Go to general settings. Set the minimum deployment to match your main application target. This should be iOS 14.5 or higher.

Add app groups

App groups enable your app and the NotificationServiceExtension to share data when a notification is received, even if the app is not running. This is essential for implementing the badges and confirmed deliveries.

Select your main app target in Xcode.
Go to Signing & Capabilities and click on + Capability.
Choose App groups.

Click on + to add a new group.
Set the app groups container name to 'group.MAIN_BUNDLE_IDENTIFIER.apptics', where the MAIN_BUNDLE_IDENTIFIER should match the bundle identifier of your main application.

Click OK to save the app group for your main app target. Repeat the steps for the NotificationServiceExtension Target.
Select the NotificationServiceExtension Target > Signing & Capabilities > + Capability > App groups.

In app groups, click + button to add a new group.
Set the app group container to 'group.MAIN_BUNDLE_IDENTIFIER.apptics', making sure NOT to include 'NotificationServiceExtension' in the name.
Replace the MAIN_BUNDLE_IDENTIFIER with the bundle identifier of your main application.

Integrate the notification service extension

In the Xcode project navigator, select the NotificationServiceExtension folder.
Locate and open the NotificatioService.m (for Obj-C) or NotificationService.swift (for Swift) file.
Replace the whole content of the file with the following code.

Objective C Swift

Copied#import "NotificationService.h"
#import <AppticsNotificationServiceExtension/AppticsNotificationServiceExtension.h>

@interface NotificationService ()
@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;
@end

@implementation NotificationService
- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];
    // Modify the notification content here...
    APPushNotificationExtension *apext = [APPushNotificationExtension new];
    apext.appGroup = @"group.MAIN_BUNDLE_IDENTIFIER.apptics";
        if ([apext isNotificationFromApptics:request]){
        NSLog(@"AdditionalPayload : %@", [apext getAdditionalPayload]);
        [apext didReceiveNotificationExtensionWithContent:self.bestAttemptContent contentHandler:contentHandler];
    }else{
        self.contentHandler(self.bestAttemptContent);
    }
}

- (void)serviceExtensionTimeWillExpire {
    // Called just before the extension will be terminated by the system.
    // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
    self.contentHandler(self.bestAttemptContent);
}
@end

Copiedimport UserNotifications
import AppticsNotificationServiceExtension

class NotificationService: UNNotificationServiceExtension {

  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)

      guard let bestAttemptContent = bestAttemptContent else { return }

      // Initialise Apptics notification extension
      let apext = APPushNotificationExtension()

      // Pass the app group identifier share and update the badge count.
      apext.appGroup = "group.MAIN_BUNDLE_IDENTIFIER.apptics"

      // Check and pass the notification request to Apptics extension handler
      if apext.isNotification(fromApptics: request) {
          apext.didReceive(with: bestAttemptContent, contentHandler: contentHandler)
      } else {
          contentHandler(bestAttemptContent)
      }

  }

  override func serviceExtensionTimeWillExpire() {
      // Called just before the extension will be terminated by the system.
      if let bestAttemptContent = bestAttemptContent {
          contentHandler?(bestAttemptContent)
      }
  }
  
}

Show full

Show less

Upload p12 certificate

Refer to this link for detailed steps on how to upload your p12 certificate to Apptics.

Android setup

Make sure that you have configured the Firebase credentials in the Apptics web console. Refer to this link.

Add Apptics push dependency to your app level build.gradle (android/app/build.gradle).

Copieddependencies {
	implementation "com.zoho.apptics:apptics-pns:0.2.15.0-beta2"
}

Add Apptics push messaging service to your app's manifest (android/app/src/main/Android.Manifest.xml).

Copied<application>
	<service android:name="com.zoho.apptics.pns.AppticsMessagingService"
            android:stopWithTask="false"
            android:exported="false" >
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
 	</service>
</application>

Initialization

Initialize Apptics push notification service in your app.js or index.js.

Copiedimport { Apptics } from '@zoho_apptics/apptics-react-native';

AppticsPushMessages.startService();

CopiedAppticsPushMessages.registerPushNotification();

Android notification customizations

Notification channel

Starting from Android 8 (Oreo) and above, apps must assign a notification channel for every notification. You can configure the notification channel for push notifications sent by Apptics through the Notification Builder in Apptics web console when publishing a notification.

You can also configure a default channel ID as meta-data in your AndroidManifest.xml, which will be used if no notification channel is specified in the Notification Builder.

Copied<application>
	<meta-data android:name="apptics_default_notification_channel_id" android:value="general" />
</application>

Apptics SDK posts notification with a built-in channel if no channel ID is configured.

Notification icon

Notification icon (small) can be configured from the Apptics web console when publishing a notification.

You can also configure a default icon as the meta-data in your AndroidManifest.xml which will be used if notification icon is not available in the incoming message.

Copied<application>
	<meta-data android:name="apptics_default_notification_icon" android:resource="@drawable/small_notif_icon" />
</application>

If both the default icon and icon from the incoming messages are not available, App icon will be used.

Notification color

Notification color can be configured from the Apptics web console when publishing a notification.

You can also configure a default color as the meta-data in your AndroidManifest.xml which will be used if the color is not available in the incoming message.

Copied<application>
	<meta-data android:name="apptics_default_notification_color" android:resource="@color/notif_accent" />
</application>

Notification sound

From Android 8 (Oreo) and above, notification sounds are based on the notification channels. Apptics doesn't provide any default notification channels. Refer to Notification channels to assign channels to notifications sent by Apptics.

For Android 7 and below, you can configure the notification sound from the Apptics web console while publishing the notification.

Add your custom sound file in res/raw folder and provide the name of the file with extension in additional info while publishing notification.

Note: .3gp, .mp4, .wav are some of the supported container formats.

PreviousCocoa

CRM

Voice

Sign

Forms

Bigin

SalesIQ

Bookings

RouteIQ

Thrive

CRM Plus

Zakya

Campaigns

Voice

Sign

Forms

Social

Survey

SalesIQ

Sites

Backstage

PageSense

Marketing Automation

LandingPage

Webinar

LeadChain

Domains

CommunitySpaces

Thrive

Publish

Marketing Plus

Commerce

Zakya

Desk

Assist

Voice

SalesIQ

Bookings

FSM

Lens

Solo

Service Plus

Books

Expense

Sign

Inventory

Invoice

Billing

Payroll

Commerce

Checkout

Practice

Solo

Payments

Finance Plus

Mail

Voice

Sign

WorkDrive

Bookings

Cliq

Notebook

Meeting

Connect

Learn

Office Integrator

Writer

TeamInbox

ZeptoMail

Show

Tables

Sheet

Office Suite

Calendar

ToDo

PDF Editor

Workplace

Vani

Expense

Recruit

People