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.
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();
- Register push notification from React Native for iOS applications.
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.