Envíe y reciba notificaciones para una aplicación Flutter usando Firebase Cloud Messaging

1. Introducción

Última actualización : 2022-04-04

Este codelab lo guía a través del proceso de desarrollo de una aplicación multiplataforma con Firebase Cloud Messaging (FCM) usando Flutter. Escribirá una parte de la implementación de la aplicación y luego la creará y ejecutará sin problemas en tres plataformas: Android, iOS y web. También aprenderá cómo integrar FCM en Flutter y cómo escribir código para recibir y enviar mensajes. Por último, el codelab presenta la función de bloques específicos de plataforma de la API HTTP v1 de FCM, que le permite enviar un mensaje que tiene diferentes comportamientos en diferentes plataformas.

Requisito previo

Comprensión básica de Flutter.

lo que aprenderás

• Cómo configurar y crear una aplicación Flutter.
• Cómo agregar dependencias de FCM.
• Cómo enviar mensajes FCM individuales a su aplicación.
• Cómo enviar mensajes FCM temáticos a su aplicación.

Lo que necesitarás

• Última versión estable de Android Studio configurada con los complementos Dart y Flutter.

Puedes ejecutar el codelab usando cualquiera de los siguientes dispositivos:

• Un dispositivo Android físico conectado a su computadora.
• Un emulador de Android (consulte Ejecutar aplicaciones en el emulador de Android ).
• Un navegador de tu elección, como Chrome.

Opcionalmente, para ejecutar el codelab usando la plataforma iOS, necesita un dispositivo iOS, una cuenta de desarrollador de Apple y un dispositivo macOS con XCode instalado.

2. Configuración de aleteo

Si ya tienes configurado un entorno de desarrollo de Flutter, omite esta sección.

Para configurar un entorno de desarrollo de Flutter, siga estos pasos:

1. Descargue e instale Flutter para su sistema operativo: Instalar | Aleteo
2. Asegúrese de que la herramienta Flutter esté agregada a su ruta.
3. Configure su editor para Flutter como se muestra en Configurar un editor | Flutter Asegúrese de instalar los complementos Flutter y Dart para su editor. Para el resto del codelab, utilizarás Android Studio.
4. Desde la línea de comando, ejecute flutter doctor , que escanea su configuración y enumera las dependencias faltantes que deben corregirse. Siga las instrucciones para corregir cualquier dependencia importante que falte. Tenga en cuenta que es posible que algunas dependencias no sean necesarias. Por ejemplo, si no va a desarrollar para iOS, entonces la falta de una dependencia de CocoaPods no será un problema de bloqueo.
5. Ejecute este comando para crear su aplicación Flutter en el directorio fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter y luego cambie los directorios a fcmflutter .

6. En Android Studio, vaya a Archivo -> Abrir , busque la ruta de su aplicación Flutter y luego haga clic en Abrir para abrir el proyecto en Android Studio. El código de la aplicación está en el archivo lib/main.dart .

En la barra de herramientas de Android Studio, haga clic en la flecha hacia abajo para seleccionar un dispositivo Android. Si el selector de destino está vacío, instale dispositivos Android virtuales , o el navegador Chrome o el simulador de iOS si prefiere iniciar la aplicación desde un navegador web o un dispositivo iOS. Es posible que deba iniciar el dispositivo manualmente y actualizar la lista para encontrar el dispositivo de destino.

Haga clic en Ejecutar para iniciar la aplicación.

¡Felicidades! Has creado con éxito una aplicación Flutter.

3. Configuración de Firebase y FlutterFire

Para desarrollar una aplicación que se integre con Firebase Cloud Messaging usando Flutter, necesita:

• Un proyecto de Firebase.
• Una CLI de Firebase que funcione.
• Una instalación de FlutterFire.
• Una aplicación configurada y generada con flutterfire configure .

Crea tu proyecto de Firebase

Si ya tienes un proyecto de Firebase, puedes omitir este paso.

