Añadir notificaciones PUSH con Google Cloud Messaging en Flutter para Android o iOS

Tiempo de lectura: 6 minutos

Hoy vamos a implementar un sistema de notificaciones PUSH basado ene Google Cloud Messaging utilizando Flutter y capaz de funcionar en Android o iOS.

Lo primero que tenemos que hacer es crear nuestro proyecto Firebase, para ello vamos a https://firebase.google.com/

Y pulsamos en Ir a la consola:

Elegimos Agregar Proyecto

Elegimos un nombre para la APP. Podemos elegir si queremos activar Google Analytics.

Esperamos a que el proyecto se configure y pulsamos en continuar:

Ahora instalamos Firebase CLI: https://firebase.google.com/docs/cli?hl=es-419#setup_update_cli

Descargamos el que necesitemos según el Sistema Operativo, en mi caso utilizo Windows:

Ahora, en Windows me ha impedido instalarlo, pulsamos en que es seguro y que nos deje ejecutar.

Empezará a instalar:

Ahora nos pedirá autenticarnos con nuestra cuenta Google, elegimos una y listo:

Una vez instalado, vamos a nuestro proyecto y usamos el siguiente comando:

dart pub global activate flutterfire_cli

Esperamos a que se configure.

Nos aparecerá un Warning como este:

Tendremos que añadir este Path que indica, en el caso de Windows, de la siguiente forma:

Abre el Menú de Inicio:

• Haz clic en el botón de inicio de Windows en la esquina inferior izquierda de tu pantalla.

Configuración del Sistema:

• Escribe «Variables de entorno» y selecciona Editar las variables de entorno del sistema

Variables de entorno:

• En la ventana que se abre, buscamos la opción de «Variables de entorno…»

Editar la Variable PATH:

• En la sección «Variables del sistema», busca la variable llamada «Path» y haz clic en «Editar».

Agregar la Ruta:

• Buscamos la variable de sistema llamada Path:

• Pulsamos en editar y añadimos la nueva:

• C:\Users\user\AppData\Local\Pub\Cache\bin (que aparece en el Warning que te muestra en pantalla). Cambia user por tu nombre de usuario.

Guardar y Cerrar:

• Haz clic en «Aceptar» para cerrar la ventana de edición y luego en «Aceptar» nuevamente para cerrar la ventana de «Propiedades del sistema».

Cerrar y Abrir Terminales Nuevamente:

• Cierra cualquier terminal que estés utilizando y ábrela nuevamente para que los cambios surtan efecto.
• También es importante reiniciar la máquina para que se establezca la configuración.

En MAC:

export PATH="$PATH":"$HOME/.pub-cache/bin"

Ahora añadimos firebase_core (https://pub.dev/packages/firebase_core)

flutter pub add firebase_core

Y ahora usamos el comando para configurar el proyecto:

flutterfire configure

Si nos aparece el siguiente error:

FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command.
COMMAND: firebase --version
ERROR: The FlutterFire CLI currently requires the official Firebase CLI to also be installed, see https://firebase.google.com/docs/cli#install_the_firebase_cli for how to install it.

Instalamos lo siguiente:

npm install -g firebase-tools

*Recuerda tener nodejs instalado: https://nodejs.org/en

Y ya empezará a configurarse:

Ahora, seleccionamos el proyecto que hemos creado anteriormente.

Elegimos las plataformas que nos interesen:

En mi caso las dejo por defecto.

Y esperamos a que se configure.

Ahora vamos con el código que hará que las notificaciones funcionen.

Creamos una clase llamada FirebaseInitializer.dart

import 'package:firebase_core/firebase_core.dart';
import 'package:interferencias_escacharrado/firebase_options.dart';

class FirebaseInitializer {
  static Future<void> initialize() async {
    try {
      await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform,
      );
      print('Firebase initialized successfully');
    } catch (e) {
      print('Error initializing Firebase: $e');
    }
  }
}

Una vez creada, tenemos que ir a nuestra clase principal y añadimos:

void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   await FirebaseInitializer.initialize();
}

Con esto se inicializa Firebase en nuestra APP.

