Naučite kako koristiti značajku Firebase Cloud Messaging (FCM) za uključivanje push obavijesti unutar React aplikacije.

Push obavijesti omogućuju aplikacijama slanje pravodobnih ažuriranja, upozorenja ili personaliziranih poruka izravno na uređaje korisnika, bez obzira na njihovo aktivno korištenje aplikacije. Ove obavijesti osiguravaju kontinuirani angažman korisnika i trenutnu povezanost.

U slučaju web aplikacija, preglednik prvo hvata te obavijesti i zatim ih prosljeđuje odgovarajućoj aplikaciji.

Postavite Firebase projekt

Slijedite korake u nastavku da biste započeli i postavili Firebase projekt:

  1. Prijeđite na Firebase Developer Console, prijavite se pomoću svoje Google adrese e-pošte i kliknite Idite na konzolu gumb za navigaciju do stranice s pregledom konzole.
  2. Na stranici pregleda konzole kliknite Napravite projekt gumb za izradu novog projekta. Zatim navedite naziv projekta.
  3. Nakon što je projekt uspješno izrađen, idite na stranicu s pregledom projekta. Morate registrirati aplikaciju na Firebaseu za generiranje API ključeva. Za registraciju aplikacije kliknite na
    instagram viewer
    mreža ikonu, unesite naziv aplikacije i kliknite na Registrirajte aplikaciju dugme.
  4. Kopirajte Firebase konfiguracijski kod nakon registracije vaše React aplikacije.

Konfigurirajte uslugu Firebase Cloud Messaging (FCM).

Nakon što ste registrirali svoju aplikaciju na Firebaseu, sljedeći korak je konfiguracija usluge Firebase Cloud Messaging (FCM).

  1. Idite do Postavke projekta stranica.
  2. Zatim kliknite na Slanje poruka u oblaku jezičak na Postavke projekta stranica. Firebase Cloud Messaging koristi parove ključeva Application Identity za povezivanje s vanjskim push uslugama. Iz tog razloga morate generirati svoj jedinstveni identifikacijski ključ.
  3. Na Slanje poruka u oblaku postavke, idite na Web konfiguracija odjeljak i kliknite na Generirajte par ključeva gumb za generiranje vašeg jedinstvenog ključa.

Postavite aplikaciju React

Prvi, izraditi React aplikaciju. Nakon instalacije, samo naprijed i instalirajte vatrena baza i reagirati-vruće-tost pakete koje ćete koristiti za implementaciju push obavijesti u aplikaciji React.

npm instalirajte firebase react-hot-toast

Izvorni kod ovog projekta možete pronaći ovdje GitHub spremište.

Konfigurirajte Firebase i Cloud Messaging Service

Prijeđi do svog Postavke projekta stranicu na konzoli za razvojne programere i kopirajte navedeni konfiguracijski objekt Firebase. u src imenik, stvorite novi firebase.js datoteku i dodajte sljedeći kod.

uvoz {inicijalizirajApp} iz"firebase/aplikacija";
uvoz { getMessaging, getToken, onMessage } iz'firebase/messaging';
konst firebaseConfig = {
 apiKey: "",
 authDomain: "",
 ID projekta: "",
 spremnik za pohranu: "",
 messagingSenderId: "",
 appId: ""
};
konst app = initializeApp (firebaseConfig);
konst slanje poruka = ​​getMessaging (aplikacija);

Zamijenite gore navedeno firebaseConfig objekt s onim koji ste kopirali iz Postavke projekta stranica. Ovaj će kôd postaviti Firebase instancu i inicijalizirati objekt za razmjenu poruka u oblaku kako bi omogućio FCM funkciju u vašoj aplikaciji.

Upravljajte zahtjevima za korisnička dopuštenja obavijesti

Da biste dopustili React aplikacijama primanje push obavijesti od Firebase Cloud Messaging servisa, morate rukovati korisničkim dopuštenjima.

