Envoyer et recevoir des notifications pour une application Flutter à l'aide de Firebase Cloud Messaging

1. Introduction

Dernière mise à jour: 04/04/2022

Cet atelier de programmation vous explique comment développer une application multiplate-forme avec Firebase Cloud Messaging (FCM) à l'aide de Flutter. Vous allez écrire une partie de l'implémentation de l'application, puis la compiler et l'exécuter de manière fluide sur trois plates-formes : Android, iOS et le Web. Vous apprendrez également à intégrer FCM dans Flutter et à écrire du code pour recevoir et envoyer des messages. Enfin, l'atelier de programmation présente la fonctionnalité de blocages spécifiques à une plate-forme de l'API HTTP FCM v1, qui vous permet d'envoyer un message ayant des comportements différents selon la plate-forme.

Conditions préalables

Connaissances de base sur Flutter

Points abordés

  • Configurer et créer une application Flutter
  • Ajouter des dépendances FCM
  • Envoyer des messages FCM uniques à votre application
  • Comment envoyer des messages FCM avec des sujets à votre application.

Prérequis

  • La dernière version stable d'Android Studio configurée avec les plug-ins Dart et Flutter

Vous pouvez exécuter l'atelier de programmation sur l'un des appareils suivants:

Pour exécuter l'atelier de programmation sur la plate-forme iOS, vous avez également besoin d'un appareil iOS, d'un compte de développeur Apple et d'un appareil macOS sur lequel XCode est installé.

2. Configuration de Flutter

Si vous avez déjà configuré un environnement de développement Flutter, ignorez cette section.

Pour configurer un environnement de développement Flutter, procédez comme suit:

  1. Téléchargez et installez Flutter pour votre système d'exploitation: Installer | Flutter
  2. Assurez-vous que l'outil Flutter a été ajouté à votre chemin d'accès.
  3. Configurez votre éditeur pour Flutter comme indiqué dans Configurer un éditeur | Flutter. Veillez à installer les plug-ins Flutter et Dart pour votre éditeur. Dans la suite de l'atelier de programmation, vous utiliserez Android Studio.
  4. Depuis la ligne de commande, exécutez flutter doctor, qui analyse votre configuration et liste les dépendances manquantes à corriger. Suivez les instructions pour corriger les dépendances importantes manquantes. Notez que certaines dépendances peuvent ne pas être nécessaires. Par exemple, si vous ne développez pas pour iOS, une dépendance CocoaPods manquante ne sera pas un problème bloquant.
  5. Exécutez cette commande pour créer votre application Flutter dans le répertoire fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter, puis remplacez les répertoires par fcmflutter.
  1. Dans Android Studio, accédez à File -> Open (Fichier -> Ouvrir), recherchez le chemin d'accès de votre application Flutter, puis cliquez sur Open (Ouvrir) pour ouvrir le projet dans Android Studio. Le code de l'application se trouve dans le fichier lib/main.dart.

Dans la barre d'outils Android Studio, cliquez sur la flèche vers le bas pour sélectionner un appareil Android. Si le sélecteur de cible est vide, installez des appareils Android virtuels, ou le navigateur Chrome ou le simulateur iOS si vous préférez lancer l'application à partir d'un navigateur Web ou d'un appareil iOS. Vous devrez peut-être lancer l'appareil manuellement et actualiser la liste pour trouver l'appareil cible.

Barre d'outils Android Studio avec la flèche du menu déroulant "Build target" (Créer une cible) mise en évidence.

Cliquez sur Run (Exécuter) Bouton "Run" (Exécuter) dans Android Studio pour lancer l'application.

UI d'une application de démonstration Flutter lancée

Félicitations ! Vous venez de créer une application Flutter.

3. Configuration de Firebase et FlutterFire

Pour développer une application qui s'intègre à Firebase Cloud Messaging à l'aide de Flutter, vous avez besoin des éléments suivants :

  • Un projet Firebase.
  • Une CLI Firebase fonctionnelle.
  • Une installation de FlutterFire.
  • Application configurée et générée avec flutterfire configure.

Créer votre projet Firebase

Si vous avez déjà un projet Firebase, vous pouvez ignorer cette étape.

  1. Si vous possédez un compte Google, ouvrez Firebase et connectez-vous avec votre compte Google, puis cliquez sur Accéder à la console.
  2. Dans la console Firebase, cliquez sur Ajouter un projet. Suivez les instructions pour créer un projet. Ne cochez pas la case Activer Google Analytics pour ce projet, car vous ne l'utiliserez pas dans ce projet.
  3. Une fois le projet créé, accédez à ses Paramètres en cliquant sur l'icône en forme de roue dentée à côté de Vue d'ensemble du projet.

