¿Alguna vez pensaste en las notificaciones que recibimos de las aplicaciones que instalamos? o ¿Cómo nos provocan Swiggy o Zomato a pedir comida a las 3 a. m. con sus notificaciones creativas? ?

¡Profundicemos en el concepto de notificaciones!

¿Qué son las notificaciones?

Una notificación es un mensaje o alerta enviada por una aplicación para informar a los usuarios sobre actualizaciones, eventos o acciones, que generalmente se entregan fuera de la interfaz de la aplicación.

Ahora puede haber dos tipos de notificaciones como se muestra a continuación -

Notificación push

Las notificaciones push son mensajes o alertas enviadas desde un servidor a una aplicación cuando la aplicación no se está ejecutando activamente en primer plano. Se utilizan principalmente para mantener a los usuarios interesados ​​mediante el envío de actualizaciones, recordatorios o contenido personalizado. Las notificaciones automáticas se envían a través de servicios del sistema operativo como Apple Push Notification Service (APN) para iOS o Firebase Cloud Messaging (FCM) para Android.

Cómo funciona la notificación push:

1. Registro: cuando la aplicación se instala o se abre por primera vez, solicita un token de dispositivo único del servicio de notificaciones push del sistema operativo (APN o FCM).
2. Comunicación del servidor: la aplicación envía este token al servidor backend de la aplicación, que lo almacena para uso futuro.
3. Envío de notificaciones: el servidor envía una carga útil de notificación (que contiene título, mensaje, botones de acción, etc.) al servicio de notificaciones push (APN/FCM) con el token del dispositivo.
4. Entrega: el servicio de notificaciones push entrega el mensaje al dispositivo respectivo, incluso si la aplicación no se está ejecutando.

Notificación en la aplicación

Las notificaciones dentro de la aplicación son mensajes o alertas que se muestran a los usuarios mientras usan activamente la aplicación. A diferencia de las notificaciones automáticas, estas no requieren la intervención del servidor y se activan dentro de la propia aplicación, generalmente como resultado de acciones del usuario o eventos de la aplicación.

Cómo funciona la notificación en la aplicación:

1. Activador de evento: cuando ocurre un evento específico dentro de la aplicación (como un usuario que alcanza un hito o una función que necesita atención), la aplicación puede activar una notificación dentro de la aplicación.
2. Pantalla: la notificación se muestra como un banner, modal o ventana emergente dentro de la interfaz de usuario de la aplicación, guiando al usuario o informándole sobre el evento.
3. Lógica personalizada: las notificaciones dentro de la aplicación se manejan directamente mediante el código de la aplicación y se pueden mostrar dinámicamente según el estado o la lógica interna de la aplicación.

Implementación en la aplicación de Android React Native:

Ahora que conocemos las notificaciones y sus tipos, es hora de implementar la función en su propia aplicación nativa de reacción. Esta guía es para implementar solo notificaciones push en la aplicación React nativa de Android únicamente. Si desea iOS o notificaciones dentro de la aplicación, escriba un comentario y lo publicaré con seguridad.

Para comenzar, utilizaremos un servicio de terceros llamado OneSignal. Hace poco encontré esta plataforma y me sorprendieron los servicios que ofrecen.

Acerca de OneSignal:

OneSignal es un servicio de notificaciones push que permite a los desarrolladores de aplicaciones enviar notificaciones específicas a los usuarios a través de varias plataformas, incluidas aplicaciones móviles, sitios web y correo electrónico. Admite notificaciones push, en la aplicación y web, y proporciona funciones como segmentación, automatización, pruebas A/B y análisis en tiempo real. OneSignal se utiliza ampliamente para mejorar la participación y retención de los usuarios al ofrecer una solución fácil de integrar para enviar mensajes personalizados. Su nivel gratuito consta de 10 000 envíos de correo electrónico gratuitos al mes, envíos push móviles ilimitados, flujos de trabajo de Journeys, cumplimiento del RGPD, pruebas A/B

Volviendo a la guía, dado que ya sabemos que las notificaciones push requieren manejo del lado del servidor a través de FCM (Firebase Cloud Messaging), hay algunos pasos a seguir:

1. Configura el proyecto Firebase (ignora los dos primeros pasos si ya tienes el proyecto Firebase):

   • Vaya a Firebase Console e inicie sesión en su cuenta.
   • Crea un proyecto desde aquí y sigue los pasos
   • Una vez creado tu proyecto, ve a la configuración del proyecto desde la barra lateral.
   • Navega a cuentas de servicio desde la barra y debería verse así
   • Haga clic en Generar nueva clave privada y esto descargará un archivo json, lo guardará cuidadosamente en un lugar seguro; lo necesitaremos mientras configuramos OneSignal.

2. Configurar OneSignal

   • Vaya a OneSignal y cree una cuenta.
   • Después de crear una cuenta, sigue los pasos de configuración y crea una organización y ahora verás una página para agregar aplicaciones.
   • En esta página, proporcione el nombre de su aplicación y seleccione Google Android (FCM) para nuestro caso. y haga clic en Configure su plataforma
   • Ahora serás redirigido a esta página donde usaremos el archivo json de la cuenta de servicio descargado durante la configuración de Firebase. Cargue el json y luego Guardar y continuar
   • En la página siguiente, seleccione React Native/Expo como SDK de destino y luego Guardar y continuar nuevamente
   • En la siguiente pantalla obtendrás tu ID de aplicación, esta es una identificación confidencial y, al usarla, cualquiera puede activar una notificación en tu aplicación, así que ten cuidado con este secreto.

Hemos terminado con la configuración en Firebase y OneSignal, ahora la única tarea que queda es un poco de Café con código

Añade OneSignal a tu aplicación y configúrala

• Paso 1: agregue OneSignal a su aplicación ejecutando este comando primero

                       npm i react-native-onesignal

• Paso 2: En su index.js o App.tsx o App.js, cualquiera que sea la raíz de su proyecto, importe OneSignal

             import { OneSignal } from 'react-native-onesignal';

y ha agregado este fragmento de código para inicializar OneSignal

                    OneSignal.initialize('YOUR_APP_ID');

Puedes envolver esto dentro de un gancho useEffect para una integración y conectividad perfectas con OneSignal.

Esto inicializará el dispositivo con una identificación única para OneSignal y puede verificarlo en las suscripciones en la barra lateral. Cada dispositivo que se inicialice se identificará con este OneSignal ID único y también puede configurarlo manualmente si ya tiene usuarios con sus propios ID únicos utilizando este fragmento de código:

                         OneSignal.login(userId)

Una vez que el usuario se haya suscrito correctamente, se mostrará en el panel de control así

Ahora puedes encontrar algunos problemas con OneSignal que no se usa correctamente o algunos errores críticos, así que aquí tienes una parte que puedes seguir y que me ayudó a resolver esos problemas.

• Paso 3: Dentro de tu android\app\build.gradle agrega este fragmento de código

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

• Paso 4: En Android, para proporcionar los permisos necesarios para las notificaciones push, en android\app\src\main\AndroidManifest.xml agregue

justo antes de la etiqueta de la aplicación. Sin embargo, el permiso de INTERNET es opcional ya que puede estar habilitado de forma predeterminada.

¿Auge? Se cubren todos los pasos para implementar notificaciones automáticas y puede enviar una notificación de prueba desde el panel de OneSignal.

Pruébalo tú mismo y, si tienes alguna duda, puedes comentar a continuación. ¡Síguenos para obtener guías más detalladas!

Referencias:
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

¿¡Feliz codificación!?‍?