Μάθετε πώς να χρησιμοποιείτε τη λειτουργία Firebase Cloud Messaging (FCM) για να ενσωματώνετε ειδοποιήσεις push σε μια εφαρμογή React.

Οι ειδοποιήσεις push επιτρέπουν στις εφαρμογές να στέλνουν έγκαιρες ενημερώσεις, ειδοποιήσεις ή εξατομικευμένα μηνύματα απευθείας στις συσκευές των χρηστών, ανεξάρτητα από την ενεργό χρήση της εφαρμογής από μέρους τους. Αυτές οι ειδοποιήσεις εξασφαλίζουν συνεχή αφοσίωση χρήστη και άμεση συνδεσιμότητα.

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

Ρυθμίστε ένα έργο Firebase

Ακολουθήστε τα παρακάτω βήματα για να ξεκινήσετε και να ρυθμίσετε ένα έργο Firebase:

  1. Κατευθυνθείτε προς Firebase Developer Console, συνδεθείτε χρησιμοποιώντας τη διεύθυνση email σας στο Google και κάντε κλικ στο Μεταβείτε στην Κονσόλα κουμπί για να μεταβείτε στη σελίδα επισκόπησης της κονσόλας.
  2. Στη σελίδα επισκόπησης της κονσόλας, κάντε κλικ στο Δημιουργήστε ένα έργο κουμπί για να δημιουργήσετε ένα νέο έργο. Στη συνέχεια, δώστε το όνομα του έργου.
    3. instagram viewer
  3. Μόλις το έργο δημιουργηθεί με επιτυχία, μεταβείτε στη σελίδα επισκόπησης του έργου. Πρέπει να καταχωρήσετε μια εφαρμογή στο Firebase για να δημιουργήσετε κλειδιά API. Για να καταχωρήσετε μια εφαρμογή, κάντε κλικ στο Ιστός εικονίδιο, δώστε το όνομα της εφαρμογής και κάντε κλικ στο Εγγραφή εφαρμογής κουμπί.
  4. Αντιγράψτε τον κωδικό διαμόρφωσης Firebase μετά την εγγραφή της εφαρμογής React.

Διαμόρφωση της υπηρεσίας Firebase Cloud Messaging (FCM).

Αφού καταχωρήσετε την αίτησή σας στο Firebase, το επόμενο βήμα είναι να διαμορφώσετε την υπηρεσία Firebase Cloud Messaging (FCM).

  1. Πλοηγηθείτε στο Ρυθμίσεις έργου σελίδα.
  2. Στη συνέχεια, κάντε κλικ στο Cloud Messaging καρτέλα στο Ρυθμίσεις έργου σελίδα. Το Firebase Cloud Messaging χρησιμοποιεί ζεύγη κλειδιών Application Identity για σύνδεση με εξωτερικές υπηρεσίες push. Για αυτόν τον λόγο, πρέπει να δημιουργήσετε το μοναδικό κλειδί ταυτότητάς σας.
  3. Στο Cloud Messaging ρυθμίσεις, μεταβείτε στο Διαμόρφωση Ιστού ενότητα και κάντε κλικ στο Δημιουργία ζεύγους κλειδιών κουμπί για να δημιουργήσετε το μοναδικό κλειδί σας.

Ρυθμίστε την εφαρμογή React

Πρώτα, δημιουργήστε μια εφαρμογή React. Μόλις εγκατασταθεί, προχωρήστε και εγκαταστήστε το firebase και αντιδρώ-ζεστό-τοστ πακέτα που θα χρησιμοποιήσετε για την εφαρμογή ειδοποιήσεων push στην εφαρμογή React.

npm εγκατάσταση firebase react-hot-toast

Μπορείτε να βρείτε τον πηγαίο κώδικα αυτού του έργου σε αυτό Αποθετήριο GitHub.

Διαμορφώστε το Firebase και την Υπηρεσία Μηνυμάτων Cloud

Προχωρήστε στο δικό σας Ρυθμίσεις έργου σελίδα στην κονσόλα προγραμματιστή και αντιγράψτε το παρεχόμενο αντικείμενο διαμόρφωσης Firebase. Στο src κατάλογο, δημιουργήστε ένα νέο firebase.js αρχείο και προσθέστε τον παρακάτω κώδικα.