Capture d'écran recadrée de la console Firebase mettant en évidence l'icône du menu des paramètres du projet et le

L'ID du projet permet d'identifier de manière unique le projet. Il peut être différent du nom du projet. L'ID de projet vous permettra de configurer FlutterFire ultérieurement.

Capture d'écran recadrée de la console Firebase mettant en évidence l'ID du projet

Félicitations ! Votre projet Firebase a bien été créé.

Configurer la CLI Firebase

Si la CLI Firebase est configurée, vous pouvez ignorer cette étape.

Consultez la documentation de référence de la CLI Firebase pour télécharger et installer la CLI Firebase. Connectez-vous à Firebase avec votre compte Google à l'aide de la commande suivante :

firebase login

Configurer FlutterFire

  1. Installez le plug-in FlutterFire à l'aide de la commande : flutter pub add firebase_core
  2. Installez le plug-in FCM: flutter pub add firebase_messaging
  3. Configurez la CLI FlutterFire : dart pub global activate flutterfire_cli
  4. Configurez le projet Firebase sur Flutter : flutterfire configure --project=fcm4flutter. Utilisez les touches fléchées et la barre d'espace pour sélectionner les plates-formes ou appuyez sur Entrée pour utiliser les plates-formes par défaut.

Cet atelier de programmation utilise les plates-formes par défaut (Android, iOS et Web), mais vous ne pouvez sélectionner qu'une ou deux plates-formes. Si vous êtes invité à saisir l'ID du bundle iOS, saisissez com.flutter.fcm.fcmflutter ou votre propre ID de bundle iOS au format [company domain name].[project name]. Une fois la commande terminée, actualisez la page de la console Firebase. Vous verrez qu'il a créé des applications pour les plates-formes sélectionnées dans le projet Firebase.

Capture d'écran recadrée de la console Firebase montrant les applications créées pour les plates-formes sélectionnées

Cette commande génère un fichier firebase_options.dart dans le répertoire lib, qui contient toutes les options requises pour l'initialisation.

Configurer Cloud Messaging pour iOS

  1. Accédez à la page pour les développeurs d'Apple, puis cliquez sur Créer une clé dans l'onglet Clés.

Capture d'écran recadrée de la page des développeurs Apple mettant en évidence les composants de la page permettant de créer la clé

  1. Saisissez le nom de la clé et cochez Apple Push Notification Services (APNS). Capture d'écran recadrée de la page du développeur Apple mettant en évidence la zone de texte du nouveau nom de clé
  2. Téléchargez le fichier de clé, qui porte l'extension .p8. Capture d'écran recadrée de la page des développeurs Apple mettant en surbrillance le bouton permettant de télécharger une clé
  3. Dans la console Firebase, accédez à la section Paramètres du projet du projet, puis sélectionnez l'onglet Cloud Messaging.

Capture d'écran recadrée de la page de la console Firebase mettant en évidence les composants permettant de mettre à jour les paramètres du projet

Capture d'écran recadrée de la page de la console Firebase mettant en évidence l'onglet Cloud Messaging

  1. Importez le fichier de clé APN pour l'application iOS dans l'onglet Cloud Messaging. Saisissez l'ID de clé APNs dans l'onglet Cloud Messaging et l'ID d'équipe, que vous trouverez dans l'Apple Member Center. Capture d'écran recadrée de la page de la console Firebase mettant en évidence les boutons permettant d'importer une clé d'authentification APNs

4. Préparation FCM

Pour qu'une application puisse recevoir des messages de FCM, elle doit:

  • Initialisez FlutterFire.
  • Demandez des autorisations de notification.
  • Enregistrez-vous auprès de FCM pour obtenir un jeton d'enregistrement.

Initialisation

Pour initialiser le service, remplacez la fonction principale (lib/main.dart) par le code suivant:

// 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());
}

Ensuite, exécutez Outils -> Flutter -> Flutter Pub Get dans Android Studio pour charger les packages ajoutés lors de la configuration de FlutterFire et afficher le code avec le paramètre Intellisense approprié dans Android Studio.

Cette commande initialise FlutterFire pour la plate-forme DefaultFirebaseOptions.currentPlatform actuelle, qui est importée à partir du fichier firebase_options.dart généré. Notez que initializeApp est une fonction asynchrone et que le mot clé await garantit que l'initialisation est terminée avant l'exécution de l'application.

