Dans ce tutoriel, nous allons apprendre à envoyer des notifications push dans React Native avec Firebase.
Nous allons vous guider à travers toutes les étapes de configuration de Firebase ainsi que le code React Native nécessaire à l’envoi de notifications.
Les notifications push sont un levier important de fidélisation des utilisateurs, c’est pourquoi les développeurs de React Native doivent les implémenter avec chaque application qu’ils créent.
LIRE AUSSI: Comment installer Android SDK Manager sur Ubuntu 18.04
Une notification push est un message qui apparaît sur un appareil mobile pour informer un utilisateur qu’une action spécifique s’est produite dans une application mobile donnée.
Les notifications push peuvent être appelées un canal de communication intégré à chaque appareil mobile aujourd’hui.
Les notifications push permettent aux applications d’atteindre les utilisateurs avec des messages courts auxquels les utilisateurs peuvent répondre.
Les notifications push ressemblent à des SMS et des alertes mobiles, mais elles ne touchent que les utilisateurs qui ont installé votre application.
LIRE AUSSI: Comment générer un APK d’une application React Native ?
Chaque plate-forme mobile prend en charge les notifications push – iOS, Android, Fire OS, Windows et BlackBerry. Mais tous ont leurs propres services.
Dans ce didacticiel, vous apprendrez à envoyer des notifications push Android avec FCM (Firebase Cloud Messaging) et React Native.
FCM est une solution cloud multiplateforme pour les messages et les notifications pour les applications Android, iOS et Web, qui peut actuellement être utilisée gratuitement.
Vous apprendrez également quelques autres choses importantes que vous pourrez implémenter ultérieurement dans votre propre projet React Native.
Dans ce tutoriel React Native, nous effectuerons principalement ces trois tâches:
- Configurer un exemple de projet de notifications push avec react-native-firebase-starter
- Stocker les jetons push dans la base de données en temps réel Firebase
- Déclencher des notifications push avec FCM, à l’aide de Firebase Cloud Functions pour interroger le jeton push stocké
Nous allons coder en dur un grand nombre de valeurs et de chaînes, juste pour vous montrer le processus de base qui fait fonctionner les notifications push.
Comment fonctionnent les notifications push?
Tout d’abord, nous devons identifier les utilisateurs, en envoyant une requête pour demander des autorisations push.
La demande est vérifiée par FCM, qui répond avec un token (appelé «push token»).
Ensuite, nous devons stocker le jeton push phare côté serveur, à savoir Firebase Real-time Database, pour ce didacticiel.
Déclenchement des notifications push avec les fonctions Firebase Cloud
Une fois que nous avons un jeton push pour un utilisateur donné, nous utilisons une fonction cloud Firebase pour déclencher des notifications push, ce qui en pratique est une alternative à notre propre serveur.
Les deux captures d’écran ci-dessus illustrent le flux de données exact nécessaire pour déclencher des notifications push dans React Native avec Firebase.
Maintenant que nous avons une vue d’ensemble de ce qui doit être fait pour déclencher des notifications push dans React Native avec Firebase, mettons-nous au travail.
Nous allons essayer de mettre en œuvre un scénario dans lequel nous récupérons le jeton push pour un utilisateur donné, en demandant ses autorisations, puis nous enverrons une notification push pour les accueillir dans l’application, à l’aide d’une fonction Firebase Cloud.
Configurer les notifications push dans React Native avec Firebase
Dans cette étape, nous mettons en place la prise en charge des notifications push dans notre projet React Native à l’aide du package react-native-firebase.
react-native-firebase est un package modulaire bien testé qui permet aux développeurs mobiles d’intégrer le SDK Firebase.
Il prend en charge les plates-formes iOS et Android, avec plus de 20 services Firebase.
Ils nous fournissent également un modèle standard de démarrage prêt à l’emploi, de sorte qu’il devienne facile de configurer l’ensemble du projet.
Cependant, nous devons configurer le modèle de démarrage pour générer un fichier google-service.json à partir de notre propre console Firebase.
La première étape ici consiste à cloner le modèle natif de stater firebase à l’aide de la commande suivante dans votre répertoire initialisé git:
git clone https://github.com/invertase/react-native-firebase-starter pushdemo
Après cela, nous devons suivre la configuration supplémentaire pour générer le fichier de service Google à partir de la console Firebase et l’ajouter au dossier android/app.
Maintenant, dirigez-vous vers la console Firebase et créez un nouveau projet comme indiqué dans la capture d’écran ci-dessous:
Une fois le nouveau projet créé, sélectionnez l’application Android et ouvrez MainApplication.java dans votre IDE. Là, nous verrons un package importé nommé com.invertase.rnfirebasestarted.
Nous devons copier com.invertase.rnfirebasestarter et le coller dans la console Firebase, comme indiqué dans la capture d’écran ci-dessous:
Suivez les points de guidage dans les captures d’écran et téléchargez le fichier google-services.json dans notre dossier de projet:
Ici, nous devons enregistrer firebase sur votre application Android comme illustré ci-dessous:
Après avoir téléchargé le fichier google-services.json dans votre propre dossier de projet, nous devons déplacer le fichier du dossier principal du projet vers le dossier app du projet.
Ensuite, nous démarrons l’application en utilisant la commande ci-dessous:
react-native run-android
Vous devriez pouvoir voir l’application suivante dans votre émulateur Android:
Stockage des jetons de notifications push dans la base de données Firebase
Pour cette étape, nous devons envoyer une demande d’autorisation à un appareil utilisateur pour autoriser les notifications push et récupérer le jeton push.
Si l’utilisateur accorde l’autorisation, nous stockons le jeton récupéré dans la base de données en temps réel Firebase.
Dans un premier temps, nous devons vérifier si l’utilisateur a déjà autorisé l’autorisation push avant. Pour stocker le jeton, nous utilisons l’extrait de code suivant:
firebase.messaging().hasPermission()
.then(enabled => {
if (enabled) {
alert('Yes')
} else {
alert('No')
}
});
Cela vous montre une alerte avec oui ou non, selon que l’autorisation des notifications push est autorisée ou non.
Heureusement, les autorisations pour les notifications push sont OUI par défaut, sur les plates-formes Android, vous n’avez donc besoin de demander des autorisations explicites que sur iOS.
Récupération du jeton de notifications push
En exploitant le package Firebase React Native, nous obtenons le fcmToken à partir du SDK Firebase, en utilisant le morceau de code suivant:
firebase.messaging().getToken()
.then(fcmToken => {
if (fcmToken) {
// user has a device token
} else {
// user doesn't have a device token yet
}
});
Le jeton est affiché dans la boîte d’alerte illustrée par la capture d’écran de l’émulateur ci-dessous:
Maintenant, effectuons un test rapide sur la console Firebase, pour voir si cela fonctionne.
Nous voulons envoyer une notification push au jeton push récupéré. Alors, collez le jeton dans le champ «Ajouter un jeton d’enregistrement FCM», comme indiqué dans la capture d’écran ci-dessous:
Cliquez maintenant sur le bouton Test pour tester que la notification push apparaît dans votre émulateur:
Remarques:
- Vous avez besoin d’un compte Google pour récupérer des notifications push sur un émulateur Android
- Vous ne pouvez pas envoyer de notifications push aux simulateurs iOS. Vous ne pouvez envoyer des notifications push qu’à des appareils iOS réels.
Enregistrement du jeton Push dans la base de données Firebase
En supposant que l’utilisateur s’est correctement enregistré pour les notifications push, et que nous disposons donc d’un jeton push valide, stockons-le dans la base de données, afin qu’il puisse être utilisé plus tard.
Pour y parvenir, nous effectuons les tâches suivantes:
- Vérifiez si les autorisations sont déjà accordées.
- Stockez les données utilisateur et le jeton dans la base de données.
Toute la logique est affichée dans l’extrait de code ci-dessous, dans la fonction asynchrone componentDidMount ():
async componentDidMount() {
const enabled = await firebase.messaging().hasPermission();
if (enabled) {
firebase
.messaging()
.getToken()
.then(fcmToken => {
if (fcmToken) {
console.log(fcmToken);
firebase
.database()
.ref("/users/" + Math.floor(Math.random() * Math.floor(1000)))
.set({
email: "instaman@gmail.com",
notification_token: fcmToken,
created_at: Date.now(),
})
.then(res => {
console.log(res);
});
} else {
alert("user doesn't have a device token yet");
}
});
} else {
alert("no");
}
}
Comme vous pouvez le voir, nous avons codé en dur les données utilisateur, puisqu’il ne s’agit que d’un projet de démarrage, pour que les choses fonctionnent correctement.
Nous enregistrons ensuite le jeton push dans la base de données en temps réel Firebase, comme indiqué dans la capture d’écran ci-dessous:
Déclencher des notifications push avec la fonction Firebase Cloud
Supposons maintenant que pour chaque nouvel utilisateur, vous souhaitiez déclencher une notification push pour l’accueillir dans votre application.
Nous pouvons y parvenir en créant une fonction Cloud.
Alors, activez la prise en charge des fonctions cloud en suivant ce guide.
Ensuite, dans le fichier index.js de votre projet, nous devons coller le code fourni dans l’extrait de code ci-dessous:
const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp(functions.config().firebase);
exports.sendPushNotification = functions.database
.ref("users/{userID}")
.onCreate(event => {
const data = event._data;
payload = {
notification: {
title: "Welcome",
body: "thank for installed our app",
},
};
admin
.messaging()
.sendToDevice(data.notification_token, payload)
.then(function(response) {
console.log("Notification sent successfully:", response);
})
.catch(function(error) {
console.log("Notification sent failed:", error);
});
});
Ici, nous avons créé une fonction qui se déclenche chaque fois que les utilisateurs ont ajouté un nouveau nœud et ont nouvellement inséré des données.
Lorsque cela se produit, nous envoyons une notification push à l’utilisateur.
Une fois que vous avez créé cette fonction, vous devez exécuter Firebase deploy pour envoyer votre fonction vers le cloud.
Après cela, vous verrez les instructions suivantes dans la fenêtre de votre terminal IDE:
Maintenant, exécutons votre application sur un appareil physique, comme indiqué dans la capture d’écran ci-dessous:
Comme vous pouvez le voir, nous avons reçu la première notification. Toutes nos félicitations! Vous venez de mettre en œuvre des notifications push dans React Native avec Firebase.
Bien joué!
Conclusion
Les notifications push sont un excellent levier de fidélisation de la croissance, vous devez donc en profiter pour développer une application mobile réussie. Heureusement, des packages NPM tels que RNFirebase sont disponibles, pour faciliter cette tâche dans React Native.
LIRE AUSSI: Comment publier une application Android sur Google Play Store
Dans ce didacticiel, nous avons appris comment configurer et envoyer les notifications Push Firebase sur Android et comment les déclencher.
Ce didacticiel comprenait également le processus d’utilisation de la base de données en temps réel Firebase pour stocker le jeton de transmission, puis déclencher des messages avec des fonctions cloud.
Si vous avez apprécié notre didacticiel sur comment envoyer les notifications push dans React Native avec Firebase, partagez-le avec vos amis.
Bon codage!
Leave a Comment