En iOS hay que realizar unos pasos extra:

Abre la APP con Xcode:

Una vez abierto vamos a Runner > Signing & Capabilities y buscamos «push» para que nos salga el bloque de notificaciones PUSH:

Le pulsamos para que se active.

Ahora hacemos lo mismo pero buscamos «Background Modes»

Y elegimos Background fetch y Remote notifications:

Ahora hay que crear un certificado APN .p12 para enlazar la APP con iOS:

Abre: https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2Faccount%2F&rv=1

Abre Certificates, IDs & Profilesy seleccionas Keys:

Elegimos el tipo de clave: Apple Push Notifications service (APNs) y la completamos.

*Una sola clave se utiliza para todas las APPs, por lo que la guardaremos bien.

Vamos a Firebase y Ajustes (Engranaje) y Configuración del proyecto

Elegimos Cloud Messaging

Y vamos a Clave de autenticación de APNS y subimos la clave:

Seleccionamos y subimos nuestra clave, indicamos el ID de clave (se puede obtener desde la consola de APPLE, pulsamos en nuestra clave y está indicada en Key ID).

También añadimos el ID de equipo, para ello vamos a la parte inicial de la consola de APPLE y seleccionamos Memberships Details:

Seleccionamos Team ID. Y pulsamos en Subir.

Ya podemos cerrar el proyecto de Xcode.

Ahora vamos a configurar las notificaciones.

Instalamos firebase_messaging

flutter pub add firebase_messaging

Ahora creamos FirebaseMessaging.dart

import 'package:firebase_messaging/firebase_messaging.dart';

class FirebaseMessagingInitializer {

  static Future<void> initialize() async {
    try {
      await FirebaseMessaging.instance.setAutoInitEnabled(true);
      print('Firebase initialized successfully');
    } catch (e) {
      print('Error initializing Firebase: $e');
    }
  }
  //obtener token:
  static Future<String?> getToken() async {
    String? token = await FirebaseMessaging.instance.getToken();
    print('Token: $token');
    return token;
  }
}

Y lo instanciamos en nuestro main o screen principal. Quedando así:

  void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   await FirebaseInitializer.initialize();
   await FirebaseMessagingInitializer.initialize();
   await FirebaseMessagingInitializer.getToken();
  }

Y ahora vamos a probar la implementación, para ello vamos a ejecutar la APP y obtener el token que imprimimos por el print(‘Token: $token’);

Ahora copiamos el token y vamos a nuestra consola firebase para enviar una notificación de prueba (https://console.firebase.google.com/u/0/project/_/messaging)

Y pulsamos en Crear la primera campaña

Y elegimos Mensajes de Firebase Notifications

Rellenamos datos de prueba:

Y pulsamos en enviar, nos pedirá añadir el token que nos ha devuelto la APP, lo añadimos.

Es posible que en nuestra APP de pruebas tengamos las notificaciones desactivadas, para ello vamos a ajustes de APP y las activamos:

Y ya podemos comprobar que nos llega la notificación:

Extra: cambiar el icono de la notificación.

Si queremos cambiar el icono de la notificación (podremos hacerlo en Android).

Podemos crear nuestro icono con esta herramienta: https://romannurik.github.io/AndroidAssetStudio/index.html

Una vez creado, tenemos que ir a la carpeta android\app\src\main\res

Y añadimos las distintas imágenes con distintos tamaños en mipmap (si usamos la herramienta se llaman drawable, puedes cambiar el nombre de la carpeta a mipmap).

Ahora vamos a nuestro archivo manifest: android\app\src\main\AndroidManifest.xml

Y añadimos justo debajo de

<application android:label=»@string/app_name»

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

En mi caso pongo ic_stat_notification, ya que es el nombre con el que lo he guardado en la herramienta anterior.

Quedando así:

    <application
        android:label="@string/app_name"
        android:name="${applicationName}"
        android:icon="@mipmap/launcher_icon">

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

        <activity
            android:name=".MainActivity"

Y con este código podremos cambiar el color:

   <meta-data
          android:name="com.google.firebase.messaging.default_notification_color"
          android:resource="#1E1E1E" />