Demander l'autorisation

L'application doit demander l'autorisation de l'utilisateur pour recevoir des notifications. La méthode requestPermission fournie par firebase_messaging affiche une boîte de dialogue ou un pop-up invitant l'utilisateur à accorder ou à refuser l'autorisation.

Commencez par copier ce code dans la fonction principale sous le commentaire TODO: Request permission. Le settings renvoyé vous indique si l'utilisateur a accordé l'autorisation. Nous vous recommandons de ne demander l'autorisation que lorsque l'utilisateur doit utiliser une fonctionnalité nécessitant un accès (par exemple, lorsqu'il active les notifications dans les paramètres de l'application). Dans cet atelier de programmation, pour plus de simplicité, nous demandons une autorisation au démarrage de l'application.

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}');
 }

Ensuite, dans la barre d'outils d'Android Studio, sélectionnez Chrome (web) dans le sélecteur cible, puis exécutez à nouveau l'application.

Capture d&#39;écran recadrée de la barre d&#39;outils d&#39;Android Studio avec le sélecteur de cible et le bouton &quot;Run&quot; (Exécuter)

Un nouvel onglet Chrome s'ouvre alors, avec un pop-up demandant l'autorisation. Si vous cliquez sur Allow, un journal s'affiche dans la console Android Studio: Permission granted: AuthorizationStatus.authorized. Une fois que vous avez autorisé ou bloqué la demande d'autorisation, votre réponse est stockée avec votre application dans le navigateur, et le pop-up ne s'affiche plus. Notez que lorsque vous exécutez à nouveau l'application Web sur Android Studio, vous pouvez de nouveau être invité à accorder l'autorisation. Capture d&#39;écran recadrée d&#39;un onglet Chrome avec un pop-up demandant

Inscription

Copiez ce code dans la fonction principale sous le commentaire TODO: Register with FCM pour vous inscrire à FCM. L'appel getToken renvoie un jeton d'enregistrement qui peut être utilisé par le serveur d'applications ou l'environnement de serveur de confiance pour envoyer des messages aux utilisateurs.

// 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');
}

Dans la barre d'outils Android Studio, sélectionnez un appareil Android et exécutez l'application. Dans la console Android Studio, le jeton d'enregistrement s'affiche comme suit:

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

Copiez-le dans un éditeur de texte, car vous l'utiliserez pour envoyer des messages ultérieurement.

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

Étapes supplémentaires pour recevoir des messages sur le Web

Les applications Web nécessitent deux étapes supplémentaires pour obtenir le jeton d'enregistrement et écouter les messages entrants. Le Web doit transmettre une clé VAPID à getToken afin d'autoriser l'envoi de requêtes aux services Web push compatibles.

Tout d'abord, ouvrez l'onglet Cloud Messaging du projet Firebase dans la console Firebase, faites défiler la page jusqu'à la section Web configuration (Configuration Web) pour trouver la paire de clés existante, ou générez-en une. Cliquez sur le bouton en surbrillance pour copier la clé afin qu'elle puisse être utilisée en tant que vapidKey.

Capture d&#39;écran recadrée du composant &quot;Certificats Web push&quot; de la page de configuration Web mettant en évidence la paire de clés

Remplacez ensuite le code d'enregistrement dans la section "Enregistrement" par ce code, puis mettez à jour la clé 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');
 }

Créez ensuite un fichier firebase-messaging-sw.js sous le répertoire web/, à la racine de votre projet. Copiez le code suivant dans firebase-messaging-sw.js pour autoriser l'application Web à recevoir des événements onMessage. Pour en savoir plus, consultez la section Définir les options de notification dans le service worker.

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

Ensuite, sous Paramètres du projet -> Général, faites défiler l'écran vers le bas, recherchez l'application Web, copiez la section de code firebaseConfig et collez-la dans firebase-messaging-sw.js. Capture d&#39;écran recadrée du composant Web App de la page de configuration de Firebase

Enfin, dans la barre d'outils Android Studio, sélectionnez Chrome (web) dans le sélecteur de cible et exécutez l'application. Dans la console Android Studio, le jeton d'enregistrement s'affiche comme suit :

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

Copiez le jeton d'enregistrement dans un éditeur de texte afin de pouvoir l'utiliser pour envoyer des messages ultérieurement.

Étapes supplémentaires pour recevoir des messages sur iOS

