Cómo implementar notificaciones push en una aplicación React Native usando Sendbird Chat
Introducción: ¿Qué son las notificaciones push y por qué son importantes?
Una notificación push es un mensaje emergente automatizado en el que se puede hacer clic y que una aplicación envía a sus usuarios. El mensaje se entrega inmediatamente a un dispositivo cuando el dispositivo está inactivo o ejecuta la aplicación en segundo plano. Las notificaciones push son importantes porque:
- Entregar información importante, recordatorios y noticias relacionadas con la actividad o los intereses del usuario.
- Impulsar interacción con la aplicación móvil métricas
- Mostrar contenido destacado
- Genere tráfico relevante y dirigido que aumente las tasas de conversión.
- Cree una experiencia de usuario perfecta con contenido personalizado, oportuno y relevante
Nuestra guía de notificaciones push móviles tiene todo lo que necesita saber sobre las notificaciones push, sus ventajas y cómo se pueden utilizar.< /span>
Vale la pena señalar que el usuario promedio de un teléfono inteligente en EE. UU. recibe 45 notificaciones automáticas al día. Según RubyGarage, las organizaciones que implementan notificaciones automáticas tienen 3 veces más retención de clientes y un 88 % más de compromiso que las empresas que no lo hacen. Si bien existen variaciones en la aceptación de notificaciones push y en las tasas de clics según la industria, la ubicación y el tipo, y muchos otros factores, está claro que hay argumentos sólidos para implementar notificaciones push.
Este tutorial proporciona instrucciones paso a paso para implementar notificaciones push de React Native. Pero primero, echemos un vistazo a algunos requisitos previos.
Prerrequisitos
- Crea una cuenta de Sendbird.
- Asegúrate de que Sendbird Chat funcione bien en tu aplicación React Native.
Recuerde que cuando se envía un mensaje al servidor Sendbird desde una aplicación (a través del SDK de chat para JavaScript), el servidor se comunica con FCM. Luego, FCM envía una notificación push al dispositivo Android o se comunica con APN para enviar la notificación push al dispositivo iOS.
Notificaciones push para aplicaciones React Native
Se pueden enviar notificaciones push a usuarios de aplicaciones móviles híbridas (Android e iOS) utilizando el Sendbird Chat SDK para JavaScript. Actualmente, la funcionalidad de notificaciones push del SDK de JavaScript es compatible únicamente con React Native. Este tutorial proporciona detalles para habilitar las notificaciones push en una aplicación React Native mediante Firebase Cloud Messaging (FCM) y el SDK de Sendbird Chat.
Antes de profundizar en los detalles de la implementación, hablemos de mensajes FCM. Hay dos tipos de mensajes FCM: mensajes de notificación y mensajes de datos. Según la documentación de Firebase, "los mensajes de notificación tienen un conjunto predefinido de claves visibles para el usuario y una carga útil de datos opcional de pares clave-valor personalizados". Los mensajes de datos contienen solo pares clave-valor definidos por el usuario. Sendbird utiliza mensajes de datos, lo que permite que las aplicaciones cliente creen la carga útil del mensaje personalizado que consta de estos pares clave-valor personalizados.
Las notificaciones push no son compatibles con aplicaciones web. Si necesita implementar notificaciones push para aplicaciones web, le recomendamos utilizar los eventos de webhook para implementar notificaciones push para aplicaciones web.
Antes de comenzar, asegúrese de tener acceso a la consola Firebase. ¡Vamos a sumergirnos! 💻
Paso 1: Registre las credenciales de FCM y el certificado de APNs en el panel de Sendbird
El servidor Sendbird requiere una clave de servidor FCM para Android y un certificado APN para iOS para entregar las notificaciones automáticas.
Siga los pasos 1 y 2 de este tutorial para registrar las credenciales de FCM y siga las instrucciones del docs para registrar el certificado APN en el panel de Sendbird.
Paso 2: Instale el módulo de Firebase de React Native y agregue los archivos de configuración
React Native Firebase es la colección de paquetes oficialmente recomendada que brinda soporte de React Native a todos los servicios de Firebase en aplicaciones de Android e iOS. Configure FCM para Android y APN para iOS en su proyecto React Native siguiendo las instrucciones en la documentación oficial. Al final de este paso, deberías haber agregado las aplicaciones de Android e iOS al proyecto de Firebase y los respectivos archivos de configuración agregados al proyecto de React Native.
Consulte la página de notificaciones de React Native Firebase para obtener más información sobre cómo mostrar y manejar notificaciones de FCM.
Paso 3: Registre un token push en el servidor de Sendbird
Para enviar mensajes de notificación a una aplicación cliente específica, FCM requiere un token de registro de FCM para dispositivos Android y un token de dispositivo APN para dispositivos iOS, emitidos por la instancia de la aplicación cliente. Por lo tanto, el servidor Sendbird también necesita el token de registro de cada instancia de la aplicación cliente para enviar solicitudes de notificación a FCM en su nombre. El Chat SDK proporciona una interfaz para registrar y cancelar el registro de estos dos tipos de tokens en el servidor Sendbird.
El siguiente fragmento de código muestra el registro del token del dispositivo.
El token de inserción registrado aparece en el panel en 'Usuarios > ID_usuario > Charlar':
Paso 4: Recibir mensajes de notificación push
Una vez que se ha registrado el token del dispositivo, la instancia de la aplicación cliente puede recibir y manejar los mensajes de notificación de FCM independientemente de la plataforma iOS o Android. Consulte la página uso de la documentación de React Native Firebase para obtener más información sobre la implementación.
El SDK de Sendbird Chat para JavaScript no detecta automáticamente el estado de su aplicación, por lo que setForegroundState() y Los métodos setBackgroundState() proporcionados por el SDK de Sendbird deben llamarse explícitamente.
Revise la documentación de React Native Firebase para comprender los controladores de eventos disponibles para recibir mensajes. El siguiente fragmento de código muestra el análisis de los mensajes FCM recibidos.
Nota: Los canales son un concepto exclusivo de Android que se utiliza para categorizar y permitir a los usuarios controlar cómo se manejan las notificaciones en sus dispositivos.
El objeto de datos analizado a partir de un mensaje de datos FCM contiene un conjunto de elementos clave-valor, como se muestra en el siguiente código JSON.
Consejos para la resolución de problemas con notificaciones push
La solución de problemas de notificaciones push puede ser compleja; aquí hay algunos consejos para hacer esto.
- Para que a los desarrolladores les resulte más fácil depurar y solucionar problemas de notificaciones push, hemos creado una herramienta de prueba que puede resultarle útil. Consulte este tutorial para comprender cómo utilizar la herramienta, a la que puede acceder a través del panel de Sendbird
- Consulta esta guía completa para solucionar problemas de notificaciones push de chat de Android.
- Si desea depurar condiciones de falla, consulte los códigos de error de FCM.
Conclusión
¡Y eso es todo! Ahora sabes cómo enviar notificaciones push para aplicaciones React Native con Sendbird Chat. Con la guía de este tutorial y los documentos, estarás en camino de enviar notificaciones push oportunas, relevantes y atractivas en poco tiempo.
Siempre estamos aquí para ayudar; contáctenos si tiene alguna pregunta, comentario o inquietud.
¡Feliz creación de notificaciones push! 💻