1. Si tiene una cuenta de Google, abra Firebase , inicie sesión con su cuenta de Google y luego haga clic en Ir a la consola .
2. En Firebase Console, haz clic en Agregar proyecto . Siga las instrucciones para crear un proyecto. No marque Habilitar Google Analytics para este proyecto porque no lo usará en este proyecto.
3. Una vez creado el proyecto, navegue hasta la Configuración del proyecto haciendo clic en el ícono de ajustes junto a Descripción general del proyecto .

El ID del proyecto se utiliza para identificar de forma única el proyecto y puede ser diferente del nombre del proyecto . La ID del proyecto se utilizará para configurar FlutterFire más adelante.

¡Felicidades! Ha creado con éxito un proyecto de Firebase.

Configurar Firebase CLI

Si tiene Firebase CLI configurado, puede omitir este paso.

Vaya a la referencia de Firebase CLI para descargar e instalar Firebase CLI. Inicie sesión en Firebase con su cuenta de Google con el siguiente comando:

firebase login

Configurar FlutterFire

1. Instale el complemento FlutterFire usando el comando: flutter pub add firebase_core
2. Instale el complemento FCM: flutter pub add firebase_messaging
3. Configure la CLI de FlutterFire: dart pub global activate flutterfire_cli
4. Configure el proyecto Firebase en Flutter: flutterfire configure --project=fcm4flutter. Utilice las teclas de flecha y el espacio para seleccionar las plataformas o presione Entrar para usar las plataformas predeterminadas.

Este codelab utiliza las plataformas predeterminadas (Android, iOS y web), pero solo puedes seleccionar una o dos plataformas. Si se le solicita el ID del paquete de iOS, ingrese com.flutter.fcm.fcmflutter o su propio ID del paquete de iOS en el formato [company domain name].[project name] . Una vez que se complete el comando, actualice la página de Firebase Console. Verás que ha creado aplicaciones para las plataformas seleccionadas en el proyecto Firebase.

Este comando genera un archivo firebase_options.dart en el directorio lib , que contiene todas las opciones necesarias para la inicialización.

Configurar mensajería en la nube para iOS

1. Navegue a la página de desarrollador de Apple y haga clic en Crear una clave en la pestaña Claves .

2. Ingrese el nombre de la clave y verifique los servicios de notificaciones push de Apple (APN) .
3. Descargue el archivo clave, que tiene una extensión de archivo .p8 .
4. En Firebase console , navega hasta la Configuración del proyecto y elige la pestaña Mensajería en la nube .

5. Cargue el archivo de clave APN para la aplicación iOS en la pestaña Mensajería en la nube . Ingrese la ID de la clave APN de la pestaña Mensajería en la nube y la ID del equipo, que se puede encontrar en el centro de membresía de Apple.

4. Preparación del FCM

Antes de que una aplicación pueda recibir mensajes de FCM, debe:

• Inicializa FlutterFire.
• Solicitar permisos de notificación.
• Regístrese en FCM para obtener un token de registro.

Inicialización

Para inicializar el servicio, reemplace la función principal ( lib/main.dart ) con este código:

// core Flutter primitives
import 'package:flutter/foundation.dart';
// core FlutterFire dependency
import 'package:firebase_core/firebase_core.dart';
// generated by 

flutterfire configure

import 'firebase_options.dart';
// FlutterFire's Firebase Cloud Messaging plugin
import 'package:firebase_messaging/firebase_messaging.dart';

// TODO: Add stream controller
// TODO: Define the background message handler

Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );

 // TODO: Request permission
 // TODO: Register with FCM
 // TODO: Set up foreground message handler
 // TODO: Set up background message handler

 runApp(MyApp());
}

Luego ejecute Herramientas -> Flutter -> Flutter Pub Get en Android Studio para cargar los paquetes agregados en Configurar FlutterFire y muestre el código con la configuración Intellisense adecuada en Android Studio.

Esto inicializa FlutterFire para la plataforma actual DefaultFirebaseOptions.currentPlatform , que se importa desde el archivo firebase_options.dart generado. Tenga en cuenta que initializeApp es una función asincrónica y la palabra clave await garantiza que la inicialización se complete antes de ejecutar la aplicación.