εισαγωγή { initializeApp } από"firebase/app";
εισαγωγή { getMessaging, getToken, onMessage } από'firebase/μηνύματα';
συνθ firebaseConfig = {
 apiKey: "",
 authDomain: "",
 Αναγνωριστικό έργου: "",
 Αποθηκευτικός Κάδος: "",
 messagingSenderId: "",
 Αναγνωριστικό εφαρμογής: ""
};
συνθ app = initializeApp (firebaseConfig);
συνθ messaging = getMessaging (εφαρμογή).

Αντικαταστήστε τα παραπάνω firebaseConfig αντικείμενο με αυτό που αντιγράψατε από το Ρυθμίσεις έργου σελίδα. Αυτός ο κώδικας θα ρυθμίσει την παρουσία του Firebase και θα προετοιμάσει το αντικείμενο ανταλλαγής μηνυμάτων cloud για να ενεργοποιήσει τη λειτουργικότητα FCM στην εφαρμογή σας.

Διαχείριση αιτημάτων άδειας χρήστη των Ειδοποιήσεων

Για να επιτρέψετε στις εφαρμογές React να λαμβάνουν ειδοποιήσεις push από την υπηρεσία Cloud Messaging του Firebase, πρέπει να χειριστείτε τα δικαιώματα χρήστη.

Αυτό περιλαμβάνει τον ορισμό και την κλήση του requestPermission μέθοδος που παρέχεται από το αντικείμενο ανταλλαγής μηνυμάτων, το οποίο έχετε ρυθμίσει προηγουμένως. Διασφαλίζει ότι χειρίζεστε σωστά τις απαντήσεις του χρήστη στα αιτήματα άδειας των ειδοποιήσεων.

Προσθέστε τον ακόλουθο κώδικα στο firebase.js αρχείο μετά την προετοιμασία του αντικειμένου μηνυμάτων.

εξαγωγήσυνθ requestPermission = () => {
κονσόλα.κούτσουρο("Αίτημα άδειας χρήστη...");
 Notification.requestPermission().then((άδεια) => {


αν (άδεια "χορηγήθηκε") {


κονσόλα.κούτσουρο("Ειδοποίηση άδεια χρήστη χορηγήθηκε."); 
ΕΠΙΣΤΡΟΦΗ getToken (μηνύματα, { vapidKey: `Notification_key_pair` })
 .έπειτα((τρέχονToken) => {


αν (currentToken) {


κονσόλα.κούτσουρο('Token πελάτη:', currentToken);
 } αλλού {

κονσόλα.κούτσουρο("Απέτυχε η δημιουργία του διακριτικού εγγραφής εφαρμογής.");
 }
 })
 .σύλληψη((πλανώμαι) => {


κονσόλα.κούτσουρο("Παρουσιάστηκε σφάλμα κατά την αίτηση λήψης του διακριτικού.", λάθος);
 });
 } αλλού {


κονσόλα.κούτσουρο("Απόρριψη άδειας χρήστη.");
 }
 });


 }
requestPermission();

Ο παρεχόμενος κωδικός ζητά άδεια χρήστη για ειδοποιήσεις και χειρίζεται την απόκριση άδειας. Εάν χορηγηθεί άδεια, προχωρά στην απόκτηση ενός διακριτικού εγγραφής για την εφαρμογή χρησιμοποιώντας το getToken λειτουργία.

Το διακριτικό εγγραφής χρησιμεύει ως αναγνωριστικό για τη συσκευή ή το πρόγραμμα περιήγησης που λαμβάνει τις ειδοποιήσεις. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτό το διακριτικό για να ρυθμίσετε μια καμπάνια ειδοποιήσεων στη σελίδα ρυθμίσεων του Firebase Cloud Messaging.

Βεβαιωθείτε ότι έχετε αντικαταστήσει το σύμβολο κράτησης θέσης Notification_key_pair με το πραγματικό ζεύγος κλειδιών που δημιουργήσατε νωρίτερα στο Διαμόρφωση Ιστού Ενότητα.

Ορισμός ειδοποιήσεων ακροατών

Για τη διαχείριση οποιουδήποτε τύπου εισερχόμενων ειδοποιήσεων, είναι απαραίτητο να ρυθμίσετε τους ακροατές μηνυμάτων για να παρακολουθούν τις εισερχόμενες ειδοποιήσεις και τις λειτουργίες επανάκλησης για την ενεργοποίηση τυχόν συμβάντων ανταλλαγής μηνυμάτων.

