Dépannage des problèmes courants de React Native Firebase - Cloud Messaging

Source : npm @react-native-firebase/app

Êtes-vous confronté à des problèmes lors de la mise en œuvre de React Native Firebase Cloud Messaging ?

Obtenir des notifications opérationnelles sans problème sur Android et iOS peut parfois s'avérer difficile, compte tenu des configurations uniques exigées par chaque plate-forme.
Ce guide vous guidera à travers les étapes importantes pour configurer Firebase Cloud Messaging (FCM) dans React Native et abordera certaines erreurs courantes :

Configuration de Firebase :

Téléchargez GoogleService-Info.plist (iOS) et google-services.json (Android).

Sélectionnez le fichier GoogleService-Info.plist téléchargé sur votre ordinateur et assurez-vous que la case « Copier les éléments si nécessaire » est activée

Téléchargez le fichier google-services.json et placez-le dans votre projet à l'emplacement suivant :
/android/app/google-services.json.

Activer les notifications push pour iOS dans Xcode :

La fonctionnalité Notifications push doit être ajoutée au projet. Cela peut être fait via l'option « Capacité » sous l'onglet « Signature et capacités » :
Cliquez sur le bouton « Capacités ».
Recherchez « Notifications push ».

Une fois sélectionnée, la fonctionnalité sera affichée sous les autres fonctionnalités activées. Si aucune option n'apparaît lors de la recherche, la fonctionnalité est peut-être déjà activée

La fonctionnalité Modes d'arrière-plan doit être activée, ainsi que les sous-modes Récupération en arrière-plan et Notifications à distance. Cela peut être ajouté via l'option « Capacité » dans l'onglet « Signature et capacités ».

Maintenant, assurez-vous que les sous-modes « Récupération en arrière-plan » et « Notifications à distance » sont activés

Guide de configuration pour React Native FCM :

Suivez le guide de configuration officiel de Firebase Cloud Messaging. Ce guide comprend les étapes essentielles pour commencer à envoyer et recevoir des notifications sur Android et iOS. Une fois ces étapes terminées, vous pouvez tester les notifications directement depuis la console Firebase sous Messagerie en composant une nouvelle campagne.

Remarque :
Pour les utilisateurs de Mac M1, les problèmes avec CocoaPods sont courants lors de la configuration de React Native Firebase. Voici quelques solutions rapides :

1. Utilisez arch -x86_64 - Les Mac M1 peuvent rencontrer des problèmes de compatibilité avec les CocoaPods. Exécutez des commandes avec arch -x86_64 pour utiliser l'architecture x86_64 :

installation du pod arch -x86_64

1. Mettre à jour le référentiel CocoaPods- Si vous rencontrez des erreurs liées à des versions de pod obsolètes, mettez à jour votre dépôt CocoaPods :

Mise à jour du dépôt de pods arch -x86_64

1. Correction de l'erreur ffi- Vous pourriez rencontrer une erreur de bibliothèque ffi. Pour y remédier, installez la gemme ffi spécifiquement pour votre architecture :

sudo arch -x86_64 gem install ffi

1. Réinstaller les pods - Après ces étapes, réexécutez la commande d'installation du pod :

installation du pod arch -x86_64

Suivre ces étapes devrait aider à résoudre les problèmes spécifiques à l'architecture sur les Mac M1 lors de l'installation et de la gestion des pods pour votre projet React Native.

Remarque :
Pour les appareils Android 13, vous devez demander explicitement les autorisations d’exécution pour les notifications push. Ajoutez les autorisations suivantes à votre AndroidManifest.xml :

Ensuite, dans votre code, demandez des autorisations de notification au moment de l'exécution. Vous pouvez gérer les autorisations Android directement comme ceci :

import { Platform, PermissionsAndroid } from 'react-native';

async function requestNotificationPermission() {
// Version >= 33(`~project/build.gradle`)
  if (Platform.OS === 'android' ) {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
    );

    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('Notification permission granted');
    } else {
      console.log('Notification permission denied');
    }
  }
}

Appelez requestNotificationPermission() lors de l'initialisation de l'application ou avant de vous abonner aux notifications pour vous assurer que l'utilisateur a accordé l'autorisation.

