Une push notification c’est quoi ?
De manière générale, une push notification est un message instantané envoyé directement par une application (souvent mobile ou web) à un utilisateur, même lorsque l’application n’est pas ouverte. Ces notifications sont utilisées pour informer l’utilisateur d’une mise à jour, d’une alerte, d’une promotion ou d’un événement. Elles apparaissent généralement sous forme de pop-up ou de bannière sur l’écran de l’appareil.
Appliquée à Flutter, la push notification est donc un message envoyé via un service comme Firebase Cloud Messaging (FCM) ou un autre fournisseur de notifications. Flutter va ensuite vous permettre de recevoir, afficher et gérer ces notifications grâce à des bibliothèques comme firebase_messaging. Vous pouvez par exemple les utiliser pour :
- Faire des rappels de rendez-vous : Une application de gestion de tâches peut envoyer des notifications pour rappeler aux utilisateurs leurs rendez-vous ou échéances à venir.
- Envoyer des alertes de mise à jour : Si votre application propose de nouvelles fonctionnalités ou corrections de bugs, les notifications peuvent informer les utilisateurs de ces améliorations.
- Pousser des offres promotionnelles : Une application de commerce électronique peut envoyer des offres spéciales aux utilisateurs en fonction de leurs habitudes d’achat. Par exemple, si un utilisateur a souvent acheté des articles de sport, il peut recevoir une notification pour une vente spéciale sur des équipements sportifs.
- Envoyer des actualités et des médias : Les applications d’actualités peuvent envoyer des alertes lorsqu’une nouvelle importante est publiée, permettant aux utilisateurs de rester informés.
Mettre en place un système de push notifications
Pour implémenter les notifications push dans votre application Flutter, vous aurez besoin de suivre ces quelques étapes.
Installer le package firebase_messaging
La première étape consiste à ajouter les packages Flutter dont vous aurez besoin pour mettre en place les push notifications, à savoir :
Pour cela, ajoutez les lignes suivantes dans votre fichier pubspec.yaml :
dependencies:
firebase_messaging: ^15.1.6 //Remplacer par la dernière version
firebase_core: ^3.8.1 //Remplacer par la dernière versionVous pouvez ensuite exécuter la commande suivante pour être sûr installer les packages :
flutter pub getObtenir un token
Le token est un identifiant unique qui permet d’envoyer des notifications à un appareil spécifique. Sans cela, vous ne pourrez pas envoyer de push notification.
Pour l’obtenir, vous devez configurer Firebase Cloud Messaging (FCM) dans votre application. Voici un exemple de fonction que vous pouvez intégrer dans un bouton, qui permet de récupérer le token :
Future<void> setupFCM() async {
FirebaseMessaging messaging = FirebaseMessaging.instance;
// Demander la permission pour les notifications
NotificationSettings settings = await messaging.requestPermission(
alert: true,
badge: true,
sound: true,
);
// Vérifie si l'utilisateur accepte les notifications
if (settings.authorizationStatus == AuthorizationStatus.authorized) {
print('Notifications autorisées');
// Obtenir le token FCM de l'utilisateur
token = await messaging.getToken();
print("FCM Token: $token");
}
}Vous pouvez ensuite le stocker dans Firebase, pour pouvoir le réutiliser, au moment où l’utilisateur créer son compte :
Future<void> addUSer(SString? token) {
return FirebaseFirestore.instance
.collection('Users')
.doc(userID) //Remplacer par l'ID de votre utilisateur
.set({
'FCMtoken': token,
})
.then((value) => print('Utilisateur ajouté'))
.catchError((error) => print('Erreur : $error'));
}Dans cet exemple, la fonction setupFCM() demande la permission d’envoyer des notifications. Si l’utilisateur l’accepte, le token FCM est récupéré et enregistré dans la collection Users de Firestore.
Mise en place de la fonction Cloud
Maintenant que vous avez récupéré le token de l’utilisateur, il ne vous reste plus qu’à mettre en place le système de push notification, selon vos besoins, grâce à Cloud Fonction. Dans cet exemple, je vous montre une fonction qui envoie une notification push une fois par jour aux utilisateurs qui ont accepté les notifications :
// Fonction qui tourne toutes les heures entre 6h et 22h
exports.sendDailyNotifications = functions
.pubsub
.schedule("every hour from 06:00 to 22:00").onRun(async () => {
const currentHour = new Date().getHours();
// Récupérer tous les utilisateurs avec notifications activées
const usersSnapshot = await db
.collection("Users")
.where("notificationsEnabled", "==", true).get();
console.log("Nb d'utilisateurs avec notif activée : ", usersSnapshot.size);
// Déclarer promises avec un type explicite : tableau de Promises
const promises: Promise<void>[] = [];
usersSnapshot.forEach((doc) => {
const userData = doc.data();
// Check si heure notif de l'utilisateur correspond à heure actuelle
const notificationHour = parseInt(userData.notificationHour, 10);
if (notificationHour === currentHour) {
const token = userData.FCMtoken;
if (token) {
const message = {
notification: {
title: "C'est l'heure de réviser !",
body: "Vous avez des questions à revoir aujourd'hui.",
},
token: token,
};
// Envoyer la notification via FCM
const sendPromise = admin.messaging().send(message)
.then((response) => {
console.log("Notification envoyée à ", doc.id, " ", response);
})
.catch((error) => {
console.error("Erreur envoi de notif à", doc.id, " ", error);
});
promises.push(sendPromise);
} else {
console.warn("Utilisateur ", doc.id, " n'a pas de token FCM");
}
}
});
return Promise.all(promises)
.then(() => {
console.log("Toutes les notifications ont été envoyées avec succès.");
})
.catch((error) => {
console.error("Erreur lors de l'envoi des notifications : ", error);
});
});Une fois votre fonction cloud codée, déployez-la avec la commande firebase deploy –only functions .
Conclusion
En suivant ces étapes, vous pouvez mettre en place un système de notifications push efficace dans votre application Flutter. Cela vous permettra de communiquer de manière proactive avec vos utilisateurs et d’améliorer l’engagement de votre application.