Pedir permiso

La aplicación debe solicitar permiso al usuario para recibir notificaciones. El método requestPermission proporcionado por firebase_messaging muestra un cuadro de diálogo o una ventana emergente que solicita al usuario que permita o niegue el permiso.

Primero, copie este código en la función principal debajo del comentario TODO: Request permission . La settings devuelta le indica si el usuario ha otorgado permiso. Recomendamos solicitar permiso solo cuando el usuario necesite utilizar una función que requiera acceso (por ejemplo, cuando el usuario activa las notificaciones en la configuración de la aplicación). En este codelab, solicitamos permiso al iniciar la aplicación para simplificar.

final messaging = FirebaseMessaging.instance;

final settings = await messaging.requestPermission(
 alert: true,
 announcement: false,
 badge: true,
 carPlay: false,
 criticalAlert: false,
 provisional: false,
 sound: true,
);

 if (kDebugMode) {
   print('Permission granted: ${settings.authorizationStatus}');
 }

A continuación, en la barra de herramientas de Android Studio, seleccione Chrome (web) en el selector de destino y luego ejecute la aplicación nuevamente.

Luego, se abre una pestaña de Chrome con una ventana emergente que solicita permiso. Si hace clic en Allow , verá un registro en la consola de Android Studio: Permission granted: AuthorizationStatus.authorized . Después de permitir o bloquear la solicitud de permiso, su respuesta se almacena junto con su aplicación en el navegador y la ventana emergente no se vuelve a mostrar. Tenga en cuenta que cuando vuelva a ejecutar la aplicación web en Android Studio, es posible que se le solicite permiso nuevamente.

Registro

Copie este código en la función principal debajo del comentario TODO: Register with FCM para registrarse en FCM. La llamada getToken devuelve un token de registro que el servidor de aplicaciones o el entorno del servidor de confianza puede utilizar para enviar mensajes a los usuarios.

// It requests a registration token for sending messages to users from your App server or other trusted server environment.
String? token = await messaging.getToken();

if (kDebugMode) {
  print('Registration Token=$token');
}

En la barra de herramientas de Android Studio, seleccione un dispositivo Android y ejecute la aplicación. En la consola de Android Studio, el token de registro se imprime así:

I/flutter ( 3717): Permission granted: AuthorizationStatus.authorized
I/flutter ( 3717): Registration Token=dch. . . D2P:APA9. . .kbb4

Cópialo en un editor de texto, ya que lo usarás para enviar mensajes más adelante.

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:firebase_messaging]

Pasos extra para recibir mensajes en la web

Las aplicaciones web necesitan dos pasos adicionales para obtener el token de registro y escuchar los mensajes entrantes. Web necesita pasar una clave VAPID a getToken para autorizar el envío de solicitudes a servicios push web compatibles.

Primero, abra la pestaña Mensajería en la nube del proyecto Firebase en Firebase Console, desplácese hacia abajo hasta la sección de configuración web para encontrar el par de claves existente o genere un nuevo par de claves. Haga clic en el botón resaltado para copiar la clave y poder usarla como insípida.

A continuación, reemplace el código de registro en la sección Registro con este código y luego actualice vapidKey:

// TODO: replace with your own VAPID key
 const vapidKey = "<YOUR_PUBLIC_VAPID_KEY_HERE>";

 // use the registration token to send messages to users from your trusted server environment
 String? token;

 if (DefaultFirebaseOptions.currentPlatform == DefaultFirebaseOptions.web) {
   token = await messaging.getToken(
     vapidKey: vapidKey,
   );
 } else {
   token = await messaging.getToken();
 }

 if (kDebugMode) {
   print('Registration Token=$token');
 }

Luego, cree un archivo firebase-messaging-sw.js debajo del directorio web/ en la raíz de su proyecto. Copie lo siguiente en firebase-messaging-sw.js para permitir que la aplicación web reciba eventos onMessage . Consulte Configuración de opciones de notificación en el trabajador de servicio para obtener más información.

importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js");

