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 blocs spécifiques à la plate-forme de l'API FCM HTTP v1, qui vous permet d'envoyer un message ayant des comportements différents sur différentes plates-formes.

Conditions préalables

Connaissances de base de Flutter

Points abordés

  • Configurer et créer une application Flutter
  • Ajouter des dépendances FCM
  • Découvrez comment envoyer des messages FCM individuels à votre application.
  • Comment envoyer des messages FCM thématiques à 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 :

Si vous souhaitez exécuter l'atelier de programmation à l'aide de la plate-forme iOS, vous avez besoin d'un appareil iOS, d'un compte Apple Developer 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 est 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. Pour le reste 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 toutes 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 n'avez pas l'intention d'effectuer de développement 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 accédez à fcmflutter.
  1. Dans Android Studio, accédez à File > Open (Fichier > Ouvrir), recherchez le chemin d'accès à 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 depuis un navigateur Web ou 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 de la cible de compilation mise en évidence.

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

Interface utilisateur d'une application de démonstration Flutter lancée

Félicitations ! Vous avez créé 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 disposez déjà d'un projet Firebase, vous pouvez ignorer cette étape.

  1. Connectez-vous à la console Firebase à l'aide de votre compte Google.
  2. Cliquez sur le bouton pour créer un projet, puis saisissez un nom de projet (par exemple, fcm4flutter).
  3. Cliquez sur Continuer.
  4. Si vous y êtes invité, lisez et acceptez les Conditions d'utilisation de Firebase, puis cliquez sur Continuer.
  5. (Facultatif) Activez l'assistance IA dans la console Firebase (appelée "Gemini dans Firebase").
  6. Pour cet atelier de programmation, vous n'avez pas besoin de Google Analytics. Désactivez donc l'option Google Analytics.
  7. Cliquez sur Créer un projet, attendez que votre projet soit provisionné, puis cliquez sur Continuer.

Félicitations ! Vous avez créé un projet Firebase.

Configurer la CLI Firebase

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

Accédez à la documentation de référence de la CLI Firebase pour télécharger et installer la CLI Firebase. Exécutez la commande suivante pour vous connecter à Firebase avec votre compte Google :

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 pouvez n'en sélectionner qu'une ou deux. Si vous êtes invité à saisir l'ID du bundle iOS, saisissez com.flutter.fcm.fcmflutter ou votre propre ID du bundle iOS au format [company domain name].[project name]. Une fois la commande exécutée, actualisez la page de la console Firebase. Vous verrez que des applications ont été créées 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 developer d'Apple, puis cliquez sur Create a key (Créer une clé) dans l'onglet Keys (Clés).

Capture d'écran recadrée de la page Apple Developer mettant en évidence les composants de la page pour la création de clés

  1. Saisissez le nom de la clé et cochez Services Apple Push Notification (APNs). Capture d'écran recadrée de la page Apple Developer mettant en évidence la zone de texte pour le nouveau nom de clé
  2. Téléchargez le fichier clé, qui a l'extension .p8. Capture d'écran recadrée de la page Apple Developer mettant en évidence le bouton permettant de télécharger une clé
  3. Dans la console Firebase, accédez aux paramètres 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 modifier 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é APNs pour l'application iOS dans l'onglet Cloud Messaging. Saisissez l'ID de clé APNs de 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 de FCM

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

  • Initialisez FlutterFire.
  • Demandez l'autorisation d'envoyer des notifications.
  • 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 ce code :

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

Exécutez ensuite Tools > Flutter > Flutter Pub Get dans Android Studio pour charger les packages ajoutés dans Configurer FlutterFire et afficher le code avec le paramètre Intellisense approprié dans Android Studio.

Cela initialise FlutterFire pour la plate-forme actuelle DefaultFirebaseOptions.currentPlatform, 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.

Tout d'abord, copiez 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 a besoin d'utiliser une fonctionnalité qui nécessite un accès (par exemple, lorsqu'il active les notifications dans les paramètres de l'application). Dans cet atelier de programmation, nous demandons l'autorisation au démarrage de l'application pour plus de simplicité.

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 Android Studio, sélectionnez Chrome (web) dans le sélecteur de cible, puis exécutez à nouveau l'application.

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

Un 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écuterez à nouveau l'application Web sur Android Studio, vous serez peut-être à nouveau 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 enregistrer auprès de FCM. L'appel getToken renvoie un jeton d'enregistrement qui peut être utilisé par le serveur d'application ou l'environnement de serveur approuvé 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 est affiché 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 plus tard pour envoyer des messages.

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 pour autoriser les demandes d'envoi aux services Web Push compatibles.

Tout d'abord, ouvrez l'onglet Cloud Messaging du projet Firebase dans la console Firebase, puis faites défiler la page jusqu'à la section Configuration Web pour trouver la paire de clés existante ou en générer une. Cliquez sur le bouton en surbrillance pour copier la clé afin de pouvoir l'utiliser comme 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

