Configuración de notificaciones push para aplicaciones React Native con PushEngage

El SDK de PushEngage para React Native simplifica la integración de notificaciones push en tus aplicaciones React Native, ofreciendo soporte perfecto para Android e iOS. Ofrecemos tres frameworks para implementar notificaciones push en aplicaciones: React, Native y Flutter. Puedes encontrar guías para notificaciones push de aplicaciones Native Android, iOS y Flutter para más ayuda.

6. Descarga el archivo google-services.json y colócalo en la raíz de tu módulo de aplicación Android en android/app/.

Antes de empezar

Aquí tienes una lista de cosas que necesitarás

• Un proyecto de React Native y soporte de turbo modules. Si no tienes una cuenta, puedes registrarte  aquí.
• Una cuenta de Firebase con Firebase Cloud Messaging (FCM) configurado para Android.
• Una cuenta de desarrollador de Apple para configurar los servicios de Apple Push Notification (APN) para iOS.

Instalación del SDK de PushEngage para React Native

Puedes instalar el SDK de PushEngage para React Native usando npm o yarn

npm install @pushengage/pushengage-react-native

Para React Native 0.77.0 o anterior

Si estás utilizando la versión 0.77.0 o anterior de React Native, usa la versión 0.0.1 del SDK como se muestra a continuación:

npm install @pushengage/[email protected]

Configuración de Android

Configuración de Firebase Cloud Messaging (FCM)

Para habilitar las notificaciones push para Android, necesitarás configurar Firebase Cloud Messaging (FCM)

1. Accede a la consola de Firebase usando tu cuenta de Google.

2. Haz clic en "Añadir proyecto" para crear un nuevo proyecto, o selecciona un proyecto existente de tu lista. Si estás usando un proyecto existente, procede directamente al paso 4.

3. Introduce un nombre para tu proyecto y haz clic en Continuar. Completa el proceso de configuración haciendo clic en "Crear proyecto" en la pantalla final.

4. En el panel de tu proyecto de Firebase, haz clic en el icono de Android para añadir una aplicación Android.

5. Introduce el nombre del paquete de tu aplicación Android (se encuentra en android/app/build.gradle bajo el bloque de android) y proporciona un nombre para la aplicación. Haz clic en Registrar cuando hayas terminado.

6. Descarga el archivo google-services.json y colócalo en la raíz del módulo de tu aplicación Android en android/app/.

7. Genera la clave privada del archivo JSON de la cuenta de servicio

• En la consola de Firebase, haz clic en el icono de Configuración junto a "Resumen del proyecto" en la parte superior izquierda, luego selecciona Configuración del proyecto.
• Navega a la pestaña Cuentas de servicio.
• Haz clic en Generar nueva clave privada y descarga el archivo .json.
• Mantén este archivo seguro, ya que lo necesitarás para la configuración del panel de PushEngage.

8. Recuperar ID del remitente

• En la consola de Firebase, haz clic en el icono de Configuración junto a Resumen del proyecto en la parte superior izquierda y selecciona "Configuración del proyecto."
• Selecciona la pestaña Cloud Messaging. Aquí encontrarás el ID del remitente, que es necesario para la inicialización del SDK de PushEngage.

Integrar FCM con PushEngage

Para integrar sin problemas los detalles de FCM con el Panel de PushEngage, puedes seguir los pasos a continuación.

1. Accede a tu cuenta de PushEngage iniciando sesión

2. En la navegación izquierda, ve a Configuración » Instalación. Elige SDK de Android

3. De la lista de plataformas disponibles, elige la opción SDK de Android para configurar las notificaciones push para Android.

4. Configurar ajustes de FCM – Introduce tu ID de remitente de Firebase (obtenido de la Consola de Firebase). Sube el archivo JSON de la cuenta de servicio (descargado de Firebase). Haz clic en el botón Actualizar para guardar estos ajustes.

5. Después de configurar los ajustes de FCM, se te proporcionará un ID de aplicación. Copia este ID de aplicación ya que es necesario para inicializar el SDK de PushEngage para Android en tu aplicación Flutter.

Configuración de iOS

Puedes seguir los pasos después de abrir tu_nombre_de_proyecto » iOS » tu_nombre_de_proyecto.xcworkspace.

Paso 1: Habilitar notificaciones remotas

1. Abre tu proyecto de Xcode y selecciona el proyecto raíz en el Navegador de Proyectos.

2. Elige tu objetivo de aplicación principal.

3. Navega a “Signing & Capabilities.“

4. Asegúrate de que la capacidad Background Modes esté añadida. Si no es así, añádela haciendo clic en el botón “+ Capability“.

