Aflați cum să utilizați caracteristica Firebase Cloud Messaging (FCM) pentru a încorpora notificări push într-o aplicație React.

Notificările push permit aplicațiilor să trimită actualizări în timp util, alerte sau mesaje personalizate direct către dispozitivele utilizatorilor, indiferent de utilizarea activă a aplicației. Aceste notificări asigură implicarea continuă a utilizatorului și conectivitate instantanee.

În cazul aplicațiilor web, browserul captează inițial aceste notificări și ulterior le transmite către aplicația corespunzătoare.

Configurați un proiect Firebase

Urmați pașii de mai jos pentru a începe și a configura un proiect Firebase:

  1. Du-te la Consola pentru dezvoltatori Firebase, conectați-vă folosind adresa dvs. de e-mail Google și faceți clic pe Accesați Consolă butonul pentru a naviga la pagina de prezentare generală a consolei.
  2. Pe pagina de prezentare generală a consolei, faceți clic pe Creați un proiect butonul pentru a crea un nou proiect. Apoi furnizați numele proiectului.
    3. instagram viewer
  3. Odată ce proiectul este creat cu succes, navigați la pagina de prezentare generală a proiectului. Trebuie să înregistrați o aplicație pe Firebase pentru a genera chei API. Pentru a înregistra o aplicație, faceți clic pe Web pictograma, furnizați numele aplicației și faceți clic pe Înregistrați aplicația buton.
  4. Copiați codul de configurare Firebase după ce vă înregistrați aplicația React.

Configurați serviciul Firebase Cloud Messaging (FCM).

Odată ce v-ați înregistrat aplicația pe Firebase, următorul pas este să configurați serviciul Firebase Cloud Messaging (FCM).

  1. Navigați la Setările proiectului pagină.
  2. Apoi, faceți clic pe Mesaje în cloud fila de pe Setările proiectului pagină. Firebase Cloud Messaging folosește perechi de chei Application Identity pentru a se conecta la servicii push externe. Din acest motiv, trebuie să generați cheia de identitate unică.
  3. Pe Mesaje în cloud setări, navigați la Configurare web secțiunea și faceți clic pe Generați perechea de chei butonul pentru a genera cheia dvs. unică.

Configurați aplicația React

Primul, creați o aplicație React. Odată instalat, mergeți mai departe și instalați baza de foc și reaction-hot-toast pachete pe care le veți folosi pentru a implementa notificări push în aplicația React.

npm instalează firebase react-hot-toast

Puteți găsi codul sursă al acestui proiect în aceasta Depozitul GitHub.

Configurați Firebase și Serviciul de mesagerie în cloud

Mergi la tine Setările proiectului pagina de pe consola dezvoltatorului și copiați obiectul de configurare Firebase furnizat. În src director, creați un nou firebase.js fișier și adăugați următorul cod.

import { initializeApp } din„firebase/aplicație”;
import { getMessaging, getToken, onMessage } din„firebase/mesaj”;
const firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projectId: "",
 găleată de stocare: "",
 messagingSenderId: "",
 appId: ""
};
const app = initializeApp (firebaseConfig);
const mesagerie = getMessaging (aplicație);

Înlocuiți cele de mai sus firebaseConfig obiect cu cel pe care l-ați copiat din Setările proiectului pagină. Acest cod va configura instanța Firebase și va inițializa obiectul de mesagerie în cloud pentru a activa funcționalitatea FCM în aplicația dvs.

Gestionați solicitările de permisiuni ale utilizatorilor pentru notificări

Pentru a permite aplicațiilor React să primească notificări push de la serviciul de mesagerie în cloud al Firebase, trebuie să gestionați permisiunile utilizatorului.

Aceasta implică definirea și apelarea cer permisiunea metoda oferită de obiectul de mesagerie, pe care l-ați configurat anterior. Acesta vă asigură că gestionați corect răspunsurile utilizatorului la solicitările de permisiune ale notificărilor.

Adăugați următorul cod la firebase.js fișier după inițializarea obiectului de mesagerie.

exportconst requestPermission = () => {
consolă.Buturuga(„Se solicită permisiunea utilizatorului...”);
 Notification.requestPermission().then((permisiune) => {


dacă (permisiune "acordat") {


consolă.Buturuga(„Permisiunea utilizatorului de notificare acordată”.); 
întoarcere getToken (mesaj, { vapidKey: `Notification_key_pair` })
 .apoi((currentToken) => {


dacă (jeton curent) {


consolă.Buturuga(„Token client:”, currentToken);
 } altfel {

consolă.Buturuga(„Eșuat la generarea simbolului de înregistrare a aplicației.”);
 }
 })
 .captură((a greșit) => {


consolă.Buturuga(„A apărut o eroare la solicitarea primirii simbolului.”, greș);
 });
 } altfel {


consolă.Buturuga(„Permisiunea utilizatorului a fost refuzată”.);
 }
 });


 }
cer permisiunea();

Codul furnizat solicită permisiunea utilizatorului pentru notificări și gestionează răspunsul la permisiune. Dacă se acordă permisiunea, se procedează la obținerea unui simbol de înregistrare pentru aplicație folosind getToken funcţie.

Indicatorul de înregistrare servește ca un identificator pentru dispozitivul sau browserul care primește notificările. Apoi puteți utiliza acest simbol pentru a configura o campanie de notificare în pagina de setări Firebase Cloud Messaging.

Asigurați-vă că înlocuiți substituentul Notification_key_pair cu perechea de chei reală pe care ați generat-o mai devreme în Configurare Web secțiune.

