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

1. Introduction

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

Cet atelier de programmation vous guide tout au long du processus de développement d'une application multiplateforme avec Firebase Cloud Messaging (FCM) à l'aide de Flutter. Vous rédigerez une partie de la mise en œuvre de l'application, puis la créerez et l'exécuterez de manière transparente sur trois plates-formes : Android, iOS et Web. Vous apprendrez également comment intégrer FCM dans Flutter et comment é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.

Prérequis

Compréhension de base de Flutter.

Ce que vous apprendrez

  • Comment configurer et créer une application Flutter.
  • Comment ajouter des dépendances FCM.
  • Comment envoyer des messages FCM uniques à votre application.
  • Comment envoyer des messages FCM de sujet à votre application.

Ce dont vous aurez besoin

  • Dernière version stable d' Android Studio configurée avec les plugins Dart et Flutter.

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

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

2. Configuration du flottement

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

Pour configurer un environnement de développement Flutter, suivez ces étapes :

  1. Téléchargez et installez Flutter pour votre système d'exploitation : Installer | Battement
  2. Assurez-vous que l'outil Flutter est ajouté à votre chemin.
  3. Configurez votre éditeur pour Flutter comme indiqué dans Configurer un éditeur | Flutter Assurez-vous d'installer les plugins Flutter et Dart pour votre éditeur. Pour le reste de l'atelier de programmation, vous utiliserez Android Studio.
  4. À partir de la ligne de commande, exécutez flutter doctor , qui analyse votre configuration et répertorie toutes les dépendances manquantes qui doivent être corrigées. Suivez les instructions pour corriger toutes les dépendances manquantes importantes. 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 constituera 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 le répertoire par fcmflutter .
  1. Dans Android Studio, accédez à File -> Open , recherchez le chemin de votre application Flutter, puis cliquez sur Open 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 un navigateur Chrome ou un 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.

Une barre d'outils Android Studio avec la flèche déroulante du menu cible de construction en surbrillance.

Cliquez sur Exécuter Le bouton Exécuter dans Android Studio pour lancer l'application.

L'interface utilisateur d'une application de démonstration Flutter lancée

Toutes nos félicitations! Vous avez créé avec succès 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 de :

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

Créez votre projet Firebase

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

  1. Si vous disposez d'un compte Google, ouvrez Firebase et connectez-vous avec votre compte Google, puis cliquez sur Aller à la console .
  2. Dans la console Firebase, cliquez sur Ajouter un projet . Suivez les instructions pour créer un projet. Ne cochez pas Activer Google Analytics pour ce projet car vous ne l'utiliserez pas dans ce projet.
  3. Une fois le projet créé, accédez aux paramètres du projet en cliquant sur l'icône d'engrenage à côté de Présentation du projet .

Une 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 est utilisé pour identifier le projet de manière unique et il peut être différent du nom du projet . L'ID du projet sera utilisé pour configurer FlutterFire ultérieurement.

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

Toutes nos félicitations! Vous avez créé avec succès un projet Firebase.

Configurer la CLI Firebase

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

Accédez à la référence Firebase CLI pour télécharger et installer Firebase CLI. Connectez-vous à Firebase avec votre compte Google avec la commande suivante :

firebase login

Configurer FlutterFire

  1. Installez le plugin FlutterFire à l'aide de la commande : flutter pub add firebase_core
  2. Installez le plugin FCM : flutter pub add firebase_messaging
  3. Configurer 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 l'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 cadre du projet Firebase.

Une 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 sous le répertoire lib , qui contient toutes les options requises pour l'initialisation.

Configurer la messagerie cloud pour iOS

  1. Accédez à la page du développeur Apple et cliquez sur Créer une clé dans l'onglet Clés .