// todo Copy/paste firebaseConfig from Firebase Console
const firebaseConfig = {
 apiKey: "...",
 authDomain: "...",
 databaseURL: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// todo Set up background message handler

Después de eso, en Configuración del proyecto -> pestaña General , desplácese hacia abajo y busque la aplicación web , copie la sección del código firebaseConfig y péguela en firebase-messaging-sw.js .

Finalmente, en la barra de herramientas de Android Studio, seleccione Chrome (web) en el selector de destino y ejecute la aplicación. En la consola de Android Studio, el token de registro se imprime así:

Debug service listening on ws://127.0.0.1:61538/BLQQ3Fg-h7I=/ws
Permission granted: AuthorizationStatus.authorized
Registration Token=fH. . .ue:APA91. . .qwt3chpv

Copie el token de registro en un editor de texto para poder usarlo para enviar mensajes más tarde.

Pasos extra para recibir mensajes en iOS

Para recibir mensajes de FCM, los dispositivos iOS deben habilitar las notificaciones automáticas y los modos en segundo plano en Xcode:

1. En Android Studio, haga clic derecho en el nombre del proyecto y luego seleccione Flutter -> Abrir módulo iOS en Xcode .
2. Después de que se inicie Xcode, habilite las notificaciones automáticas y los modos en segundo plano en la pestaña Firma y capacidades para el objetivo del proyecto. Consulte Configurar su aplicación para obtener más información.
3. En la barra de herramientas de Android Studio, seleccione un dispositivo iOS en el selector de destino y ejecute la aplicación. Una vez concedido el permiso de notificación, el token de registro se imprime en la consola de Android Studio.

Felicitaciones, ha registrado exitosamente su aplicación en FCM. Está listo para recibir mensajes, como se describe en la siguiente sección.

5. Recibir mensajes de FCM

Configurar controladores de mensajes

La aplicación debe controlar los eventos onMessage cuando llegan mensajes mientras la aplicación está en primer plano y los eventos onBackgroundMessage cuando la aplicación está en segundo plano.

Manejador de mensajes en primer plano

Primero, agregue un controlador de transmisión después del comentario TODO: Add stream controller en el archivo main.dart para pasar mensajes desde el controlador de eventos a la interfaz de usuario.

import 'package:rxdart/rxdart.dart';
// used to pass messages from event handler to the UI
final _messageStreamController = BehaviorSubject<RemoteMessage>();

Para agregar la dependencia rxdart, ejecute este comando desde el directorio del proyecto: flutter pub add rxdart .

A continuación, ejecute Herramientas -> Flutter -> Flutter Pub Get en Android Studio para cargar el paquete rxdart.dart y mostrar el código con la configuración Intellisense adecuada en Android Studio.

Luego, agregue un controlador de eventos para escuchar los mensajes de primer plano después del comentario TODO: Set up foreground message handler . Imprime registros y publica el mensaje en el controlador de flujo.

 FirebaseMessaging.onMessage.listen((RemoteMessage message) {
   if (kDebugMode) {
     print('Handling a foreground message: ${message.messageId}');
     print('Message data: ${message.data}');
     print('Message notification: ${message.notification?.title}');
     print('Message notification: ${message.notification?.body}');
   }

   _messageStreamController.sink.add(message);
 });

Después de eso, reemplace el widget de estado original en el archivo main.dart con este código, que agrega un suscriptor al controlador de flujo en el widget de estado y muestra el último mensaje en el widget.

class _MyHomePageState extends State<MyHomePage> {
 String _lastMessage = "";

 _MyHomePageState() {
   _messageStreamController.listen((message) {
     setState(() {
       if (message.notification != null) {
         _lastMessage = 'Received a notification message:'
             '\nTitle=${message.notification?.title},'
             '\nBody=${message.notification?.body},'
             '\nData=${message.data}';
       } else {
         _lastMessage = 'Received a data message: ${message.data}';
       }
     });
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text('Last message from Firebase Messaging:',
               style: Theme.of(context).textTheme.titleLarge),
           Text(_lastMessage, style: Theme.of(context).textTheme.bodyLarge),
         ],
       ),
     ),
   );
 }
}

