Mise en œuvre des notifications de poussée dans les autochtones réagissent en utilisant Firebase

La mise en œuvre des notifications push dans une application React Native peut améliorer significativement l'engagement des utilisateurs en fournissant des mises à jour et des alertes en temps opportun. Firebase Cloud Messaging (FCM) offre une solution fiable et facile à intégrer pour gérer les notifications push sur les plateformes.

Préalables

• Un projet de React Native mis en place avec Expo ou React Native CLI
• Un projet Firebase créé dans la console Firebase
• Connaissances de base de JavaScript et Réagir Native
• Firebase SDK installé dans votre projet

Mise en place de la base de secours

Tout d'abord, créez un projet Firebase et ajoutez votre application à celui-ci. Téléchargez les fichiers de configuration:

Pour Android

Téléchargez le fichier google-services.json et placez-le dans le répertoire android/app de votre projet. Assurez-vous d'ajouter le SDK Firebase à vos dépendances de projet.

Pour iOS

Téléchargez le fichier GoogleService-Info.plist et ajoutez-le à votre projet Xcode. Installez le SDK Firebase via CocoaPods.

Installation des dépendances

Installez les paquets Firebase nécessaires :

• Pour les CLI autochtones réagissent:

Exécution :

• Pour le workflow géré par Expo:[

Utilisez le SDK Expo Firebase ou éjectez le flux de travail nu pour les modules natifs.

Demander des autorisations et obtenir un jeton

Dans votre code React Native, demandez l'autorisation de notifications et récupérez le jeton de l'appareil :

Exemple :

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
 const authStatus = await messaging().requestPermission();
 const enabled =
 authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
 authStatus === messaging.AuthorizationStatus.PROVISIONAL;

 if (enabled) {
 console.log('Authorization status:', authStatus);
 getFcmToken();
 }
}

async function getFcmToken() {
 const fcmToken = await messaging().getToken();
 if (fcmToken) {
 console.log('FCM Token:', fcmToken);
 // Send token to your server for push notifications
 }
}

requestUserPermission();

Traitement des notifications reçues

Configurer les auditeurs pour gérer les notifications et les réponses de premier plan :

messaging().onMessage(async remoteMessage => {
 console.log('A new FCM message arrived!', remoteMessage);
 // Show local notification or update UI
});

messaging().setBackgroundMessageHandler(async remoteMessage => {
 console.log('Message handled in the background!', remoteMessage);
 // Handle background message
});

Envoi des notifications de poussée

Utilisez l'API de messagerie Cloud Firebase ou la console Firebase pour envoyer des notifications. Exemple de charge utile:

{
 "to": "",
 "notification": {
 "title": "Hello!",
 "body": "This is a push notification."
 }
}

Envoyer le message via Firebase Cloud Messaging REST API ou Firebase Console.

Conclusion

Intégrer les notifications push avec Firebase dans React Native implique de configurer Firebase, demander des autorisations, récupérer des jetons de périphérique et gérer des messages. Une implémentation appropriée peut améliorer l'engagement des utilisateurs et garder votre application dynamique et interactive.