React Native: Integrando push notifications con Firebase Cloud Messaging
Recientemente integré push notifications usando react-native-firebase. Encontré muchos desafíos durante el proceso de integración para una implementación exitosa y me gustaría compartir con ustedes los pasos para lograrlo:
1. Creación de la aplicación en la consola
1.a. Configuración en Android
1.b. Configuración en iOS
2. Instalación del módulo (react-native-firebase)
2.a. Configuración en Android
2.b. Configuración en iOS
3. Recibiendo push notifications
Requisitos y/o recomendaciones
- Tener configurado e instalado pods en tu aplicación.
- No tener instalada la librería de react-native-push-notifications o alguna otra librería para el manejo de notificaciones.
- Crear un archivo independiente (configPushNotifications.js) para todo el manejo de notificaciones con la librería de firebase.
- Al momento de modificar archivos de los módulos nativos utilizar un IDE correspondiente para cada uno (ej. Android studio y Xcode).
1. Creación de la aplicación en la consola
Primero, debemos crear una aplicación en la consola Firebase. Para eso hay que seguir los pasos de la plataforma y agregar aplicaciones iOS y/o Android según sea necesario.
Asegúrate de que tu GoogleService-Info.plist y google-services.json estén ubicados en las carpetas correctas.
1.a. Configuración en Android
Para configurar los archivos gradle recomiendo utilizar las últimas dependencias de firebase ya que si no están actualizadas a las últimas versiones es posible que la compatibilidad de las librerías no concuerde y no funcione la configuración.
Verificar que el archivo android/build.gradlecontenga:
Y el archivo android/app/build.gradle contenga:
1.b. Configuración en iOS
En la consola de Firebase debes incluir el certificado APN(Apple Push Notification Service) en Project Settings > Cloud Messaging porque si no, no podrás recibir push notifications en iOS. Para saber cómo generar el certificado APN puedes seguir este tutorial.
Luego, hay que activar las siguientes opciones que se encuentran en Xcode:
- Push notifications
- Background Modes — Check only Remote Notifications
Ahora abrimos el podfile y agregamos las librerías de firebase:
2. Instalación del módulo de firebase (react-native-firebase)
Ejecutar el siguiente comando en la carpeta raíz de tu proyecto de React Native.
npm install --save react-native-firebase
Ahora enlazaremos el módulo de firebase con las plataformas nativas. Linkearemos manualmente el módulo de firebase con las plataformas nativas, para evitar desorden e inconvenientes con links incompletos. Además, si tenemos problemas después de la vinculación, podemos confirmar que seguimos correctamente los pasos a continuación y verificar que todo está incluido correctamente en las plataformas nativas.
2.a. Configuración en Android
Modificar el archivo MainnApplication.java
En el archivo settings.gradle agregar las siguientes líneas:
En el archivo app/build.gradle agregar la siguiente dependencia sobre las demás dependencias:
Actualizar el AndroidManifest.xml
Se agregan los permisos:
Establecer el modo de inicio de la aplicación en las propiedades de actividad:
Si queremos programar notificaciones locales, también debemos agregar lo siguiente:
Desde Android 8.0 (nivel API 26) y superior, los canales de notificación son compatibles y recomendados. FCM proporciona un canal de notificación predeterminado con ajustes básicos. Si quieres crear y usar tu propio canal predeterminado, hay que configurar default_notification_channel_id a la ID del objeto de canal de notificación como se muestra debajo; FCM utilizará este valor cuando los mensajes entrantes no establezcan explícitamente un canal de notificación.
Agregar el servicio de mensajería al manifest:
Si deseas poder reaccionar a los mensajes que son solo de datos cuando tu aplicación está en segundo plano — por ejemplo, para mostrar una notificación de heads-up — debes agregar lo siguiente:
Después de haber configurado todo correctamente podemos probar directamente desde la consola de firebase:
- Ve a la opción Cloud Messaging en el panel izquierdo.
- Haz click en Send your first message
- Ingresa tu texto de prueba, selecciona la aplicación Android a la cual deseas enviar la aplicación y haz clic en Enviar.
Después de esto ya deberías poder recibir alertas emergentes en tu aplicación Android.
2.b. Configuración en iOS
En el navegador de tu proyecto de Xcode, haz clic en Libraries > Add Files To <Proyecto>. Luego navega hacia <Proyecto>/node_modules/react-native-firebase/ios/. Selecciona el archivo RNFirebase.xcodeproj y clickea en el botón “agregar”.
También puedes navegar directamente a la ruta del archivo RNFirebase.xcodeproj y arrastrarlo hasta la carpeta Libraries en Xcode.
Luego de haber agregado la librería de react-native-firebase vamos a seguir los siguientes pasos:
- Vamos directo a la opción “Build Phases”. Click en el “+” que se encuentra debajo de “Link Binary With Libraries” para agregar una nueva librería. Agrega la librería de UserNotifications.framework. Este Framework es requerido a partir de iOs 10 para el manejo correcto de push notifications.
- Haz de nuevo click en el “+”, selecciona la librería “libRNFirebase.a” y agrégala.
- Luego vamos a la opción “Build Settings”, buscamos la sección de “Header Search Path”, hacemos doble click en el valor de éste, luego le damos click al botón “+”. Agregamos la siguiente línea:
$(SRCROOT)/../node_modules/react-native-firebase/ios/RNFirebase
En el archivo AppDelegate.h
En el archivo AppDelegate.m
3. Recibir push notifications
Ya hemos hecho toda la configuración necesaria en nuestra aplicación para poder recibir push notifications.
Antes que nada para recibir notificaciones es crucial pedirle permiso al usuario, especialmente en iOS. Si el usuario no aceptó recibir push notifications jamás se van a mostrar.
Tendremos que agregar los métodos necesarios en el componente principal de su aplicación de React Native, desde su inicialización, es decir app.js. Puedes agregar los métodos directamente en el archivo o crear otro para que se encargue específicamente de los métodos para push notifications. Esto ayudará a tener un orden.
El método CheckPermission lo llamaremos desde el componentDidMount() de nuestro app.js
Para mostrar las push notifications correctamente en nuestro Android agregaremos las siguientes líneas:
Este método recibe la notificación y la muestra, hay que agregarlo en el componentDidMount y en el componentWillUnmount.
Si quieres ejecutar alguna acción cuando hagan click a la notificación agrega este método (solo la aplicación en primer plano):
Éste, al igual que el anterior, hay que agregarlo en el componentDidMount y en el componentWillUnmount.
Si quieres ejecutar alguna acción pero tu aplicación está cerrada o en segundo plano, agrega este método:
Esto solo va en el componentDidMount.
En Android para poder mostrar correctamente las notificaciones necesitas un canal. Si quieres crearlo agrega este método y llámalo en el componentDidMount.
Recapitulando lo que acabamos de hacer:
- Creamos la aplicación en la consola de firebase.
- Hicimos la conexión de nuestra aplicación con la consola en iOS y Android.
- Instalamos el módulo de react-native-firebase.
- Enlazamos manualmente el módulo de react-native-firebase en iOS y Android.
- Hicimos toda la configuración necesaria para recibir y mostrar las push notifications en nuestra aplicación de React Native.
Si has llegado hasta aquí creo que te ha interesado el post. ¿Qué esperas para ponerlo en práctica? Suma tu comentario si tienes dudas o aportes a esta guía. ¡Cuéntanos tu experiencia!