Definiți ascultătorii de notificare

Pentru a gestiona orice tip de notificări primite, este necesar să configurați ascultătorii de mesaje pentru a urmări notificările primite și funcțiile de apel invers pentru a declanșa orice evenimente de mesagerie.

În dumneavoastră firebase.js fișier, adăugați următorul cod.

exportconst onMessageListener = () =>
nouPromisiune((rezolva) => {
 onMessage (mesaj, (sarcină utilă) => {
 rezolvare (sarcină utilă);
 });
});

Această funcție setează un ascultător de mesaje special pentru notificările push. The onMessage functioneaza in interiorul onMessageListener este declanșată ori de câte ori aplicația primește o notificare push și este focalizată.

Când se primește o notificare, încărcarea utilă a mesajului va conține date relevante asociate notificării, cum ar fi titlul și corpul mesajului.

Definiți un lucrător al serviciului de mesagerie Firebase

FCM necesită un Firebase Messaging lucrător de serviciu pentru a gestiona notificările push primite.

Lucrătorul de servicii este un fișier JavaScript care rulează în fundal și gestionează notificările push - permite web-ul aplicația pentru a primi și afișa notificări, chiar dacă utilizatorul a închis aplicația sau a trecut la o altă filă sau fereastră.

În /public director, creați un nou firebase-messaging-sw.js fișier și includeți următorul cod.

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");
//obiectul de configurare Firebase 
const firebaseConfig = {
„informații de configurare”
 };


firebase.initializeApp (firebaseConfig);
const mesagerie = firebase.messaging();


messaging.onBackgroundMessage(funcţie(încărcătură utilă) {
consolă.Buturuga(„Mesaj de fundal primit”, sarcină utilă);
const notificationTitle = payload.notification.title;
const notificationOptions = {
 body: payload.notification.body,
 };
 self.registration.showNotification (titlu de notificare,
 notificareOpțiuni);
});

Acest cod configurează un service worker pentru Firebase Cloud Messaging în aplicația React, permițând gestionarea și afișarea notificărilor.

Creați o componentă de notificare

Creaza un nou componente/Notificare.js dosar în /src director și adăugați următorul cod.

import Reacționează, { useState, useEffect } din'reacţiona';
import { Toaster, toast } din"react-hot-toast";
import { requestPermission, onMessageListener } din„../firebase”;
funcţieNotificare() {
const [notificare, setNotification] = useState({ titlu: '', corp: '' });
 useEffect(() => {
 cer permisiunea();
const dezabonare = onMessageListener().then((încărcătură utilă) => {
 setNotification({
 title: payload?.notification?.title,
 body: payload?.notification?.body,
 });
 toast.succes(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 durată: 60000, 
 poziţie: 'sus în dreapta', secțiune de pagina browserului
 });
});
întoarcere() => {
 unsubscribe.catch((a greșit) =>consolă.Buturuga('a eșuat: ', err));
 };
 }, []);
întoarcere (



 </div>
 );
}
exportMod implicit Notificare;

Acest cod definește o componentă care gestionează notificările push. Acesta utilizează reaction-hot-toast bibliotecă pentru a afișa notificări către utilizator.

Componenta solicită permisiunea utilizatorului, ascultă mesajele primite folosind onMessageListener funcția și, implicit, afișează o notificare toast cu titlul și corpul primite pentru o durată de un minut în secțiunea din dreapta sus a paginii browserului. Puteți personaliza în continuare notificarea cu ajutorul oficialului reaction-hot-toast documentatie si proprietatea poziției CSS.

În cele din urmă, actualizați App.js fișier pentru a importa Notificare componentă.

import„./App.css”;
import Notificare din„./components/Notificare”;
funcţieApp() {
întoarcere (
„Aplicație”>
„Aplicație antet”> 

 </header> 
 </div>
 );
}
exportMod implicit Aplicație;

Testați funcția de notificare push

Continuați și porniți serverul de dezvoltare și deschideți http://locahlhost: 3000 pe browser pentru a accesa aplicația. Ar trebui să obțineți următorul pop-up pentru a permite aplicației să primească notificări.

Clic Permite. The jeton client ar trebui să fie generat și autentificat în consola browserului. Veți folosi simbolul pentru a trimite campanii de notificări către aplicația dvs. React.

Copiați jeton client și mergeți la consola pentru dezvoltatori Firebase rezumatul proiectului pagină. Apasă pe Mesaje în cloud card sub Creșteți și implicați-vă publicul secțiune.

Clic Creați prima campanie, Selectați Mesaje de notificare Firebaseși furnizați un titlu și un mesaj pentru notificarea dvs. Sub Previzualizarea dispozitivului secțiune, faceți clic Trimiteți mesajul de testare.

Lipiți și adăugați jetonul client în fereastra pop-up care urmează și faceți clic Test pentru a trimite notificarea push.

Dacă sunteți în aplicație, veți primi o notificare push. Dacă nu, veți primi o notificare de fundal.

Trimiterea notificărilor push utilizând serviciul de mesagerie în cloud Firebase

Notificările push sunt o caracteristică valoroasă pentru îmbunătățirea experienței utilizatorului atât pentru aplicațiile web, cât și pentru cele mobile. Acest ghid a evidențiat pașii pentru integrarea notificărilor push folosind Firebase, inclusiv gestionarea permisiunilor utilizatorilor și configurarea ascultătorilor de mesaje.

Utilizând API-urile Firebase Cloud Messaging, puteți livra în mod eficient actualizări în timp util și mesaje personalizate aplicațiilor dvs. React.