5. De forma similar, asegúrate de que la capacidad Push Notifications esté añadida. Si no es así, añádela usando el botón “+ Capability“.

Si la capacidad “Notificaciones Push” no es visible en Xcode:

1. Ve a tu cuenta de desarrollador de Apple.

2. Navega a “Certificates, Identifiers & Profiles.“

3. Selecciona el identificador de tu app.

4. Edita la configuración de tu App ID y asegúrate de que Push Notifications esté habilitado.

5. Vuelve a Xcode e intenta añadir la capacidad Push Notifications de nuevo.

Paso 2: Habilitar Modos en Segundo Plano

1. En tu proyecto de Xcode, navega a “Signing & Capabilities.“

2. Dentro de “Background Modes“, habilita tanto “Remote notifications” como “Background fetch.“

Este paso asegura que tu aplicación pueda manejar notificaciones remotas y extracciones en segundo plano de manera eficiente.

Crear certificado APNs para iOS

Puedes consultar la guía aquí para crear un certificado APNs para iOS si aún no tienes uno.

Añadir extensión Notification Service y extensión Notification Content

Esto solo es aplicable para dispositivos iOS.

Creación de la Extensión de Servicio de Notificaciones

La Extensión de Servicio de Notificaciones mejora la capacidad de tu aplicación iOS para recibir notificaciones. Se utiliza para modificar el contenido de la notificación o para obtener/procesar cualquier dato al recibir la notificación. Sigue estos pasos para crear una Extensión de Servicio de Notificaciones:

1. Abre Xcode y navega a tu proyecto.

2. Selecciona File » New » Target en el menú.

3. En la ventana de selección de plantillas, elige Notification Service Extension y haz clic en Next.

4. Proporciona un nombre para tu extensión, por ejemplo, PushEngageNotificationServiceExtension, y haz clic en Finish. 

Una vez que termines de crear la Notification Service Extension, es posible que se te pida activarla. No la actives inmediatamente.

5. En el navegador de proyectos, selecciona el directorio del proyecto de nivel superior y selecciona el destino NotificationServiceExtension en el proyecto de la lista de destinos creada en el paso 4.

6. Establece el Deployment Target en iOS 10 o superior, que es la versión de iOS en la que Apple lanzó el soporte para esta extensión. 

Inicialización del SDK de PushEngage para la Extensión de Servicio de Notificaciones

Para asegurar el correcto funcionamiento del SDK de PushEngage en tu Notification Service Extension de iOS, sigue estos pasos:

1. Abre your_project_name » ios » Podfile.

2. Añade lo siguiente al bloque post_install del destino principal de la app

 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,
      # :ccache_enabled => true
    )
      installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
          config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'
         end
      end
  end

3. Añade al final del archivo

target 'Your_Notification_Service_Extension_Name' do
  pod 'PushEngage', '~>0.0.5'
end

4. Instala la dependencia

pod repo update 
pod install  

5. En tu destino Notification Service Extension, asegúrate de importar el framework PushEngage y añadir el código de inicialización necesario.

Swift

import UserNotifications
import PushEngage

@available(iOSApplicationExtension 10.0, *)
class PushEngageNotificationServiceExtension: UNNotificationServiceExtension {

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

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.request = request
        self.contentHandler = contentHandler
        self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
        
        if let bestContent = bestAttemptContent {
            PushEngage.didReceiveNotificationExtensionRequest(request, bestContentHandler: bestContent)
            contentHandler(bestContent)
        }
    }
    
    override func 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.
        if let contentHandler = contentHandler, let request = request ,let bestAttemptContent =  bestAttemptContent {
            guard let content = PushEngage.serviceExtensionTimeWillExpire(request, content: bestAttemptContent) else {
                contentHandler(bestAttemptContent)
                return
            }
            contentHandler(content)
        }
    }

}

Creación de la Extensión de Contenido de Notificaciones

Para mejorar la forma añadiendo una interfaz de usuario personalizada, necesitarás crear una Notification Content Extension. Sigue los pasos a continuación para configurar la extensión:

1. En Xcode, ve a File » New » Target.

2. Selecciona Notification Content Extension y haz clic en Siguiente.

3. No selecciones "Activar" en el diálogo que aparece después de hacer clic en Finalizar. Cancelar mantiene Xcode depurando tu aplicación en lugar de la extensión. Si la activas accidentalmente, vuelve a depurar tu aplicación dentro de Xcode (junto al botón de ejecutar).

4. En el navegador de proyectos, selecciona el directorio raíz del proyecto y selecciona el target de NotificationContentExtension en el proyecto de la lista de targets creada en el paso nº 2.