Pour recevoir des messages de FCM, les appareils iOS doivent activer les notifications push et les modes d'arrière-plan sur Xcode:

  1. Dans Android Studio, effectuez un clic droit sur le nom du projet, puis sélectionnez Flutter -> Open iOS module in Xcode (Ouvrir le module iOS dans Xcode). Capture d&#39;écran recadrée de
  2. Une fois Xcode lancé, activez les notifications push et le mode d'arrière-plan dans la section Signature et Capacités de la cible du projet. Pour en savoir plus, consultez Configurer votre application.
  3. Dans la barre d'outils Android Studio, sélectionnez un appareil iOS dans le sélecteur de cible, puis exécutez l'application. Une fois l'autorisation de notification accordée, le jeton d'enregistrement est imprimé dans la console Android Studio.

Capture d&#39;écran recadrée d&#39;une application iOS demandant l&#39;autorisation d&#39;envoyer des notifications

Félicitations, votre application a bien été enregistrée auprès de FCM. Vous êtes prêt à recevoir des messages, comme décrit dans la section suivante.

5. Recevoir des messages de FCM

Configurer des gestionnaires de messages

L'appli doit gérer les événements onMessage lorsque des messages arrivent lorsqu'elle est en mode premier plan, et les événements onBackgroundMessage lorsqu'elle est en arrière-plan.

Gestionnaire des messages au premier plan

Tout d'abord, ajoutez un contrôleur de flux après le commentaire TODO: Add stream controller dans le fichier main.dart afin de transmettre les messages du gestionnaire d'événements à l'UI.

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

Pour ajouter la dépendance rxdart, exécutez la commande suivante à partir du répertoire du projet : flutter pub add rxdart.

Exécutez ensuite Tools -> Flutter -> Flutter Pub Get (Outils -> Flutter -> Flutter Pub Get) dans Android Studio pour charger le package rxdart.dart et afficher le code avec les paramètres Intellisense appropriés dans Android Studio.

Ajoutez ensuite un gestionnaire d'événements pour écouter les messages de premier plan après le commentaire TODO: Set up foreground message handler. Il imprime les journaux et publie le message auprès du contrôleur de flux.

 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);
 });

Remplacez ensuite le widget d'état d'origine du fichier main.dart par ce code, qui ajoute un abonné au contrôleur de flux dans le widget d'état et affiche le dernier message sur le 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),
         ],
       ),
     ),
   );
 }
}

Gestionnaire de messages en arrière-plan pour Android/iOS

Les messages sont gérés par le gestionnaire onBackgroundMessage lorsque l'application est exécutée en arrière-plan. Le gestionnaire doit être une fonction de niveau supérieur. Vous pouvez mettre à jour l'interface utilisateur lorsque l'application est exécutée au premier plan en gérant les messages (voir Gérer les interactions) ou en synchronisant l'interface avec le serveur d'applications.

Créez la fonction de gestionnaire après le commentaire TODO: Define the background message handler en dehors de la fonction principale et appelez-la dans la fonction principale après le commentaire 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());
}

Gestionnaire de messages en arrière-plan pour le Web

À partir de la version 11.2.8 de firebase_messaging FlutterFire, la gestion des messages en arrière-plan sur les plates-formes Web nécessite un flux différent. Vous devez donc ajouter un gestionnaire de messages distinct dans le service worker web/firebase-messaging-sw.js.

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

Configurer le serveur d'application

  1. Importez le code du serveur de démarrage en ouvrant le projet https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server dans Android Studio. Le serveur est un projet Java basé sur Gradle avec une dépendance au SDK firebase-admin, qui fournit la fonctionnalité d'envoi de messages FCM.
  2. Configurez un compte de service Firebase qui permet au SDK Firebase Admin d'autoriser les appels aux API FCM. Ouvrez les paramètres du projet dans la console Firebase, puis sélectionnez l'onglet Comptes de service. Sélectionnez "Java", puis cliquez sur Generate new private key pour télécharger l'extrait de configuration. Capture d&#39;écran recadrée mettant en évidence l&#39;extrait de configuration SDK Admin du composant &quot;Comptes de service&quot; de la page &quot;Paramètres du projet&quot;
  3. Renommez le fichier service-account.json et copiez-le dans le chemin src/main/resources du projet serveur.

Envoyer un message de test

