Documentación de PushEngage

Documentación, Materiales de Referencia y Tutoriales para PushEngage

Configuración de notificaciones push de aplicaciones en Flutter usando PushEngage

El SDK de Flutter de PushEngage facilita la integración de notificaciones push en tus aplicaciones Flutter, proporcionando compatibilidad perfecta con las plataformas Android e iOS.

Esta guía te guiará a través de los pasos para configurar el SDK de Flutter de PushEngage y habilitar las notificaciones push en tus aplicaciones Android e iOS.

Antes de empezar

Aquí tienes una lista de cosas que necesitarás

  • Un proyecto Flutter y una cuenta de PushEngage. 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

1. Abre tu proyecto Flutter en tu editor de código.

2. Añade la siguiente dependencia en tu archivo pubspec.yaml:

dependencies:
	pushengage_flutter_sdk: ^0.0.1

3. Ejecuta el siguiente comando para instalar el paquete.

dependencies:
flutter pub get

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. Crea un nuevo proyecto o selecciona un Proyecto existente: Haz clic en "Añadir Proyecto" para crear un nuevo proyecto, o selecciona un proyecto existente de tu lista. Si estás utilizando un proyecto existente, procede directamente al paso 4.

3. Introduce los detalles del proyecto: Añade 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. Añade una aplicación Android al Proyecto: En el panel de tu proyecto Firebase, haz clic en el icono de Android para añadir una aplicación Android.

5. Configura la aplicación Android: Introduce el nombre del paquete de tu aplicación Android (que 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 de configuración: Descarga el archivo google-services.json y colócalo en la raíz de tu módulo de 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. Recupera el 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.

Integra FCM con el panel de PushEngage

Para integrar sin problemas los detalles de FCM con el panel de PushEngage, sigue los pasos descritos a continuación:

  1. Accede a tu cuenta de PushEngage iniciando sesión con tus credenciales.
  1. Navega a Ajustes » Instalación y elige la pestaña Android SDK
  1. Ahora, Configura los Ajustes de FCM
  • Introduce tu Firebase Sender ID (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. Copia el ID de la aplicación: 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

Configuración del proyecto

Te pedimos que sigas los pasos a continuación después de abrir tu proyecto.

Aquí te mostramos cómo abrir un proyecto: tu_nombre_de_proyecto » iOS » Runner.xcworkspace.

1. Habilita las Notificaciones Remotas

  • Abre tu proyecto de Xcode y selecciona el proyecto raíz en el Navegador de Proyectos.
  • Elige tu destino de aplicación principal.
  • Navega a “Firmado y Capacidades.“
  • Asegúrate de que la capacidad de Modos en Segundo Plano esté añadida. Si no es así, añádela haciendo clic en el botón “+ Capacidad“.
  • De manera similar, asegúrate de que la capacidad de Notificaciones Push esté añadida. Si no es así, añádela usando el botón “+ Capacidad“.

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

  • Ve a tu cuenta de desarrollador de Apple.
  • Navega a “Certificados, Identificadores y Perfiles.” Selecciona el identificador de tu aplicación.
  • Edita la configuración de tu ID de aplicación y asegúrate de que las Notificaciones Push estén habilitadas.
  • Regresa a Xcode e intenta añadir la capacidad de Notificaciones Push de nuevo.

2. Habilita los Modos en Segundo Plano

  • En tu proyecto de Xcode, navega a “Firmado y Capacidades.“
  • Dentro de “Modos en Segundo Plano“, habilita tanto “Notificaciones remotas” como “Extracción en segundo plano.“
  • Este paso asegura que tu aplicación pueda manejar notificaciones remotas y extracciones en segundo plano de manera eficiente.

Si no tienes un certificado APN para iOS, puedes crear uno usando la guía aquí.

A continuación, necesitas añadir la extensión de Servicio de Notificaciones y la extensión de Contenido de Notificaciones solo para 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 Archivo » Nuevo » Destino 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.

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

5. Cuando termines de crear la Notification Service Extension, es posible que se te pida que la actives. No la actives inmediatamente, ya que activar la extensión cambiaría el enfoque de depuración de Xcode de tu aplicación a la extensión. Si la activas por accidente, no te preocupes; puedes volver a depurar tu aplicación dentro de Xcode.

6. 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 n.º 4.

7. 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, por favor sigue los pasos a continuación.

  1. Abre tu_nombre_de_proyecto » ios » Podfile.
  2.  Añade lo siguiente al final de tu Podfile:
post_install do |installer|

  installer.pods_project.targets.each do |target|

    flutter_additional_ios_build_settings(target)

    target.build_configurations.each do |config|

      config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'

     end

  end

end

target 'Your_Notification_Service_Extension_Name' do

  use_frameworks!

  pod 'PushEngage', '~>0.0.4'

end
  1. Instala la dependencia:

Ahora necesitas introducir comandos en el directorio iOS de tu proyecto y ejecutar el siguiente comando:

pod repo update 

pod install
  1. En tu destino de Notification Service Extension, asegúrate de importar el framework PushEngage y añadir el código de inicialización necesario. Aquí te mostramos cómo hacerlo usando 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 Next.

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:

Abre tu_nombre_de_proyecto » iOS » Podfile.

Añade lo siguiente al final de tu Podfile:

target 'Your_Notification_Content_Extension_Name' do
  use_frameworks!
  pod 'PushEngage', '0.0.4'
end
  1. Instala la dependencia: Aquí tienes el código que necesitas ejecutar en tu línea de comandos.

e

pod repo update 
pod install
  1. En tu destino 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 usando 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 solo quieres usar ese, salta al paso n.º 4.

  1. En tu proyecto de Xcode, en el navegador de proyectos, selecciona el directorio del proyecto de nivel superior y selecciona el destino 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 objetivo principal de tu app.  se creó un grupo de apps, proporciona el nombre del grupo en tu archivo Info.plist de la 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 main.dart, inicializa el PushEngage SDK.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    PushEngage.setAppId("your_pushengage_app_id");
  }
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'PushEngage',
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

En tu AppDelegate.swift de la app iOS

import Flutter
import UIKit
import PushEngage

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    
    override init() {
        super.init()
        PushEngage.swizzleInjection(isEnabled: true)
    }
    
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        if #available(iOSApplicationExtension 10.0, *) {
            UNUserNotificationCenter.current().delegate = self
        }
        GeneratedPluginRegistrant.register(with: self)
        PushEngage.setBadgeCount(count: 0)
        PushEngage.setNotificationWillShowInForegroundHandler { notification, completion in
            if notification.contentAvailable == 1 {
                // in case developer failed to set completion handler. After 25 sec handler will call.
                completion(nil)
            } else {
                completion(notification)
            }
        }
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