Στο δικό σου firebase.js αρχείο, προσθέστε τον παρακάτω κώδικα.

εξαγωγήσυνθ onMessageListener = () =>
νέοςΥπόσχεση((αποφασίζω) => {
 onMessage (μηνύματα, (ωφέλιμο φορτίο) => {
 επίλυση (ωφέλιμο φορτίο)
 });
});

Αυτή η λειτουργία ρυθμίζει ένα πρόγραμμα ακρόασης μηνυμάτων ειδικά για ειδοποιήσεις push. ο onMessage λειτουργία εντός onMessageListener ενεργοποιείται κάθε φορά που η εφαρμογή λαμβάνει μια ειδοποίηση push και βρίσκεται στο επίκεντρο.

Όταν λαμβάνεται μια ειδοποίηση, το ωφέλιμο φορτίο του μηνύματος θα περιέχει σχετικά δεδομένα που σχετίζονται με την ειδοποίηση, όπως ο τίτλος και το σώμα του μηνύματος.

Ορίστε έναν εργαζόμενο υπηρεσίας ανταλλαγής μηνυμάτων Firebase

Το FCM απαιτεί ανταλλαγή μηνυμάτων Firebase εργάτης υπηρεσιών για να χειριστείτε τις εισερχόμενες ειδοποιήσεις push.

Το Service Worker είναι ένα αρχείο JavaScript που εκτελείται στο παρασκήνιο και χειρίζεται ειδοποιήσεις push—επιτρέπει τον ιστό εφαρμογή για λήψη και εμφάνιση ειδοποιήσεων, ακόμα κι αν ο χρήστης έχει κλείσει την εφαρμογή ή έχει αλλάξει σε διαφορετική καρτέλα ή παράθυρο.

Στο /public κατάλογο, δημιουργήστε ένα νέο firebase-messaging-sw.js αρχείο και συμπεριλάβετε τον ακόλουθο κώδικα.

importScripts(" https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js");
importScripts(" https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js");
//το αντικείμενο διαμόρφωσης Firebase 
συνθ firebaseConfig = {
"πληροφορίες διαμόρφωσης"
 };


firebase.initializeApp (firebaseConfig);
συνθ messaging = firebase.messaging();


messaging.onBackgroundMessage(λειτουργία(φορτίο επί πληρωμή) {
κονσόλα.κούτσουρο('Λήψη μηνύματος παρασκηνίου', ωφέλιμο φορτίο)·
συνθ notificationTitle = payload.notification.title;
συνθ Επιλογές ειδοποίησης = {
 σώμα: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 Επιλογές ειδοποίησης).
});

Αυτός ο κώδικας ρυθμίζει έναν υπάλληλο εξυπηρέτησης για το Firebase Cloud Messaging στην εφαρμογή React, επιτρέποντας τον χειρισμό και την εμφάνιση ειδοποιήσεων.

Δημιουργήστε ένα στοιχείο ειδοποίησης

Δημιούργησε ένα νέο components/Notification.js αρχείο στο /src κατάλογο και προσθέστε τον παρακάτω κώδικα.

εισαγωγή React, { useState, useEffect } από'αντιδρώ';
εισαγωγή { Τοστιέρα, τοστ } από«αντίδραση-καυτή-τοστ»;
εισαγωγή { requestPermission, onMessageListener } από"../firebase";
λειτουργίαΓνωστοποίηση() {
συνθ [ειδοποίηση, setNotification] = useState({ τίτλος: '', σώμα: '' });
 useEffect(() => {
 requestPermission();
συνθ unsubscribe = onMessageListener().then((φορτίο επί πληρωμή) => {
 setNotification({
 τίτλος: ωφέλιμο φορτίο;.ειδοποίηση;.τίτλος,
 σώμα: ωφέλιμο φορτίο;.ειδοποίηση;.σώμα,
 });
 τοστ.επιτυχία(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 διάρκεια: 60000, 
 θέση: 'επάνω δεξιά', Ενότητα του τη σελίδα του προγράμματος περιήγησης
 });
});
ΕΠΙΣΤΡΟΦΗ() => {
 unsubscribe.catch((πλανώμαι) =>κονσόλα.κούτσουρο('απέτυχε: ', λάθος));
 };
 }, []);