Assurer la compatibilité :

Avant de plonger dans la configuration, assurez-vous que les packages @react-native-firebase/app et @react-native-firebase/messaging sont installés dans votre projet et sont compatibles.
Des versions cohérentes sont essentielles pour éviter les problèmes d'intégration inattendus. Pour vérifier la compatibilité des versions, reportez-vous à la documentation officielle de la version React Native Firebase.
Assurez-vous d'avoir installé les dernières versions des deux packages pour éviter les problèmes de compatibilité.

Si vous testez sur un appareil iOS, notez ce qui suit :

• Les appareils iOS physiques sont généralement requis pour recevoir des notifications push.
• Si vous utilisez macOS 13 avec Apple Silicon, vous pouvez également utiliser un simulateur iOS exécutant iOS 16 pour les tests.

Conseils de dépannage :

Une fois la configuration terminée, vous risquez encore de rencontrer des problèmes. Voici quelques problèmes courants et solutions :

Le simulateur ne reçoit pas de notifications :

Si les notifications n'apparaissent pas dans le simulateur iOS, essayez ce qui suit :

• Redémarrez ou réinitialisez le simulateur en effaçant tout le contenu et les paramètres.
• Réessayez après la réinitialisation, car parfois un redémarrage du simulateur peut résoudre le problème.

Après avoir résolu ce problème moi-même pendant quelques heures, j'ai découvert qu'un redémarrage rapide était la solution la plus simple !

Vérifiez les étapes et les problèmes courants :
Vérifiez à nouveau les étapes de configuration dans le guide Firebase pour vous assurer que tout est configuré correctement.

Erreur lors de l'installation de CocoaPods :
Si vous rencontrez des erreurs d'installation, telles que :

<br>
   error: RPC failed; curl stream was reset<br>
   error: 6428 bytes of body are still expected<br>
   

Cela pourrait être dû à des problèmes de réseau. Essayez de passer du Wi-Fi à un point d'accès mobile (ou vice versa) et réessayez l'installation. Parfois, la modification de votre réseau peut résoudre les problèmes d'installation des pods liés à la connexion. Si cela ne résout pas le problème, vous devrez peut-être essayer des conseils de dépannage supplémentaires, tels que vider le cache CocoaPods ou mettre à jour Xcode.

Autoriser les URL HTTP dans iOS (App Transport Security) :
Si vous utilisez une URL HTTP pour les requêtes API (par opposition à HTTPS), vous devrez mettre à jour votre fichier iOS Info.plist pour éviter les connexions bloquées en raison des restrictions App Transport Security (ATS). Ajoutez les lignes suivantes dans votre fichier Info.plist :

import { Platform, PermissionsAndroid } from 'react-native';

async function requestNotificationPermission() {
// Version >= 33(`~project/build.gradle`)
  if (Platform.OS === 'android' ) {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
    );

    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('Notification permission granted');
    } else {
      console.log('Notification permission denied');
    }
  }
}

Cela permettra à votre application de faire des requêtes HTTP sans interférence. Soyez prudent avec ce paramètre dans les applications de production et essayez de le limiter aux environnements de développement lorsque cela est possible.

Assurer la compatibilité de la sécurité du transport des applications (ATS) :
Pour iOS, assurez-vous que tous les points de terminaison HTTPS que vous utilisez sont compatibles ATS. Si vous effectuez des tests avec des serveurs de test ou des certificats auto-signés, assurez-vous qu'ils sont compatibles ATS, car Firebase nécessite une connexion sécurisée pour communiquer avec les APN (Apple Push Notification Service).

Conclusion :
La configuration de Firebase Cloud Messaging dans React Native peut être simple, mais des erreurs de configuration mineures ou des bizarreries de configuration de l'appareil peuvent entraîner des problèmes. Suivre ce guide et ces conseils de dépannage devrait vous aider à obtenir un bon fonctionnement des notifications. Pour tout problème supplémentaire, vous pouvez consulter la documentation officielle, les forums ou les discussions GitHub pour trouver des solutions partagées par d'autres développeurs.

Bon codage !!!!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!