Manejo de deepLink

Un deepLinkStream es algo que emite datos de deep link. 

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late StreamSubscription _deepLinkSubscription;

  @override
  void initState() {
    super.initState();
    PushEngage.deepLinkStream.listen((data) {
      _handleDeepLink(data);
    });
  }

  void _handleDeepLink(Map<String, dynamic>? data) {
    // Parse the deep link and navigate accordingly
    Uri uri = Uri.parse(data?['deepLink']);
    print('Path: ${uri.path}');
    updateResponseText(data.toString());
    switch (uri.path) {
      case 'trigger':
      case '/trigger':
        print(‘your_implementation’)
        break;
    }
  }

c

i

Eso es todo, ahora has integrado con éxito el SDK de Flutter para la App de Android y iOS.

Si encuentras algún problema, por favor contáctanos haciendo clic aquí. Nuestro equipo de soporte podrá ayudarte.

¿Sigues atascado? ¿Cómo podemos ayudarte?
Última actualización el 9 de marzo de 2026

Atrae y retén visitantes después de que hayan abandonado tu sitio web

Aumenta el valor de cada visita web con Notificaciones Push que son difíciles de ignorar.

Prueba PushEngage
  • Plan Gratuito para Siempre
  • Configuración Sencilla
  • Soporte 5 Estrellas

Más de 100 mil millones de notificaciones enviadas

100% Seguro y Cumple con el RGPD

Con la confianza de clientes en más de 150 países