Añadir notificaciones PUSH con Firebase para Android/iOS usando React Native y Expo

Tiempo de lectura: 6 minutos

Hola, hoy os voy a enseñar cómo añadir notificaciones PUSH para poder recibir mensajes en vuestros proyectos de React Native usando React Native Firebase Notifications.

Lo primero de todo es registrar la APP en Firebase:

1. Creamos un proyecto nuevo y añadimos la APP iOS y Android.

En el caso de iOS:

• Rellenamos todos los datos que solicita, id del paquete (podemos encontarlo en app.json > ios > bundleIdentifier)
• Nombre de la APP para verla en Firebase (en mi caso pongo Nombre APP iOS)
• Ahora generará un archivo de configuración GoogleService-Info.plist, este archivo lo tenemos que añadir en la ruta que indica en nuestra APP en la carpeta iOS (si no tienes generadas las carpetas, aquí te explico como hacerlo). Este proceso lo va a hacer automáticamente EXPO.
• Añadimos este archivo a la raíz de nuestro proyecto. Después se copiará automáticamente en la carpeta ios/nombreproyecto

• Para poder configurar el resto de cosas de forma automática, tenemos que ir a nuestro archivo app.json y añadir lo siguiente:

 "ios": {
 "googleServicesFile": "./GoogleService-Info.plist",
}

Ahora tenemos que abrir el proyecto con Xcode para añadir el módulo de notificaciones PUSH.

Vamos a capabilities y pulsamos en + Capability

Después buscamos Push Notifications y Background Modes.

En background Modes marcamos Remote notifications:

Ya podemos cerrar el proyecto abierto en XCode.

Después tenemos que generar el certificado APN, para ello hacemos lo siguiente:

• Vamos a la consola de desarrollador de iOS (recuerda tener una cuenta de desarollador contratada).
• Vamos a certificados:

Ahora pulsamos en keys:

Y añadimos una nueva:

Pulsamos en continuar:

Y ahora pulsamos en register.

Ahora, bajaremos la clave y tenemos que guardarla en un lugar seguro, ya que no puede volver a ser descargada.

Y a continuación, tenemos que importar esta clave en el proyecto de firebase. Para ello, vamos a firebase, pulsamos en el proyecto y configuración, seleccionamos configuración del proyecto y después pulsamos en Cloud Messaging.

Vamos a Configuración de APP de Apple y en el apartado de Clave de autenticación de APNS tenemos que subir nuestra clave .p8 que hemos generado.

Añadimos también el id de la clave que viene en la consola de desarrollo de apple al pulsar sobre la clave generada:

Y el ID de equipo, que se puede encontrar en la barra superior debajo del nombre (cuándo has iniciado sesión). También aparece en el apartado de account:

Y con esto ya hemos configurado todo lo necesario de nuestra APP de iOS.

En el caso de Android:

Elegimos de nuevo un proyecto, esta vez Android dentro de Firebase.

• Rellenamos todos los datos que solicita, id del paquete es el id que aparece en app.json > Android > package.
• Elegimos un nombre de APP en mi caso APP Android.
• Y ahora genera un archivo google-services.json
• Tenemos que añadirlo en la ruta raíz de nuestro proyecto, cómo hicimos anteriormente con iOS. Debemos añadir el archivo en raíz del proyecto. Lo copiará automáticamente dentro de la carpeta Android/app.

• Ahora vamos a nuestro archivo app.json de nuevo y añadimos:

 "android": {
    "googleServicesFile": "./google-services.json",
 }

Finalmente, tenemos que instalar esta dependencia:

npx expo install expo-build-properties

Y añadimos esto en app.json:

"plugins":
      "@react-native-firebase/app",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
      
    ],

Ahora vamos a crear la funcionalidad para registrar la APP y poder enviar notificaciones PUSH.

Lo primero que tenemos que hacer es añadir la librería de Firebase:

npm install @react-native-firebase/app --save

Y Cloud Messages:

npm install @react-native-firebase/messaging --save

Y actualizar los archivos pods de ios:

cd ios
pod install

*Si al ejecutar pod install da error por la versión de Firebase, ejecuta lo siguiente:

pod update Firebase/CoreOnly

Ahora vamos a crear un componente o screen para gestionar las notificaciones PUSH. Lo llamamos NotificacionesPush.js y vamos a añadir el permiso de notificaciones necesario para usarlo en iOS:

