Η εφαρμογή ειδοποιήσεων ώθησης σε μια εφαρμογή React Native μπορεί να ενισχύσει σημαντικά την εμπλοκή του χρήστη παρέχοντας έγκαιρες ενημερώσεις και ειδοποιήσεις. Firebase Cloud Messaging (FCM) προσφέρει μια αξιόπιστη και εύκολη στην ενσωμάτωση λύση για τη διαχείριση ειδοποιήσεις ώθησης σε όλες τις πλατφόρμες.

Προαπαιτούμενα

  • Ένα έργο React Native που δημιουργήθηκε με Expo ή React Native CLI
  • Ένα έργο βάσης πυρκαγιάς που δημιουργήθηκε στην κονσόλα της βάσης πυρκαγιάς
  • Βασικές γνώσεις JavaScript και Αντιδρούν γηγενείς
  • Το SDK της βάσης φωτιάς είναι εγκατεστημένο στο έργο σας

⁇ βάσης πυρός

Πρώτα, δημιουργήστε ένα έργο βάσης και προσθέστε την εφαρμογή σας σε αυτό. Κατεβάστε τα αρχεία ρυθμίσεων:

Για Android

Κατεβάστε το αρχείο google-services.json και τοποθετήστε το στον κατάλογο Android/app του έργου σας. Βεβαιωθείτε ότι προσθέστε το Firebase SDK στις εξαρτήσεις του έργου σας.

Για iOS

Κατεβάστε το αρχείο GoogleService-Info.plist και προσθέστε το στο έργο Xcode σας. Εγκαταστήστε το SDK βάσης μέσω του CocoaPods.

Εγκατάσταση εξαρτήσεων

Εγκαταστήστε τα απαραίτητα πακέτα βάσης:

  • Για την αντίδραση των ιθαγενών CLI:

Εκτέλεση:

  • Για την Expo διαχειριζόμενη ροή εργασίας:

Χρησιμοποιήστε την Expo Firebase SDK ή εκτινάξτε για να χρησιμοποιήσουμε γυμνές ροές εργασίας για τις αυτόχθονες ενότητες.

Αιτούμαι Αδειών και Λαμβάνω Σημείωμα

Στον κώδικα React Native, ζητήστε άδεια για ειδοποιήσεις και ανακτήστε το σύμβολο της συσκευής:

Παράδειγμα:

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();

Χειρισμός εισερχόμενων ειδοποιήσεων

⁇ ακροατών για τη διαχείριση ειδοποιήσεων και απαντήσεων σε νέα δεδομένα:

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
});

Αποστολή ειδοποιήσεων Push

Χρήση Firebase Cloud Messaging API ή Firebase Console για αποστολή ειδοποιήσεων. Παράδειγμα ωφέλιμου φορτίου:

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

Στείλτε το μήνυμα μέσω Firebase Cloud Messaging REST API ή Firebase Console.

Συμπέρασμα

Η ενσωμάτωση ειδοποιήσεων ώθησης με βάση πυρός στην React Native περιλαμβάνει τη δημιουργία βάσης πυρός, την αίτηση αδειών, την ανάκτηση σημείων συσκευής και τον χειρισμό μηνυμάτων.