En este tema, aprenderemos cómo enviar notificaciones utilizando Firebase Cloud Messaging (FCM). Las notificaciones son una herramienta poderosa para mantener a los usuarios comprometidos y actualizados con la información relevante de tu aplicación. Vamos a cubrir los siguientes puntos:

1. Configuración inicial de FCM
2. Envío de notificaciones desde la consola de Firebase
3. Envío de notificaciones desde el servidor
4. Personalización de notificaciones

Antes de enviar notificaciones, es necesario configurar Firebase Cloud Messaging en tu proyecto. Sigue estos pasos:

1. Crear un proyecto en Firebase Console:

   • Ve a Firebase Console.
   • Haz clic en "Agregar proyecto" y sigue las instrucciones para crear un nuevo proyecto.

2. Agregar la aplicación a Firebase:

   • Selecciona tu proyecto y haz clic en "Agregar aplicación" (iOS, Android o Web).
   • Sigue las instrucciones para registrar tu aplicación y descargar el archivo de configuración (google-services.json para Android o GoogleService-Info.plist para iOS).

3. Incluir el archivo de configuración en tu proyecto:

   • Para Android, coloca google-services.json en el directorio app/.
   • Para iOS, arrastra GoogleService-Info.plist a tu proyecto en Xcode.

4. Agregar dependencias de Firebase:

   • Para Android, agrega las siguientes dependencias en tu archivo build.gradle:

     implementation 'com.google.firebase:firebase-messaging:23.0.0'
     

   • Para iOS, usa CocoaPods para instalar Firebase Messaging:

     pod 'Firebase/Messaging'
     

1. Android:

   • Asegúrate de que tu AndroidManifest.xml contenga los permisos necesarios:

     <uses-permission android:name="android.permission.INTERNET"/>
     <uses-permission android:name="android.permission.WAKE_LOCK"/>
     <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
     

2. iOS:

   • Solicita permiso para recibir notificaciones en tu AppDelegate:

     import Firebase
     import UserNotifications
     
     @UIApplicationMain
     class AppDelegate: UIResponder, UIApplicationDelegate, UNUserNotificationCenterDelegate {
     
         func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
             FirebaseApp.configure()
     
             UNUserNotificationCenter.current().delegate = self
             let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
             UNUserNotificationCenter.current().requestAuthorization(options: authOptions, completionHandler: {_, _ in })
     
             application.registerForRemoteNotifications()
     
             return true
         }
     }
     

La forma más sencilla de enviar notificaciones es a través de la consola de Firebase. Sigue estos pasos:

1. Acceder a la consola de Firebase:

   • Ve a Firebase Console.
   • Selecciona tu proyecto.

2. Navegar a Cloud Messaging:

   • En el menú de la izquierda, selecciona "Cloud Messaging".

3. Crear un nuevo mensaje:

   • Haz clic en "Enviar tu primer mensaje" o "Nuevo mensaje".
   • Completa los campos necesarios:
     • Título: El título de la notificación.
     • Texto: El cuerpo de la notificación.
     • Segmentación: Selecciona los destinatarios (todos los usuarios, usuarios específicos, etc.).

4. Enviar el mensaje:

   • Haz clic en "Siguiente" y luego en "Revisar".
   • Revisa los detalles y haz clic en "Publicar".

Para enviar notificaciones desde tu servidor, necesitas hacer una solicitud HTTP POST a la API de FCM. Aquí tienes un ejemplo en Node.js:

1. Acceder a la configuración del proyecto:

   • En la consola de Firebase, ve a "Configuración del proyecto".
   • Selecciona la pestaña "Cloud Messaging".

2. Copiar la clave del servidor:

   • Copia la clave del servidor (Server key).

1. Instalar dependencias:

   • Asegúrate de tener axios instalado:

     npm install axios
     

2. Enviar la solicitud:

   • Aquí tienes un ejemplo de cómo enviar una notificación:

     const axios = require('axios');
     
     const sendNotification = async () => {
         const serverKey = 'YOUR_SERVER_KEY';
         const fcmUrl = 'https://fcm.googleapis.com/fcm/send';
     
         const message = {
             to: 'DEVICE_TOKEN',
             notification: {
                 title: 'Hello',
                 body: 'World'
             }
         };
     
         try {
             const response = await axios.post(fcmUrl, message, {
                 headers: {
                     'Content-Type': 'application/json',
                     'Authorization': `key=${serverKey}`
                 }
             });
             console.log('Notification sent successfully:', response.data);
         } catch (error) {
             console.error('Error sending notification:', error);
         }
     };
     
     sendNotification();
     

Puedes personalizar las notificaciones para mejorar la experiencia del usuario. Aquí hay algunas opciones:

1. Iconos y sonidos personalizados:

   • Puedes especificar un icono y un sonido personalizados en el objeto notification:

     const message = {
         to: 'DEVICE_TOKEN',
         notification: {
             title: 'Hello',
             body: 'World',
             icon: 'your_icon_name',
             sound: 'your_sound_name'
         }
     };
     

2. Datos adicionales:

   • Puedes enviar datos adicionales en el objeto data:

     const message = {
         to: 'DEVICE_TOKEN',
         notification: {
             title: 'Hello',
             body: 'World'
         },
         data: {
             key1: 'value1',
             key2: 'value2'
         }
     };
     

1. Accede a la consola de Firebase y selecciona tu proyecto.
2. Navega a Cloud Messaging y crea un nuevo mensaje.
3. Completa los campos con un título y un texto de tu elección.
4. Envía la notificación y verifica que se reciba en tu dispositivo.

1. Configura un servidor Node.js y asegúrate de tener axios instalado.
2. Usa el código proporcionado para enviar una notificación a un dispositivo específico.
3. Personaliza la notificación con un icono y un sonido personalizados.

Solución al Ejercicio 1

1. Accede a la consola de Firebase y selecciona tu proyecto.
2. Navega a Cloud Messaging y haz clic en "Nuevo mensaje".
3. Completa los campos:
   • Título: "Notificación de prueba"
   • Texto: "Esta es una notificación de prueba"
4. Haz clic en "Siguiente", revisa los detalles y haz clic en "Publicar".

Solución al Ejercicio 2

1. Configura un servidor Node.js y asegúrate de tener axios instalado.
2. Usa el siguiente código para enviar una notificación:

   const axios = require('axios');
   
   const sendNotification = async () => {
       const serverKey = 'YOUR_SERVER_KEY';
       const fcmUrl = 'https://fcm.googleapis.com/fcm/send';
   
       const message = {
           to: 'DEVICE_TOKEN',
           notification: {
               title: 'Notificación de prueba',
               body: 'Esta es una notificación de prueba',
               icon: 'your_icon_name',
               sound: 'your_sound_name'
           }
       };
   
       try {
           const response = await axios.post(fcmUrl, message, {
               headers: {
                   'Content-Type': 'application/json',
                   'Authorization': `key=${serverKey}`
               }
           });
           console.log('Notification sent successfully:', response.data);
       } catch (error) {
           console.error('Error sending notification:', error);
       }
   };
   
   sendNotification();
   

En esta sección, hemos aprendido cómo enviar notificaciones utilizando Firebase Cloud Messaging. Hemos cubierto la configuración inicial, el envío de notificaciones desde la consola de Firebase y desde el servidor, así como la personalización de las notificaciones. Con estos conocimientos, puedes mantener a tus usuarios informados y comprometidos con tu aplicación. En el próximo tema, aprenderemos cómo manejar las notificaciones en la aplicación.