Ensuite, remplacez le code d'enregistrement dans la section "Registration" (Enregistrement) par ce code, puis mettez à jour la clé VAPID :

// 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 ce qui suit dans firebase-messaging-sw.js pour permettre à l'application Web de recevoir les événements onMessage. Pour en savoir plus, consultez 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, dans l'onglet Paramètres du projet > Général, faites défiler la page vers le bas et recherchez Application Web. Copiez la section de code firebaseConfig et collez-la dans firebase-messaging-sw.js. Capture d&#39;écran recadrée du composant &quot;Application Web&quot; de la page de configuration Firebase

Enfin, dans la barre d'outils Android Studio, sélectionnez Chrome (web) dans le sélecteur de cibles et exécutez l'application. Dans la console Android Studio, le jeton d'enregistrement est affiché 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 pour pouvoir l'utiliser ultérieurement pour envoyer des messages.

É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 Notifications push et Modes d'arrière-plan dans l'onglet Signature et capacités pour 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 cibles et 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, vous avez bien enregistré votre application 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'application doit gérer les événements onMessage lorsque des messages arrivent alors qu'elle est au premier plan, et les événements onBackgroundMessage lorsqu'elle est en arrière-plan.

Gestionnaire de messages de 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 flutter pub add rxdart à partir du répertoire du projet.

Ensuite, exécutez 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.

Ensuite, ajoutez un gestionnaire d'événements pour écouter les messages au premier plan après le commentaire TODO: Set up foreground message handler. Il imprime les journaux et publie le message dans le 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);
 });

Ensuite, remplacez le widget State d'origine dans le fichier main.dart par ce code, qui ajoute un abonné au contrôleur de flux dans le widget State 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 en arrière-plan. Le gestionnaire doit être une fonction de niveau supérieur. L'UI peut être mise à jour lorsque l'application est mise au premier plan en gérant les messages (voir Gérer l'interaction) ou en synchronisant avec le serveur de l'application.

Créez la fonction de gestionnaire après le commentaire TODO: Define the background message handler en dehors de la fonction principale, puis 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 FlutterFire firebase_messaging, 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 de démarrage du serveur 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 sur le 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 du 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 d'accès src/main/resources du projet de 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 depuis la section "Enregistrement", puis collez-le comme valeur de la variable registrationToken.
  2. Cliquez sur Exécuter Bouton &quot;Exécuter&quot; 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 &quot;Exécuter&quot; affichée à côté de la fonction principale FcmSender.java dans Android Studio

Lorsque l'application Android est en arrière-plan, le message s'affiche dans la barre de notification.

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

Lorsque l'application Android est au premier plan, un journal s'affiche dans la console Android Studio : "Handling a foreground message" (Gestion d'un message au premier plan). Le contenu du message s'affiche également dans l'UI, 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 depuis le serveur d'application ou un autre environnement de serveur fiable, vous observerez un comportement similaire :

  • Lorsque l'application Web est en arrière-plan (c'est-à-dire lorsqu'elle est masquée par une autre fenêtre ou qu'un autre onglet est 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 à un sujet

La fonctionnalité de remplacement de plate-forme de l'API FCM HTTP/1.0 permet à une requête d'envoi de message d'avoir des comportements différents sur différentes plates-formes. Cette fonctionnalité peut, par exemple, être utilisée pour afficher différents contenus de messages de notification en fonction de la plate-forme. Cette fonctionnalité est pleinement utilisée lorsque vous ciblez plusieurs appareils (qui peuvent appartenir à plusieurs plates-formes) avec la messagerie thématique. Cette section vous explique comment faire en sorte que votre application reçoive un message thématique personnalisé pour chaque plate-forme.

S'abonner à un sujet depuis le 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 thème depuis le serveur pour le Web

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

Le SDK FCM JS ne permet pas actuellement l'abonnement à des thèmes côté client. Vous pouvez vous abonner à l'aide de l'API de gestion des thèmes côté serveur du SDK Admin. Ce code illustre l'abonnement à un thème 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'application et cliquez sur Exécuter Bouton &quot;Exécuter&quot; dans Android Studio pour exécuter la fonction principale dans le fichier FcmSubscriptionManager.java :

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

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

Vous êtes maintenant prêt à envoyer un message de remplacement 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 d'affichage avec le titre "A new app is available" sur les plates-formes iOS et Web.
  • Le message génère une notification 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 Exécuter Bouton &quot;Exécuter&quot; dans Android Studio pour envoyer le message du sujet.

7. Récapitulatif et étapes suivantes

En résumé, vous avez découvert le développement d'applications multiplate-formes attrayantes à l'aide de Flutter et de FCM, y compris 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