Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
dart pub global activate flutterfire_cli
dart pub global activate flutterfire_cli
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
export PATH="$PATH":"$HOME/.pub-cache/bin"
export PATH="$PATH":"$HOME/.pub-cache/bin"
export PATH="$PATH":"$HOME/.pub-cache/bin"

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
flutter pub add firebase_core
flutter pub add firebase_core
flutter pub add firebase_core

Y ahora usamos el comando para configurar el proyecto:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
flutterfire configure
flutterfire configure
flutterfire configure

Si nos aparece el siguiente error:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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.
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.
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install -g firebase-tools
npm install -g firebase-tools
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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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');
}
}
}
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'); } } }
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await FirebaseInitializer.initialize();
}
void main() async { WidgetsFlutterBinding.ensureInitialized(); await FirebaseInitializer.initialize(); }
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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
flutter pub add firebase_messaging
flutter pub add firebase_messaging
flutter pub add firebase_messaging

Ahora creamos FirebaseMessaging.dart

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
}
}
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; } }
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í:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await FirebaseInitializer.initialize();
await FirebaseMessagingInitializer.initialize();
await FirebaseMessagingInitializer.getToken();
}
void main() async { WidgetsFlutterBinding.ensureInitialized(); await FirebaseInitializer.initialize(); await FirebaseMessagingInitializer.initialize(); await FirebaseMessagingInitializer.getToken(); }
  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»

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="@mipmap/ic_stat_notification" />
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_stat_notification" />
         <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í:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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"
<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"
    <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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<meta-data
android:name="com.google.firebase.messaging.default_notification_color"
android:resource="#1E1E1E" />
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="#1E1E1E" />
   <meta-data
          android:name="com.google.firebase.messaging.default_notification_color"
          android:resource="#1E1E1E" />
0

4 comentarios en «Añadir notificaciones PUSH con Google Cloud Messaging en Flutter para Android o iOS»

Deja un comentario