EN  | 

/Quick Integration Guide /App push notifications

React Native integration

Quick Guide to React Native SDK Integration.

Index

What do you need for integration?

It is important since the project contains the configuration data of your application, that is, the domain where your website is hosted, the safari or iOS certificates or the firebase key that android uses. It all depends on the platforms (web or app) that the project uses.

Integration

This article shows the minimum development that must be done to start registering devices and being able to carry out the first push campaigns.


The Indigitall SDK is compatible with Google messaging services, through the Firebase platform and with the services of HMS or Huawei Mobile Services of Huawei.


You can see it in this tutorial video or read the instructions below:




Our SDK is available via npm .

npm (Node Package Manager) it is a package management system. It consists of a command line client and an online database of public and private packages.

Import the plugin

To import the SDK into your project, follow these steps:


  1. Open the console and position yourself at the root of the project.


$ cd /PATH/TO/YOUR/PROJECT


  1. Run this line in the console to import the plugin:


$ npm install indigitall-react-native-plugin


Configuration for Android


Config the build.gradle of your project as the following example:

buildscript {
    ...
    repositories {
        ...
        maven { url "https://developer.huawei.com/repo/" }
    }
    dependencies {
        ...
        classpath("com.google.gms:google-services:4.3.+")
        classpath("com.huawei.agconnect:agcp:1.4.1.300")
    }
}

allprojects {
    repositories {
        ...
        mavenCentral()
        maven { url "https://developer.huawei.com/repo/" }

    }
}

Adding Firebase Services

To activate Firebase notifications you must add your google-services.json file in your android project inside your app folder and modify your build.gradle file as follows:

...
apply from: "../../node_modules/..."
apply plugin: 'com.google.gms.google-services'


Adding HMS Services

To activate HMS notifications you must add your agconnect-services.json file in your android project inside your app folder and modify your build.gradle file as follows:

...
apply from: "../../node_modules/..."
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.huawei.agconnect'

Setting the notifications icon

This icon will be displayed in the top bar of the Android system and in the header of the pushes sent through your app.

It must be a monochrome icon, that is, the image must contain only one color and alpha.

We give you an example with our logo in monochrome:


New tag


Here we show you how your code should be in the AndroidManifest.xml (The icon has to be a png)


<manifest ...>
    <!-- ... -->
    <application ...>
        <!-- ... -->

        <!-- Resource for monochrome icon -->
        <meta-data android:name="indigitall.icon" android:resource="@drawable/YOUR_MONOCHROME_ICON"/>

        <!-- Resource for icon color -->
        <meta-data android:name="indigitall.color" android:resource="@color/colorPrimary"/>
    </application>
</manifest>


* For further clarification on creating icons, we leave you this link to the Android documentation that may help you: Product icons

Configuration for iOS

Since the release of iOS 10, apps can manage rich push notifications , that is, with images, gif, video, buttons, etc.

In order to use these features, your app needs to implement the Notification Service Extension.


  1. Add a new Notification Service Extension to your project (Xcode: File> New> Target).
  2. Add the extension target in your application.
  3. Create a new file called NotificationService inside this target. Overwrite all content with the following code:


import Indigitall
class NotificationService: UNNotificationServiceExtension {

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

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

        Indigitall.didReceive(self.request!, withContentHandler: self.contentHandler!)
    }

    override func serviceExtensionTimeWillExpire() {
        if let contentHandler = contentHandler, let bestAttemptContent = bestAttemptContent {
            Indigitall.serviceExtensionTimeWillExpire(bestAttemptContent, withContentHandler: contentHandler)
        }
    }

}
#import <UserNotifications/UserNotifications.h>
#import <Indigitall/Indigitall.h>

API_AVAILABLE(ios(10.0))
//NotificaiontService.h
@interface NotificationService : UNNotificationServiceExtension
@end

//NotificationService.m
@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;
@property (nonatomic, strong) UNNotificationRequest *request;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];
    self.request = request;

    [Indigitall didReceiveNotificationRequest:self.request withContentHandler:self.contentHandler];

}

- (void)serviceExtensionTimeWillExpire {
    if (self.contentHandler != nil && self.bestAttemptContent != nil){
        [Indigitall serviceExtensionTimeWillExpire:self.bestAttemptContent withContentHandler:self.contentHandler];
    }
}

@end

SDK initialization

Initialize the SDK with the indigitall.init () method to start receiving push notifications. This initialization must be done within the index.html of your project.


window.plugins.indigitall.init({
  appKey: "<YOUR_APP_KEY>",
  senderId: "<YOUR_SENDER_ID>"
});



Firebase console Firebase console


Resources