To uključuje definiranje i pozivanje zahtjev za dopuštenje način koji pruža objekt za razmjenu poruka, koji ste prethodno konfigurirali. Osigurava da ispravno rukujete korisničkim odgovorima na zahtjeve za dopuštenje obavijesti.

Dodajte sljedeći kod u firebase.js datoteku nakon inicijalizacije objekta za razmjenu poruka.

izvozkonst zahtjev za dopuštenje = () => {
konzola.log("Tražim dopuštenje korisnika...");
 Notification.requestPermission().then((dopuštenje) => {


ako (dopuštenje "odobreno") {


konzola.log("Dopušteno korisničko dopuštenje za obavijest."); 
povratak getToken (razmjena poruka, { vapidKey: `Par_ključeva_obavijesti` })
 .zatim((currentToken) => {


ako (currentToken) {


konzola.log('Token klijenta:', trenutni token);
 } drugo {

konzola.log('Generiranje tokena za registraciju aplikacije nije uspjelo.');
 }
 })
 .ulov((pogriješiti) => {


konzola.log('Došlo je do pogreške prilikom zahtjeva za primanje tokena.', pogriješiti);
 });
 } drugo {


konzola.log("Korisnička dozvola odbijena.");
 }
 });


 }
zahtjev za dopuštenje();

Navedeni kod zahtijeva korisničku dozvolu za obavijesti i obrađuje odgovor na dozvolu. Ako je dopuštenje odobreno, nastavlja se s dobivanjem registracijskog tokena za aplikaciju pomoću getToken funkcija.

Registracijski token služi kao identifikator za uređaj ili preglednik koji prima obavijesti. Zatim možete upotrijebiti ovaj token za postavljanje kampanje obavijesti na stranici postavki Firebase Cloud Messaging.

Provjerite jeste li zamijenili rezervirano mjesto Par_ključeva_obavijesti sa stvarnim parom ključeva koji ste generirali ranije u Web konfiguracija odjeljak.

Definirajte slušatelje obavijesti

Za rukovanje bilo kojom vrstom dolaznih obavijesti, potrebno je postaviti slušatelje poruka za praćenje dolaznih obavijesti i funkcije povratnog poziva za pokretanje bilo kakvih događaja slanja poruka.

U vašem firebase.js datoteku, dodajte sljedeći kod.

izvozkonst onMessageListener = () =>
noviObećanje((odlučnost) => {
 onMessage (poruke, (payload) => {
 riješiti (korisni teret);
 });
});

Ova funkcija postavlja slušatelja poruka posebno za push obavijesti. The onMessage funkcionirati unutar onMessageListener pokreće se kad god aplikacija primi push obavijest i u fokusu je.

Kada se primi obavijest, sadržaj poruke će sadržavati relevantne podatke povezane s obavijesti, kao što su naslov i tijelo poruke.

Definirajte Firebase Messaging Service Worker

FCM zahtijeva Firebase Messaging uslužni radnik za obradu dolaznih push obavijesti.

Service Worker je JavaScript datoteka koja radi u pozadini i rukuje push obavijestima — omogućuje webu aplikaciju za primanje i prikaz obavijesti, čak i ako je korisnik zatvorio aplikaciju ili se prebacio na drugu karticu ili prozor.

u /public imenik, stvorite novi firebase-messaging-sw.js datoteku i uključite sljedeći kod.

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 konfiguracijski objekt 
konst firebaseConfig = {
"informacije o konfiguraciji"
 };


firebase.initializeApp (firebaseConfig);
konst slanje poruka = ​​firebase.messaging();


messaging.onBackgroundMessage(funkcija(nosivost) {
konzola.log('Primljena pozadinska poruka', nosivost);
konst notificationTitle = payload.notification.title;
konst NotificationOptions = {
 tijelo: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 opcije obavijesti);
});