Manejador de mensajes en segundo plano para Android/iOS

Los mensajes son manejados por el controlador onBackgroundMessage mientras la aplicación está en segundo plano. El controlador debe ser una función de nivel superior. La interfaz de usuario se puede actualizar cuando la aplicación pasa a primer plano manejando los mensajes (consulte Manejo de la interacción ) o sincronizándola con el servidor de la aplicación.

Cree la función de controlador después del comentario TODO: Define the background message handler fuera de la función principal y llámelo en la función principal después del comentario TODO: Set up background message handler .

// TODO: Define the background message handler
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
 await Firebase.initializeApp();

 if (kDebugMode) {
   print("Handling a background message: ${message.messageId}");
   print('Message data: ${message.data}');
   print('Message notification: ${message.notification?.title}');
   print('Message notification: ${message.notification?.body}');
 }
}

void main() {
 ...

 // TODO: Set up background message handler
 FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

 runApp(MyApp());
}

Manejador de mensajes en segundo plano para web

A partir de FlutterFire firebase_messaging versión 11.2.8, el manejo de mensajes en segundo plano en plataformas basadas en web requiere un flujo diferente. Por lo tanto, debe agregar un controlador de mensajes independiente en el trabajador del servicio web/firebase-messaging-sw.js .

messaging.onBackgroundMessage((message) => {
 console.log("onBackgroundMessage", message);
});

Configurar el servidor de aplicaciones

1. Importe el código del servidor de inicio abriendo https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server proyecto en Android Studio. El servidor es un proyecto Java basado en Gradle que depende del SDK de firebase-admin , que proporciona la funcionalidad de envío de mensajes de FCM.
2. Configure una cuenta de servicio de Firebase que permita que el SDK de administrador de Firebase autorice llamadas a las API de FCM. Abra la Configuración del proyecto en Firebase console y seleccione la pestaña Cuentas de servicio . Elija 'Java' y haga clic en Generate new private key para descargar el fragmento de configuración.
3. Cambie el nombre del archivo a service-account.json y cópielo en la ruta src/main/resources del proyecto del servidor.

Enviar un mensaje de prueba

En el archivo FcmSender.java , sendMessageToFcmRegistrationToken redacta un mensaje de notificación con una carga de datos. El token de registro apunta a la instancia de la aplicación a la que se envía el mensaje.

private static void sendMessageToFcmRegistrationToken() throws Exception {
   String registrationToken = "REPLACE_WITH_FCM_REGISTRATION_TOKEN";
   Message message =
       Message.builder()
           .putData("FCM", "https://firebase.google.com/docs/cloud-messaging")
           .putData("flutter", "https://flutter.dev/")
           .setNotification(
               Notification.builder()
                   .setTitle("Try this new app")
                   .setBody("Learn how FCM works with Flutter")
                   .build())
           .setToken(registrationToken)
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to FCM Registration Token sent successfully!!");
 }

1. Copie el token de registro de Android copiado de la sección Registro y péguelo en el valor de la variable registrationToken .
2. Haga clic en Ejecutar para ejecutar la función principal y enviar el mensaje al usuario a través de FCM.

Cuando la aplicación de Android está en segundo plano, el mensaje aparece en la bandeja de notificaciones.

Cuando la aplicación de Android esté en primer plano, verá un registro en la consola de Android Studio: "Manejo de un mensaje en primer plano". El contenido del mensaje también se muestra en la interfaz de usuario porque la interfaz de usuario está suscrita al controlador de transmisión para mensajes nuevos.

Si pega el token de registro y envía el mensaje desde el servidor de aplicaciones u otro entorno de servidor confiable, verá un comportamiento similar:

• Cuando la aplicación web esté en segundo plano (es decir, cuando esté oculta en otra ventana o cuando haya otra pestaña activa), verá una notificación web.

• Cuando la aplicación web está en primer plano, puede ver el registro en la consola Chrome haciendo clic derecho en la web y seleccionando Inspect . El contenido del mensaje también se muestra en la interfaz de usuario.

