Cómo manejar notificaciones push avanzadas con Firebase Cloud Messaging y Flutter

Las notificaciones push son una de las formas más efectivas de interactuar con los usuarios, manteniéndolos informados y comprometidos incluso cuando no están usando activamente la aplicación. Firebase Cloud Messaging (FCM) es una herramienta poderosa para enviar notificaciones push a tus usuarios. En este artículo, exploraremos cómo manejar notificaciones push avanzadas en Flutter usando FCM, cubriendo características como notificaciones de datos, mensajes personalizados, y la gestión de notificaciones en segundo plano.

🚀 Paso 1: Recordatorio sobre la configuración básica de FCM en Flutter

Antes de empezar con las notificaciones avanzadas, asegúrate de tener configurado FCM en tu proyecto Flutter. Si no lo has hecho aún, sigue los pasos de la configuración básica de FCM que cubrimos en artículos anteriores. Asegúrate de que las dependencias necesarias estén incluidas:

dependencies:
  firebase_core: ^2.25.0
  firebase_messaging: ^14.0.0
  flutter_local_notifications: ^11.0.0

🧩 Paso 2: Enviar notificaciones personalizadas con Firebase

Para enviar notificaciones personalizadas desde el servidor de Firebase a tus usuarios, puedes usar Firebase Cloud Messaging con parámetros adicionales en el mensaje. Esto te permitirá incluir datos específicos para personalizar el comportamiento de la notificación.

Ejemplo de notificación personalizada con datos:

Desde la consola de Firebase, puedes enviar un mensaje personalizado que incluya datos extra. Aquí tienes un ejemplo de cómo hacerlo mediante la API de FCM:

import 'package:firebase_messaging/firebase_messaging.dart';
Future<void> sendCustomNotification() async {
  final String? token = await FirebaseMessaging.instance.getToken();
  final message = RemoteMessage(
    notification: RemoteNotification(
      title: '¡Oferta Especial!',
      body: '¡Consigue un 30% de descuento en tu próxima compra!',
    ),
    data: {
      'discount_code': '30OFF',
      'product_id': '12345',
    },
    token: token!,
  );
  FirebaseMessaging.instance.sendMessage(message);
}

🔒 Paso 3: Manejo de notificaciones de datos

Las notificaciones de datos son mensajes que no contienen un cuerpo visible, pero incluyen datos adicionales que puedes utilizar para realizar acciones en segundo plano o modificar la interfaz de usuario. Estos mensajes no activan una notificación de forma predeterminada, lo que te da más control sobre cómo manejar los datos.

Ejemplo de notificación de datos en segundo plano:

Cuando tu aplicación está en segundo plano o cerrada, puedes recibir mensajes de solo datos. A continuación, te mostramos cómo configurar el manejo de mensajes de solo datos:

FirebaseMessaging.onBackgroundMessage((RemoteMessage message) async {
  // Este método se ejecuta cuando la app está en segundo plano o cerrada
  if (message.data.isNotEmpty) {
    print('Datos del mensaje: ${message.data}');
    // Realizar acciones basadas en los datos del mensaje
    String discountCode = message.data['discount_code'] ?? '';
    String productId = message.data['product_id'] ?? '';
    // Lógica para mostrar una notificación personalizada, actualizar la interfaz, etc.
  }
});

📲 Paso 4: Notificaciones con imágenes y botones personalizados

Puedes mejorar la experiencia de usuario al agregar imágenes y botones interactivos a tus notificaciones. Usando el paquete flutter_local_notifications, puedes mostrar imágenes, botones y acciones personalizadas.

Ejemplo de notificación con imagen y botones:

Future<void> showCustomNotificationWithImage(RemoteMessage message) async {
  final notificationDetails = NotificationDetails(
    android: AndroidNotificationDetails(
      'your_channel_id',
      'your_channel_name',
      importance: Importance.max,
      priority: Priority.high,
      styleInformation: BigPictureStyleInformation(
        FilePathAndroidBitmap('assets/images/offer_image.jpg'),
        contentTitle: message.notification?.title,
        summaryText: message.notification?.body,
      ),
    ),
  );
  await flutterLocalNotificationsPlugin.show(
    0,
    message.notification?.title,
    message.notification?.body,
    notificationDetails,
  );
}

🔐 Paso 5: Gestionar notificaciones con botones interactivos

Las notificaciones push pueden incluir botones de acción que permiten al usuario interactuar directamente con ellas. Usando el paquete flutter_local_notifications, puedes agregar botones que realicen acciones específicas.

Ejemplo de notificación con botones:

Future<void> showNotificationWithActionButtons(RemoteMessage message) async {
  final notificationDetails = NotificationDetails(
    android: AndroidNotificationDetails(
      'your_channel_id',
      'your_channel_name',
      importance: Importance.max,
      priority: Priority.high,
      actions: [
        AndroidNotificationAction(
          'action_accept',
          'Aceptar',
          icon: 'ic_accept',
        ),
        AndroidNotificationAction(
          'action_decline',
          'Rechazar',
          icon: 'ic_decline',
        ),
      ],
    ),
  );
  await flutterLocalNotificationsPlugin.show(
    0,
    message.notification?.title,
    message.notification?.body,
    notificationDetails,
  );
}

📅 Paso 6: Programación de notificaciones push

Si deseas enviar notificaciones push en un horario específico o en intervalos programados, puedes hacerlo utilizando flutter_local_notifications. A continuación te mostramos cómo programar una notificación para que se envíe en el futuro:

Ejemplo de programación de notificación:

Future<void> scheduleNotification() async {
  final scheduledDate = DateTime.now().add(Duration(seconds: 5)); // 5 segundos desde ahora
  final notificationDetails = NotificationDetails(
    android: AndroidNotificationDetails(
      'your_channel_id',
      'your_channel_name',
      importance: Importance.max,
      priority: Priority.high,
    ),
  );
  await flutterLocalNotificationsPlugin.zonedSchedule(
    0,
    '¡No olvides tu descuento!',
    'Obtén 20% de descuento hoy',
    scheduledDate,
    notificationDetails,
    androidAllowWhileIdle: true,
    uiLocalNotificationDateInterpretation: UILocalNotificationDateInterpretation.wallClockTime,
  );
}

🎯 Paso 7: Manejo de notificaciones con Firebase Analytics

Una de las ventajas de usar FCM es la integración con Firebase Analytics. Puedes analizar las interacciones de los usuarios con las notificaciones y realizar un seguimiento de su efectividad.

Asegúrate de integrar Firebase Analytics y utilizar la función logEvent() para analizar los clics en las notificaciones. Por ejemplo, cuando un usuario interactúa con una notificación, puedes registrar ese evento:

import 'package:firebase_analytics/firebase_analytics.dart';
final FirebaseAnalytics analytics = FirebaseAnalytics();
Future<void> logNotificationClick(String notificationId) async {
  await analytics.logEvent(
    name: 'notification_clicked',
    parameters: {
      'notification_id': notificationId,
    },
  );
}

🎉 Conclusión

Ahora sabes cómo manejar notificaciones push avanzadas en Flutter usando Firebase Cloud Messaging. Desde notificaciones personalizadas y de solo datos, hasta notificaciones con imágenes, botones interactivos y programación de mensajes, FCM ofrece muchas características para mejorar la interacción del usuario.

Con estos conocimientos, puedes llevar la experiencia de usuario de tu aplicación al siguiente nivel y asegurarte de que tus usuarios siempre estén comprometidos.

Buscar este blog

Integrando Firebase en tu app Flutter: Autenticación, Base de Datos y Más