Ovaj kod postavlja servisnog radnika za Firebase Cloud Messaging u aplikaciji React, omogućujući rukovanje i prikaz obavijesti.

Stvorite komponentu obavijesti

Stvorite novi komponente/Obavijest.js datoteka u /src imenik i dodajte sljedeći kod.

uvoz Reagiraj, {useState, useEffect} iz'reagirati';
uvoz { Toster, tost } iz'react-hot-toast';
uvoz { requestPermission, onMessageListener } iz'../firebase';
funkcijaObavijest() {
konst [obavijest, setNotification] = useState({ titula: '', tijelo: '' });
 useEffect(() => {
 zahtjev za dopuštenje();
konst odjava = onMessageListener().then((nosivost) => {
 setNotification({
 naslov: korisni teret?.obavijest?.naslov,
 tijelo: nosivost?.obavijest?.tijelo,
 });
 tost.uspjeh(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 trajanje: 60000, 
 položaj: 'Gore desno', odjeljak od stranici preglednika
 });
});
povratak() => {
 unsubscribe.catch((pogriješiti) =>konzola.log('neuspjeh: ', pogreška));
 };
 }, []);
povratak (



 </div>
 );
}
izvozzadano Obavijest;

Ovaj kod definira komponentu koja obrađuje push obavijesti. Koristi se reagirati-vruće-tost knjižnica za prikaz obavijesti korisniku.

Komponenta traži dopuštenje korisnika, sluša dolazne poruke pomoću onMessageListener funkciju i prema zadanim postavkama prikazuje toast obavijest s primljenim naslovom i tijelom u trajanju od jedne minute u gornjem desnom dijelu stranice preglednika. Obavijest možete dodatno prilagoditi uz pomoć službenika reagirati-vruće-tost dokumentaciju i CSS svojstvo pozicije.

Konačno, ažurirajte App.js datoteku za uvoz Obavijest komponenta.

uvoz'./App.css';
uvoz Obavijest iz'./components/Notification';
funkcijaaplikacija() {
povratak (
"Aplikacija">
"Zaglavlje aplikacije"> 

 </header> 
 </div>
 );
}
izvozzadano aplikacija;

Testirajte značajku push obavijesti

Samo naprijed i zavrtite razvojni poslužitelj i otvorite ga http://locahlhost: 3000 na vašem pregledniku za pristup aplikaciji. Trebali biste dobiti sljedeći skočni prozor kako biste aplikaciji omogućili primanje obavijesti.

Klik Dopusti. The token klijenta treba generirati i prijaviti konzola preglednika. Koristit ćete token za slanje kampanja obavijesti u svoju aplikaciju React.

Kopiraj token klijenta i prijeđite na Firebaseovu konzolu za razvojne programere Pregled projekta stranica. Kliknite na Slanje poruka u oblaku karticu pod Povećajte i angažirajte svoju publiku odjeljak.

Klik Napravite svoju prvu kampanju, Izaberi Firebase poruke obavijesti, te navedite naslov i poruku za svoju obavijest. Ispod Pregled uređaja odjeljak, kliknite Pošalji probnu poruku.

Zalijepite i dodajte token klijenta u skočni prozor koji slijedi i kliknite Test za slanje push obavijesti.

Ako ste na aplikaciji, primit ćete push obavijest. Ako ne, primit ćete pozadinsku obavijest.

Slanje push obavijesti pomoću usluge Firebase Cloud Messaging

Push obavijesti su vrijedna značajka za poboljšanje korisničkog iskustva za web i mobilne aplikacije. Ovaj vodič istaknuo je korake za integraciju push obavijesti pomoću Firebasea, uključujući rukovanje korisničkim dopuštenjima i postavljanje slušatelja poruka.

Iskorištavanjem Firebase Cloud Messaging API-ja, možete učinkovito isporučiti pravovremena ažuriranja i personalizirane poruke svojim React aplikacijama.