ΕΠΙΣΤΡΟΦΗ (



 </div>
 );
}
εξαγωγήΠροκαθορισμένο Γνωστοποίηση;

Αυτός ο κωδικός ορίζει ένα στοιχείο που χειρίζεται τις ειδοποιήσεις push. Χρησιμοποιεί το αντιδρώ-ζεστό-τοστ βιβλιοθήκη για την εμφάνιση ειδοποιήσεων στον χρήστη.

Το στοιχείο ζητά άδεια χρήστη, ακούει τα εισερχόμενα μηνύματα χρησιμοποιώντας onMessageListener και από προεπιλογή εμφανίζει μια ειδοποίηση τοστ με τον τίτλο και το σώμα που έλαβε για διάρκεια ενός λεπτού στην επάνω δεξιά ενότητα της σελίδας του προγράμματος περιήγησης. Μπορείτε να προσαρμόσετε περαιτέρω την ειδοποίηση με τη βοήθεια του υπαλλήλου αντιδρώ-ζεστό-τοστ τεκμηρίωση και την ιδιότητα θέσης CSS.

Τέλος, ενημερώστε το App.js αρχείο για εισαγωγή του Γνωστοποίηση συστατικό.

εισαγωγή"./App.css";
εισαγωγή Γνωστοποίηση από"./components/Ειδοποίηση";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
"Εφαρμογή">
"Επικεφαλίδα εφαρμογής"> 

 </header> 
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Δοκιμάστε τη λειτουργία Push Notification

Προχωρήστε και γυρίστε τον διακομιστή ανάπτυξης και ανοίξτε http://locahlhost: 3000 στο πρόγραμμα περιήγησής σας για πρόσβαση στην εφαρμογή. Θα πρέπει να εμφανιστεί το ακόλουθο αναδυόμενο παράθυρο για να επιτρέψετε στην εφαρμογή να λαμβάνει ειδοποιήσεις.

Κάντε κλικ Επιτρέπω. ο διακριτικό πελάτη πρέπει να δημιουργηθούν και να συνδεθούν στο κονσόλα προγράμματος περιήγησης. Θα χρησιμοποιήσετε το διακριτικό για να στείλετε καμπάνιες ειδοποιήσεων στην εφαρμογή React.

Αντιγράψτε το διακριτικό πελάτη και κατευθυνθείτε στην κονσόλα προγραμματιστή του Firebase Επισκόπηση έργου σελίδα. Κάντε κλικ στο Cloud Messaging κάρτα κάτω από το Αναπτύξτε και προσελκύστε το κοινό σας Ενότητα.

Κάντε κλικ Δημιουργήστε την πρώτη σας καμπάνια, επιλέξτε Μηνύματα ειδοποίησης Firebaseκαι δώστε έναν τίτλο και ένα μήνυμα για την ειδοποίησή σας. Σύμφωνα με το Προεπισκόπηση συσκευής ενότητα, κάντε κλικ Αποστολή δοκιμαστικού μηνύματος.

Επικολλήστε και προσθέστε το διακριτικό πελάτη στο αναδυόμενο παράθυρο που ακολουθεί και κάντε κλικ Δοκιμή για να στείλετε την ειδοποίηση push.

Εάν βρίσκεστε στην εφαρμογή, θα λάβετε μια ειδοποίηση push. Εάν όχι, θα λάβετε μια ειδοποίηση στο παρασκήνιο.

Αποστολή ειδοποιήσεων Push με χρήση της υπηρεσίας ανταλλαγής μηνυμάτων Firebase Cloud

Οι ειδοποιήσεις push είναι μια πολύτιμη λειτουργία για τη βελτίωση της εμπειρίας χρήστη τόσο για εφαρμογές web όσο και για κινητές συσκευές. Αυτός ο οδηγός υπογράμμισε τα βήματα για την ενσωμάτωση ειδοποιήσεων push χρησιμοποιώντας το Firebase, συμπεριλαμβανομένου του χειρισμού των αδειών χρήστη και της ρύθμισης ακρόασης μηνυμάτων.

Αξιοποιώντας τα API του Firebase Cloud Messaging, μπορείτε να παρέχετε αποτελεσματικά έγκαιρες ενημερώσεις και εξατομικευμένα μηνύματα στις εφαρμογές σας React.