Dans le fichier FcmSender.java, sendMessageToFcmRegistrationToken compose un message de notification avec une charge utile de données. Le jeton d'enregistrement cible l'instance d'application à laquelle le message est envoyé.

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. Copiez le jeton d'enregistrement Android copié dans la section "Enregistrement", puis collez-le dans la valeur de la variable registrationToken.
  2. Cliquez sur Exécuter Bouton &quot;Run&quot; (Exécuter) dans Android Studio pour exécuter la fonction principale et envoyer le message à l'utilisateur via FCM. Capture d&#39;écran recadrée de l&#39;icône Exécuter affichée à côté de la fonction principale FcmSender.java dans Android Studio

Lorsque l'application Android est exécutée en arrière-plan, le message apparaît dans la barre de notifications.

Capture d&#39;écran recadrée d&#39;un message s&#39;affichant dans la barre de notifications Android

Lorsque l'application Android est au premier plan, un journal s'affiche dans la console Android Studio : "Gestion d'un message de premier plan". Le contenu du message s'affiche également dans l'interface utilisateur, car celle-ci est abonnée au contrôleur de flux pour les nouveaux messages.

Capture d&#39;écran recadrée du contenu du message affiché dans l&#39;application Android

Si vous collez le jeton d'enregistrement et envoyez le message à partir du serveur d'applications ou d'un autre environnement de serveur de confiance, vous obtiendrez un comportement similaire:

  • Lorsque l'application Web est exécutée en arrière-plan (c'est-à-dire lorsqu'elle est masquée par une autre fenêtre ou un autre onglet actif), une notification Web s'affiche.

Capture d&#39;écran recadrée d&#39;une notification Web affichée dans le navigateur Chrome

  • Lorsque l'application Web est au premier plan, vous pouvez afficher le journal dans la console Chrome en effectuant un clic droit sur le Web et en sélectionnant Inspect. Le contenu du message s'affiche également dans l'UI. Capture d&#39;écran recadrée de la console Chrome avec les journaux de débogage

6. Envoyer un message sur le sujet

La fonctionnalité de remplacement de plate-forme de l'API HTTP FCM v1 permet à une demande d'envoi de message de présenter différents comportements sur différentes plates-formes. L'un des cas d'utilisation de cette fonctionnalité consiste à afficher un contenu de message de notification différent en fonction de la plate-forme. Cette fonctionnalité est surtout utilisée lorsque vous ciblez plusieurs appareils (qui peuvent couvrir plusieurs plates-formes) à l'aide de messages thématiques. Cette section vous explique comment faire en sorte que votre application reçoive un message de sujet personnalisé pour chaque plate-forme.

S'abonner à un sujet à partir du client

Pour vous abonner à un sujet, appelez la méthode messaging.subscribeToTopic à la fin de la fonction principale dans le fichier main.dart de l'application Flutter.

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

[Facultatif] S'abonner à un sujet depuis le serveur pour le Web

Vous pouvez ignorer cette section si vous ne développez pas sur la plate-forme Web.

Le SDK JS FCM n'est actuellement pas compatible avec l'abonnement à un sujet côté client. Vous pouvez plutôt vous abonner à l'aide de l'API de gestion des sujets côté serveur du SDK Admin. Ce code illustre l'abonnement à un sujet côté serveur avec le SDK Admin Java.

 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());
 }

Ouvrez le serveur d'applications et cliquez sur Run Bouton &quot;Run&quot; (Exécuter) dans Android Studio (Exécuter) pour exécuter la fonction principale dans le fichier FcmSubscriptionManager.java:

Capture d&#39;écran recadrée de l&#39;icône d&#39;exécution affichée à côté de la fonction principale FcmSubscriptionManager.java dans Android Studio

Envoyer un message avec des remplacements de plate-forme à un sujet

Vous êtes maintenant prêt à envoyer un message de forçage de plate-forme de sujet. Dans l'extrait de code suivant:

  • Vous créez une requête d'envoi avec un message de base et le titre "A new app is available".
  • Le message génère une notification à afficher avec le titre "A new app is available" sur les plates-formes iOS et Web.
  • Le message génère une notification d'affichage avec le titre "A new Android app is available" sur les appareils 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!!");
 }

Dans la fonction principale du fichier FcmSender.java, annulez la mise en commentaire de sendMessageToFcmTopic();. Cliquez sur Run (Exécuter) Bouton &quot;Run&quot; (Exécuter) dans Android Studio pour envoyer le message du sujet.

7. Récapitulatif et prochaines étapes

Pour résumer, vous avez appris à développer des applications multiplates-formes à l'aide de Flutter et FCM, ce qui inclut la configuration de l'environnement, l'intégration des dépendances, ainsi que la réception et l'envoi de messages. Pour en savoir plus, consultez les ressources suivantes :

Ateliers de programmation

References