EN

  |  ES

/Guía Rápida de Integración /Notificaciones app push /Cordova

Integración Cordova

Guía rápida de integración del SDK de Cordova.


Tabla de contenidos



¿Qué necesitas para la integración?


Es importante ya que el proyecto contiene los datos de configuración de tu aplicación, es decir, el dominio donde esta alojada tu web, los certificados de safari o iOS o la clave de firebase que usa android. Todo depende de las plataformas (web o app) que use el proyecto.


Integración


Este artículo muestra el desarrollo mínimo que hay que hacer para comenzar a registrar dispositivos y poder realizar las primeras campañas push.


La SDK de Indigitall es compatible con los servicios de mensajería de Google, mediante la plataforma Firebase y con los servicios de HMS o Huawei Mobile Services de Huawei.


Puedes verlo en ente vídeo tutorial o leer las instrucciones más abajo:




Nuestro SDK está disponible a través de npm.

npm (Node Package Manager) es un sistema de gestión de paquetes. Consiste en un cliente de línea de comandos y una base de datos en línea de paquetes públicos y privados.


Importar el plugin


Para importar el SDK a tu proyecto realiza estos pasos:


  1. Abre la consola y posicionate en la raíz del proyecto.


$ cd /PATH/TO/YOUR/PROJECT


  1. Ejecuta esta línea en la consola para importar el plugin:


$ cordova plugin add indigitall-cordova-plugin


Configuración para Android


Si no quieres compilar tu proyecto Cordova para dispositivos Android, puedes saltarte este punto.

En caso contrario realiza estos pasos:


Añadiendo los Servicios de Firebase


  1. Para comenzar necesitas un fichero llamado google-services.json. Este fichero lo podrás exportar desde la consola de Firebase.

  2. Muévelo a la carpeta raíz de tu proyecto. Deberías tener algo parecido a esto:


Estructura de ficheros del proyecto Cordova

  1. Añade el siguiente código en el fichero config.xml dentro de la sección android.


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


  1. Una vez creado el proyecto de android, hay que añadir en el manifest de la aplicación, que se encuentra en la siguiente ruta:


Estructura de ficheros del proyecto Cordova


  1. Añadir las siguientes líneas:


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


  1. También hay que editar el build.gradle de la aplicación, que se encuentra en la siguiente ruta:


Estructura de ficheros del proyecto Cordova


  1. Añade las siguiente líneas:



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
}


Añadiendo los Servicios de HMS


  1. Para comenzar necesitas un fichero llamado agconnect-services.json. Este fichero lo podrás exportar desde la consola para desarrolladores de Huawei.

  2. Muévelo a la carpeta raíz de tu proyecto. Deberías tener algo parecido a esto:


Estructura de ficheros del proyecto Cordova

  1. Añade el siguiente código en el fichero config.xml dentro de la sección android.


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

    ...
</platform>


  1. Una vez creado el proyecto de android, hay que añadir en el manifest de la aplicación, que se encuentra en la siguiente ruta:


Estructura de ficheros del proyecto Cordova


  1. Añadir las siguientes líneas:


<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. También hay que editar el build.gradle de la aplicación, que se encuentra en la siguiente ruta:


Estructura de ficheros del proyecto Cordova


  1. Añade las siguiente líneas:


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
}


Configuración para iOS


Desde la salida de iOS 10, las apps pueden gestionar notificaciones push enriquecidas, es decir, con imágen, gif, vídeo, botones, etc.

Para poder hacer uso de estas funcionalidades, tu app necesita implementar el Notification Service Extension.


  1. Añade un nuevo Notification Service Extension a tu proyecto (Xcode: Archivo > Nuevo > Target).
  2. Añade el extension target en tu aplicación.
  3. Crea un nuevo fichero llamado NotificationService dentro de este target. Sobrescribe todo el contenido con el siguiente código:


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


Inicialización del SDK


Inicializa el SDK con el método indigitall.init() para comenzar a recibir notificaciones push. Esta inicialización debe realizarse dentro del index.html de tu proyecto.


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



Consola de Firebase Consola de Firebase


Validar la integración


Para comprobar que la integración se ha realizado correctamente realiza lo siguiente:


  1. En el caso de integrar los servicios de google desde Android Studio, en la pestaña project, verifica que en la raíz del proyecto se ha importado correctamente el archivo google-services.json.


Google-services.json importado Proyecto Android Studio

  1. En el caso de integrar los servicios de Huawei, desde Android Studio, en la pestaña project, verifica que en la raíz del proyecto se ha importado correctamente el archivo agconnect-services.json.


agconnect-services.json importado Proyecto Android Studio

  1. A continuación ve a la pestaña Logcat y busca la llamada PUT /device conteniendo los parámetros appKey, deviceId y pushToken y que devuelva HTTP 200.




  1. Envia una notificación desde la consola de indigitall. Es posible que en la consola el contador de dispositivos aparezca a 0. No te preocupes, puede tardar unos minutos en actualizarse, pero no hace falta que esperes, la push debería llegar igualmente.




Siguientes pasos