Une capture d'écran recadrée de la page du développeur Apple mettant en évidence les composants de la page pour la création de clés

  1. Entrez le nom de la clé et vérifiez les services Apple Push Notifications (APN) . Une capture d'écran recadrée de la page du développeur Apple mettant en évidence la zone de texte pour le nouveau nom de clé
  2. Téléchargez le fichier clé, qui porte une extension de fichier .p8 . Une capture d'écran recadrée de la page des développeurs Apple mettant en évidence le bouton permettant de télécharger une clé
  3. Dans la console Firebase , accédez aux paramètres du projet du projet et choisissez l'onglet Cloud Messaging .

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

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

  1. Téléchargez le fichier de clé APNs pour l'application iOS dans l'onglet Cloud Messaging . Saisissez l'ID de clé APN dans l'onglet Cloud Messaging et l'ID d'équipe, qui se trouvent dans le centre d'adhésion Apple. Une capture d'écran recadrée de la page de la console Firebase mettant en évidence les boutons permettant de télécharger une clé d'authentification APN.

4. Préparation du FCM

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

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

Initialisation

Pour initialiser le service, remplacez la fonction main ( 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 Set up FlutterFire et affichez 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 initializeApp est une fonction asynchrone et que le mot clé await garantit que l'initialisation est terminée avant d'exécuter l'application.

Demander la permission

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 une fenêtre contextuelle invitant l'utilisateur à autoriser ou à refuser l'autorisation.

Tout d’abord, copiez ce code dans la fonction principale sous le commentaire TODO: Request permission . Les settings renvoyés vous indiquent si l'utilisateur a accordé l'autorisation. Nous recommandons de demander l'autorisation uniquement lorsque l'utilisateur a besoin d'utiliser une fonctionnalité nécessitant un accès (par exemple, lorsque l'utilisateur 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.

Une capture d'écran recadrée de la barre d'outils Android Studio avec le sélecteur de cible et le bouton Exécuter

Ensuite, un onglet Chrome se lance avec une fenêtre contextuelle demandant l'autorisation. Si vous cliquez sur Allow , vous verrez un journal 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 la fenêtre contextuelle ne s'affiche plus. Notez que lorsque vous exécutez à nouveau l'application Web sur Android Studio, l'autorisation peut vous être demandée à nouveau. Une capture d'écran recadrée d'un onglet Chrome avec une fenêtre contextuelle demandant

Inscription

Copiez ce code dans la fonction principale sous le commentaire TODO: Register with FCM pour vous inscrire auprès du FCM. L'appel getToken renvoie un jeton d'enregistrement qui peut être utilisé par le serveur d'applications 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 imprimé comme ceci :

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. Web doit transmettre une clé VAPID à getToken afin d'autoriser l'envoi de demandes aux services Web push pris en charge.

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

Une capture d'écran recadrée du composant Web Push Certificates de la page de configuration Web qui met en évidence la paire de clés

Ensuite, remplacez le code d'enregistrement dans la section Inscription par ce code puis mettez à jour la 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');
 }

Ensuite, créez 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 des événements onMessage . Voir Définition des options de notification dans le service worker pour plus d'informations.

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

Après cela, sous l'onglet Paramètres du projet -> Général , faites défiler vers le bas et recherchez l' application Web , copiez la section de code firebaseConfig et collez-la dans firebase-messaging-sw.js . Une capture d'é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 est imprimé comme ceci :

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, cliquez avec le bouton droit sur le nom du projet, puis sélectionnez Flutter -> Ouvrir le module iOS dans Xcode . Une capture d'écran recadrée de
  2. Après le lancement de Xcode, activez les notifications push et les modes d'arrière-plan dans l'onglet Signature et capacités de la cible du projet. Voir Configurer votre application pour plus d'informations.
  3. Dans la barre d'outils Android Studio, sélectionnez un appareil iOS dans le sélecteur de cible et exécutez l'application. Une fois l'autorisation de notification accordée, le jeton d'enregistrement est imprimé dans la console Android Studio.

Une capture d'écran recadrée d'une application iOS demandant l'autorisation d'envoyer des notifications

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

5. Recevez des messages de FCM

Configurer des gestionnaires de messages

L'application doit gérer les événements onMessage lorsque les messages arrivent alors que l'application est en mode premier plan, et les événements onBackgroundMessage lorsque l'application est en arrière-plan.

Gestionnaire de 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'interface utilisateur.

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 cette commande depuis le répertoire du projet : flutter pub add rxdart .