import React, { useState, useEffect } from "react";
import { StyleSheet, View } from "react-native";

import messaging from '@react-native-firebase/messaging';

export async function requestUserNotificationsPermission() {
    const authStatus = await messaging().requestPermission();

    let enabled = false;

    if (Platform.OS === 'ios') {
        enabled =
            authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
            authStatus === messaging.AuthorizationStatus.PROVISIONAL;
    } else if (Platform.OS === 'android' && Platform.Version >= 33) {
        // Solo en APi level 33+
        const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            enabled = true;
        }
    }

   if (enabled) {     console.log('Authorization status:', authStatus);   }
}


const Componente = (props) => {

    const { } = props;

    useEffect(() => {
        requestUserPermission();
    }, []);

    return (
        <View style={styles.contenedor} >

        </View>
    )
};

export default Componente;

Quedaría así. De esta forma vamos a poder solicitar permisos para utilizar las notificaciones.

En Android no se necesitan permisos para utilizar las notificaciones.

Ahora vamos a añadir código para obtener el id de dispositivo que nos permitirá enviar mensaje con la función getToken();

Lo que tendremos que hacer aquí es obtener el token del dispositivo y almacenarlo en una base de datos junto con el ID del usuario. De esta forma en el back podremos obtenerlo para enviarle notificaciones PUSH.

Para obtener el ID del dispositivo, usamos lo siguiente:

import React, { useState, useEffect } from "react";
import { StyleSheet, View, Platform } from "react-native";

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
    const authStatus = await messaging().requestPermission();

    let enabled = false;

    if (Platform.OS === 'ios') {
        enabled =
            authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
            authStatus === messaging.AuthorizationStatus.PROVISIONAL;
    } else if (Platform.OS === 'android' && Platform.Version >= 33) {
        // Solo en APi level 33+
        const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            enabled = true;
        }
    }

    if (enabled) {
        console.log('Authorization status:', authStatus);
        //Obtener token:
        const fcmToken = await messaging().getToken();
        if (fcmToken) {
            console.log("Token: " + fcmToken);
            //enviarToken(fcmToken);
        }
    }
}

const Componente = (props) => {

    const { } = props;

    useEffect(() => {
        if (Platform.OS === 'ios') {
            requestUserPermission();
        }else{
            //Android
            //Obtener token:
            messaging().getToken().then(fcmToken => {
                if (fcmToken) {
                    console.log("Token: " + fcmToken);
                    //enviarToken(fcmToken);
                }
            });
        }
      
    }, []);

    return (
        <View style={styles.contenedor} >

        </View>
    )
};

export default Componente;

Hemos añadido un if para saber si estamos en Android/iOS, si es en iOS solicitamos los permisos de notificaciones y obtenemos el token que necesitamos para poder recibir mensajes en este dispositivo, en caso de Android, se obtiene directamente el token. Este token tenemos que almacenarlo en nuestro servidor y relacionarlo con el usuario al que queremos enviar una notificación.

La función enviarToken(fcmToken) se encargará de ello (una forma de implementarlo es crear un POST que envíe ese dato al servidor)

Recuerda que para poder probar la APP tenemos que generar un Build Developer ya que contiene trozos desarrollados en nativo (Generar un Build Dev para iOS en React Native con Expo (EAS)).

Si quieres modificar el icono en Android, tendrás que añadir esto en el manifest:

<meta-data  tools:replace="android:resource"
            android:name="com.google.firebase.messaging.default_notification_icon"
           android:resource="@mipmap/ic_notification" />

<meta-data  tools:replace="android:value"
           android:name="com.google.firebase.messaging.default_notification_color"
           android:value="#efaf00" />

<meta-data  tools:replace="android:value"
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="12345-canal_notificaciones"/>

Recuerda importar tools en la primera línea del Manifest:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 

Los dos primeros valores es para el icono y color. El último valor es para el canal de notificaciones.

Ahora tenemos que ejecutar el siguiente comando:
*IMPORTANTE: este comando borra todas las carpetas de ios/android y las vuelve a generar. Si tenemos alguna configuración en estas carpetas tendremos que volver a añadirla o bien ejecutar el comando sin –clean

expo prebuild --clean

Si ya tenemos las carpetas generadas de antes y no queremos borrar su contenido, podemos probar con este comando:

expo prebuild