EN  | 

ES
/Quick Integration Guide /App push notifications /Cordova

Cordova integration

Quick Guide to Cordova 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 :


$ cordova plugin add indigitall-cordova-plugin


Configuration for Android


If you don't want to compile your Cordova project for Android devices, you can skip this point.

Otherwise, follow these steps:

Adding Firebase Services

  1. To start you need a file called google-services.json . This file can be exported from the Firebase console .

  2. Move it to the root folder of your project . You should have something like this:


Estructura de ficheros del proyecto Cordova

  1. Add the following code in the config.xml file inside the android section.


<platform name="android">
    <resource-file src="google-services.json" target="/google-services.json" />
    ...
</platform>


  1. Once the android project is created, it must be added in the manifest of the application, which can be found in the following path:


Cordova project file structure


  1. Add the following lines:


<service android:name="com.indigitall.android.services.FirebaseMessagingService" >
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>


  1. You also have to edit the build.gradle of the application, which can be found in the following path:


Cordova project file structure


  1. Add the following lines:



buildscript {
    repositories {
        ...
        maven {url 'https://developer.huawei.com/repo/'} 
    }
    dependencies {
        ...
        classpath 'com.google.gms:google-services:4.0.+'
    }
}

allprojects {
    repositories {
        ...
        maven {url 'https://developer.huawei.com/repo/'} 
    }
}

apply plugin: 'com.google.gms.google-services'

...
dependencies {
    implementation fileTree(dir: 'libs', include: '*.jar')
    // SUB-PROJECT DEPENDENCIES START
    ...
    implementation "com.google.firebase:firebase-core:17.2.2"
    implementation "com.google.firebase:firebase-messaging:20.1.0"

    implementation "com.huawei.hms:location:5.0.0.301" // GET LOCATION
    // SUB-PROJECT DEPENDENCIES END
}

Adding HMS Services

  1. To start you need a file called agconnect-services.json . This file can be exported from the Huawei developer console .

  2. Move it to the root folder of your project . You should have something like this:


Cordova project file structure

  1. Add the following code in the config.xml file inside the android section.


<platform name="android">
    <resource-file src="agconnect-services.json" target="/agconnect-services.json" />

    ...
</platform>


  1. Once the android project is created, it must be added in the manifest of the application, which can be found in the following path:


Cordova project file structure


  1. Add the following lines:


<service android:exported="false" android:name="com.indigitall.android.services.HMSMessagingService">
    <intent-filter>
        <action android:name="com.huawei.push.action.MESSAGING_EVENT" />
    </intent-filter>
</service>


  1. You also have to edit the build.gradle of the application, which can be found in the following path:


Cordova project file structure


  1. Add the following lines:


apply plugin: 'com.huawei.agconnect' 

buildscript {
    repositories {
        ...
        maven {url 'https://developer.huawei.com/repo/'} 
    }
    dependencies {
        ...
        classpath 'com.huawei.agconnect:agcp:1.2.1.301' 
    }
}

allprojects {
    repositories {
        ...
        maven {url 'https://developer.huawei.com/repo/'} 
    }
}
...
dependencies {
    implementation fileTree(dir: 'libs', include: '*.jar')
    // SUB-PROJECT DEPENDENCIES START
    ...
    implementation "com.huawei.hms:push:4.0.3.301"
    // SUB-PROJECT DEPENDENCIES END
}

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


Validate the integration


To verify that the integration was successful, do the following:


Verify files


  1. In the case of integrating google services from Android Studio, in the project tab, verify that the google-services.json file has been correctly imported into the root of the project.


Google-services.json imported Android Studio Project

  1. In the case of integrating Huawei services, from Android Studio, in the project tab, verify that the agconnect-services.json file has been correctly imported into the root of the project.


agconnect-services.json imported Android Studio Project


Modifications with Ionic

In case of integrating with Ionic and / or Ionic capacitor, the integration is done in the same way, only the mode of instantiating the plugin changes, for example the init would be as follows:


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


  1. In the case of Android, it may not find the google-services.json configuration file in the root of the project, so in that case it will give you an error trace with the correct path, which is The next:


Cordova project google services

  1. In iOS, the following method must be modified from the indigitall-cordova-plugin/src/ios/AppDelegate+indigitall.m file:


Cordova project appDelegate


Validation

  1. Send a notification from the indigitall console. It is possible that the device counter appears at 0 in the console. Don't worry, it may take a few minutes to update, but you don't have to wait, the push should still arrive.



  1. Next go to the Logcat tab and look for the PUT / device call containing the parameters appKey, deviceId and pushToken and that returns HTTP 200.



Resources