5. Establece el Deployment Target a iOS 10 o superior, que es la versión de iOS en la que Apple lanzó el soporte para esta extensión. 

Inicialización del SDK de PushEngage para la Extensión de Contenido de Notificaciones

Para asegurar el correcto funcionamiento del SDK de PushEngage en tu Notification Content Extension de iOS, sigue estos pasos:

1. Abre your_project_name » iOS » Podfile.

2. Añade lo siguiente en la parte inferior de tu Podfile:

target 'Your_Notification_Content_Extension_Name' do
  pod 'PushEngage', '0.0.5'
end

3. Instala la dependencia:

cd al directorio ios de tu proyecto y ejecuta el siguiente comando

pod repo update 
pod install 

4. En tu target de Notification Content Extension, asegúrate de importar el framework PushEngage y añadir el código de inicialización necesario. Aquí te mostramos cómo hacerlo con algunos ejemplos de elementos de UI:

Swift

import UIKit
import UserNotifications
import UserNotificationsUI
import PushEngage

@available(iOSApplicationExtension 10.0, *)
class NotificationViewController: UIViewController, UNNotificationContentExtension {
    
    fileprivate var hostingView: UIHostingController<ContentView>?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
    }
    
    func didReceive(_ notification: UNNotification) {
        if(notification.request.content.categoryIdentifier == "your_identifier"){
            let payLoad = PushEngage.getCustomUIPayLoad(for: notification.request)
  //pass the payload to your custom View
            let view = CustomView(payLoadInfo: payLoad)
            hostingView = UIHostingController(rootView: view)
If let customView = self.hostingView {
            addChild(hostingView!)
}
        }
    }
    
}

Añadir Grupos de Aplicaciones

Los Grupos de Aplicaciones son esenciales para permitir la comunicación entre la aplicación principal, la extensión del servicio de notificaciones y la extensión del contenido de notificaciones. Sigue estos pasos para añadir Grupos de Aplicaciones a tu proyecto de iOS:

Si tienes un grupo de aplicaciones existente y deseas usar el mismo, puedes saltar al paso núm. 4.

1. En tu proyecto de Xcode, en el navegador de proyectos, selecciona el directorio raíz del proyecto y selecciona el target principal de la aplicación.

2. Navega a la pestaña Signing & Capabilities.

3. Haz clic en el botón “+ Capability” y selecciona App Groups de la lista.

4. Haz clic en el botón + para añadir un Grupo de Aplicaciones.

5. Añade un nombre único a tu Grupo de Aplicaciones y haz clic en OK.

6. En el área principal del editor, selecciona el target principal de tu aplicación. Si has creado un grupo de aplicaciones, por favor proporciona el nombre del grupo en el Info.plist de tu aplicación con la clave PushEngage_App_Group_Key.

7. Añade la misma clave y valor en el archivo Info.plist de la Notificación Service Extension.

8. Asegúrate de seleccionar el mismo grupo de apps tanto en el Objetivo Principal de la Aplicación como en la Your_Notification_Service_Extension.

Inicializar PushEngage SDK

En tu index.js, inicializa el SDK de PushEngage.

import PushEngage from 'pushengage-react-native';
PushEngage.setAppId('your-app-id');

En tu AppDelegate.mm de la aplicación iOS

@import PushEngage;

@implementation AppDelegate

- (instancetype)init
{
    self = [super init];
    if (self) {
        [PushEngage swizzleInjectionWithIsEnabled: YES];
    }
    return self;
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"PushengageReactNativeExample";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};
  [PushEngage setInitialInfoFor:application with:launchOptions];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
    completionHandler(UIBackgroundFetchResultNewData);
}

Manejo de deepLink

Escucha los eventos de deep link y manéjalos en tu aplicación

const listenerSubscription = React.useRef<null | EventSubscription>(null);

  React.useEffect(() => {
    listenerSubscription.current = PushEngage.onValueChanged((data) => {
      Alert.alert(`Deeplink: ${data.deepLink}`);
      console.log('Data:', data.data);
    });

    return () => {
      listenerSubscription.current?.remove();
      listenerSubscription.current = null;
    };
  }, []);

Solución de Problemas

Añade -fcxx-modules en Other C++ flags para el error: use of ‘@import’ when c++ modules are disabled, consider using -fmodules and -fcxx-modules  bajo Build Settings del proyecto iOS.

Si quieres explorar más capacidades del SDK de iOS, puedes consultar nuestra detallada documentación de la API.

Si encuentra algún problema, por favor contáctenos haciendo clic aquí. Nuestro equipo de soporte podrá ayudarle.