Ensuite, exécutez 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 de premier plan après le commentaire TODO: Set up foreground message handler . Il imprime les journaux et publie le message sur 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);
 });

Après cela, 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'interface utilisateur peut être mise à jour lorsque l'application est mise au premier plan en gérant les messages (voir Gestion des interactions ) ou en se synchronisant avec le serveur d'application.

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

Depuis FlutterFire firebase_messaging version 11.2.8, la gestion des messages en arrière-plan sur les plates-formes Web nécessite un flux différent. Par conséquent, vous devez 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'applications

  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 une fonctionnalité d'envoi de messages FCM.
  2. Configurez un compte de service Firebase qui permet au SDK d'administration Firebase d'autoriser les appels aux API FCM. Ouvrez les paramètres du projet dans la console Firebase et sélectionnez l'onglet Comptes de service . Choisissez « Java » et cliquez sur Generate new private key pour télécharger l'extrait de configuration. Capture d'écran recadrée mettant en évidence l'extrait de configuration du SDK Admin du composant Comptes de service de la page Paramètres du projet.
  3. Renommez le fichier en service-account.json et copiez-le dans le chemin src/main/resources du projet de serveur.

Envoyer un message 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é depuis la section Registration et collez-le dans la valeur de la variable registrationToken .
  2. Cliquez sur Exécuter Le bouton Exécuter dans Android Studio pour exécuter la fonction principale et envoyer le message à l'utilisateur via FCM. Une capture d'écran recadrée de l'icône Exécuter affichée à côté de la fonction principale FcmSender.java dans Android Studio

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

Une capture d'écran recadrée d'un message apparaissant dans la barre de notification Android

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

Une capture d'écran recadrée du contenu du message affiché dans l'application Android

Si vous collez le jeton d'enregistrement et envoyez le message depuis le serveur d'applications ou un autre environnement de serveur approuvé, vous verrez 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), vous verrez une notification Web.

Capture d'écran recadrée d'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 cliquant avec le bouton droit sur le Web et en sélectionnant Inspect . Le contenu du message est également affiché dans l'interface utilisateur. Une capture d'écran recadrée de la console Chrome avec les journaux de débogage

6. Envoyez un message thématique

La fonctionnalité de remplacement de plate-forme de l'API FCM HTTP v1 permet à une demande d'envoi de message d'avoir différents comportements sur différentes plates-formes. Un cas d'utilisation de cette fonctionnalité consiste à afficher différents contenus de messages de notification en fonction de la plate-forme. La fonctionnalité est plus pleinement utilisée lors du ciblage de plusieurs appareils (pouvant s'étendre sur plusieurs plates-formes) avec une messagerie thématique. Cette section vous guide à travers les étapes permettant à votre application de recevoir un message thématique personnalisé pour chaque plateforme.

Abonnez-vous à un sujet du client

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

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

[Facultatif] Abonnez-vous à un sujet depuis le serveur pour le Web

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

Le SDK FCM JS ne prend actuellement pas en charge l'abonnement aux rubriques côté client. Au lieu de cela, vous pouvez vous abonner à l'aide de l'API de gestion des sujets côté serveur du SDK Admin. Ce code illustre l'abonnement à une rubrique côté serveur avec le SDK Java Admin.

 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 Exécuter Le bouton Exécuter dans Android Studio pour exécuter la fonction principale dans le fichier FcmSubscriptionManager.java :

Une capture d'écran recadrée de l'icône Exécuter affichée à côté de la fonction principale FcmSubscriptionManager.java dans Android Studio

Envoyer un message avec des s de remplacement de plateforme à un sujet

Vous êtes maintenant prêt à envoyer un message de remplacement de la plateforme thématique. Dans l'extrait de code suivant :

  • Vous construisez une demande 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 plateformes iOS et web.
  • Le message génère une notification d'affichage intitulée « 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 , décommentez sendMessageToFcmTopic(); . Cliquez sur Exécuter Le bouton Exécuter dans Android Studio pour envoyer le message du sujet.

7. Résumé et suite

Pour résumer, vous avez appris à développer des applications multiplateformes à 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 approfondir, consultez les documents suivants :

Ateliers de programmation

Les références