6. Enviar un mensaje temático

La función de anulación de plataforma de la API FCM HTTP v1 permite que una solicitud de envío de mensajes tenga diferentes comportamientos en diferentes plataformas. Un caso de uso de esta función es mostrar diferentes contenidos de mensajes de notificación según la plataforma. La función se utiliza más plenamente cuando se dirige a múltiples dispositivos (que pueden abarcar múltiples plataformas) con mensajes temáticos. Esta sección lo guía a través de los pasos para que su aplicación reciba un mensaje de tema personalizado para cada plataforma.

Suscríbete a un tema del cliente.

Para suscribirse a un tema, llame al método messaging.subscribeToTopic al final de la función principal en el archivo main.dart de la aplicación Flutter.

// subscribe to a topic.
const topic = 'app_promotion';
await messaging.subscribeToTopic(topic);

[Opcional] Suscríbete a un tema desde el servidor para web

Puedes saltarte esta sección si no estás desarrollando en la plataforma web.

Actualmente, el SDK de FCM JS no admite la suscripción a temas del lado del cliente. En su lugar, puede suscribirse utilizando la API de administración de temas del lado del servidor del Admin SDK. Este código ilustra la suscripción a temas del lado del servidor con Java Admin SDK.

 private static void subscribeFcmRegistrationTokensToTopic() throws Exception {
   List<String> registrationTokens =
       Arrays.asList(
           "REPLACE_WITH_FCM_REGISTRATION_TOKEN"); // TODO: add FCM Registration Tokens to
   // subscribe
   String topicName = "app_promotion";

   TopicManagementResponse response =     FirebaseMessaging.getInstance().subscribeToTopic(registrationTokens, topicName);
   System.out.printf("Num tokens successfully subscribed %d", response.getSuccessCount());
 }

Abra el servidor de aplicaciones y haga clic en Ejecutar para ejecutar la función principal en el archivo FcmSubscriptionManager.java :

Enviar un mensaje con anulación de plataforma a un tema

Ahora está listo para enviar un mensaje de anulación de plataforma de temas. En el siguiente fragmento de código:

• Crea una solicitud de envío con un mensaje base y el título " A new app is available ".
• El mensaje genera una notificación en pantalla con el título " A new app is available " en iOS y plataformas web.
• El mensaje genera una notificación en pantalla con el título " A new Android app is available " en dispositivos Android.

private static void sendMessageToFcmTopic() throws Exception {
   String topicName = "app_promotion";

   Message message =
       Message.builder()
           .setNotification(
               Notification.builder()
                   .setTitle("A new app is available")
                   .setBody("Check out our latest app in the app store.")
                   .build())
           .setAndroidConfig(
               AndroidConfig.builder()
                   .setNotification(
                       AndroidNotification.builder()
                           .setTitle("A new Android app is available")
                           .setBody("Our latest app is available on Google Play store")
                           .build())
                   .build())
           .setTopic("app_promotion")
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to topic sent successfully!!");
 }

En la función principal del archivo FcmSender.java , descomente sendMessageToFcmTopic(); . Haga clic en Ejecutar para enviar el mensaje del tema.

7. Resumen y qué sigue

En resumen, ha aprendido cómo participar en el desarrollo de aplicaciones multiplataforma utilizando Flutter y FCM, lo que incluye la configuración del entorno, la integración de dependencias y la recepción y envío de mensajes. Para profundizar más, consulte los siguientes materiales:

laboratorios de código

• Para obtener más información sobre cómo funciona Flutter con otros productos de Firebase, incluida la autenticación de usuarios y la sincronización de datos, consulte Conozca Firebase para Flutter .
• Para obtener más información sobre FCM, incluidos temas y mensajes dentro de la aplicación: Utilice FCM y FIAM para enviar mensajes a los usuarios y Su primer mensaje push de multidifusión utilizando temas de FCM.

Referencias

• Sitio de base de fuego
• sitio de aleteo
• Widgets de aleteo de FlutterFire Firebase
• Canal de YouTube de Firebase
• Canal de YouTube de aleteo