Siit saate teada, kuidas kasutada Firebase'i pilvsõnumside (FCM) funktsiooni tõukemärguannete lisamiseks Reacti rakendusse.

Tõukemärguanded võimaldavad rakendustel saata õigeaegseid värskendusi, hoiatusi või isikupärastatud sõnumeid otse kasutajate seadmetesse, olenemata nende aktiivsest rakenduse kasutamisest. Need märguanded tagavad pideva kasutaja seotuse ja vahetu ühenduvuse.

Veebirakenduste puhul püüab brauser need teated algselt kinni ja seejärel edastab vastavale rakendusele.

Seadistage Firebase'i projekt

Alustamiseks ja Firebase'i projekti seadistamiseks järgige allolevaid juhiseid.

  1. Suunduge poole Firebase'i arendajakonsool, logige oma Google'i e-posti aadressiga sisse ja klõpsake nuppu Minge konsooli nuppu, et navigeerida konsooli ülevaatelehele.
  2. Konsooli ülevaatelehel klõpsake nuppu Loo projekt nuppu uue projekti loomiseks. Seejärel sisestage projekti nimi.
  3. Kui projekt on edukalt loodud, liikuge projekti ülevaatelehele. API-võtmete loomiseks peate Firebase'is registreerima rakenduse. Rakenduse registreerimiseks klõpsake nuppu
    instagram viewer
    võrk ikooni, sisestage rakenduse nimi ja klõpsake nuppu Registreeri rakendus nuppu.
  4. Pärast Reacti rakenduse registreerimist kopeerige Firebase'i konfiguratsioonikood.

Firebase'i pilvsõnumside (FCM) teenuse konfigureerimine

Kui olete oma rakenduse Firebase'is registreerinud, on järgmine samm Firebase'i pilvsõnumside (FCM) teenuse konfigureerimine.

  1. Navigeerige lehele Projekti seaded lehel.
  2. Järgmisena klõpsake nuppu Pilvesõnumid vahekaarti Projekti seaded lehel. Firebase'i pilvsõnumside kasutab väliste tõuketeenustega ühenduse loomiseks rakenduse identiteedi võtmepaare. Sel põhjusel peate genereerima oma ainulaadse identiteedivõtme.
  3. peal Pilvesõnumid seaded, navigeerige jaotisse Veebi konfiguratsioon jaotist ja klõpsake nuppu Loo võtmepaar nuppu, et luua oma kordumatu võti.

Seadistage rakendus React

Esiteks looge rakendus React. Pärast installimist jätkake ja installige Firebase ja reageeri-kuum-röstsai paketid, mida kasutate tõukemärguannete rakendamiseks rakenduses React.

npm install firebase react-hot-toast

Selle projekti lähtekoodi leiate siit GitHubi hoidla.

Seadistage Firebase ja pilvsõnumside teenus

Suunduge oma poole Projekti seaded lehele arendajakonsoolil ja kopeerige pakutud Firebase'i konfiguratsiooniobjekt. Aastal src kataloog, looge uus firebase.js faili ja lisage järgmine kood.

importida { InitsialiseeriApp } alates"firebase/app";
importida { getMessaging, getToken, onMessage } alates"firebase/sõnumside";
konst firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projekti ID: "",
 ladustamisämber: "",
 messagingSenderId: "",
 appId: ""
};
konst rakendus = InitsialiseeriApp (firebaseConfig);
konst sõnumivahetus = getMessaging (rakendus);

Asendage ülaltoodu firebaseConfig objektist, mille kopeerisite Projekti seaded lehel. See kood seadistab Firebase'i eksemplari ja lähtestab pilvesõnumite objekti, et lubada teie rakenduses FCM-i funktsionaalsus.

Hallake teavituste kasutajalubade taotlusi

Et lubada Reacti rakendustel saada Firebase'i pilvsõnumside teenuselt tõukemärguandeid, peate käsitlema kasutajaõigusi.

See hõlmab selle määratlemist ja kutsumist taotle luba Sõnumiobjekti pakutav meetod, mille olete varem konfigureerinud. See tagab, et käsitlete õigesti kasutaja vastuseid teatiste loataotlustele.

Lisage sellele järgmine kood firebase.js faili pärast sõnumiobjekti lähtestamist.

eksportidakonst requestPermission = () => {
konsool.log("Kasutaja loa taotlemine...");
 Notification.requestPermission().then((luba) => {


kui (luba "antud") {


konsool.log("Teavitamise kasutaja luba antud."); 
tagasi getToken (sõnumid, { vapidKey: „Teatise_võtmepaar”. })
 .hen((praeguneToken) => {


kui (currentToken) {


konsool.log("Kliendi tunnus:", currentToken);
 } muidu {

konsool.log(„Rakenduse registreerimisloa genereerimine ebaõnnestus.”);
 }
 })
 .catch((eks) => {


konsool.log("Tokeni saamise taotlemisel ilmnes viga.", eksitus);
 });
 } muidu {


konsool.log("Kasutaja luba keelatud.");
 }
 });


 }
requestPermission();

Esitatud kood küsib kasutajalt märguannete jaoks luba ja käsitleb loa vastust. Kui luba antakse, hangitakse rakendusele registreerimisluba kasutades getToken funktsiooni.

Registreerimismärk toimib teatisi vastuvõtva seadme või brauseri identifikaatorina. Seejärel saate seda märki kasutada Firebase'i pilvsõnumside seadete lehel teavituskampaania seadistamiseks.

Asendage kindlasti kohatäide Notification_key_pair tegeliku võtmepaariga, mille olete varem loonud Veebi konfiguratsioon osa.

Määratlege teavituste kuulajad

Mis tahes tüüpi sissetulevate teatiste käsitlemiseks on vaja seadistada sõnumikuulajad sissetulevate teatiste jälgimiseks ja tagasihelistamisfunktsioonid, et käivitada mis tahes sõnumisündmused.

Sinu firebase.js faili, lisage järgmine kood.

eksportidakonst onMessageListener = () =>
uusLubadus((lahendada) => {
 onMessage (sõnumside, (kasutav koormus) => {
 lahendama (kasutav koormus);
 });
});

See funktsioon seadistab sõnumikuulaja spetsiaalselt tõukemärguannete jaoks. The onMessage funktsioon sees onMessageListener käivitub alati, kui rakendus saab tõuketeate ja on fookuses.

Teatise vastuvõtmisel sisaldab sõnumite koormus teatega seotud asjakohaseid andmeid, nagu sõnumi pealkiri ja sisu.

Määrake Firebase'i sõnumsideteenuse töötaja

FCM nõuab Firebase'i sõnumivahetust teenindustöötaja sissetulevate push-teadete käsitlemiseks.

Teenindustöötaja on JavaScripti fail, mis töötab taustal ja käsitleb tõukemärguandeid – see võimaldab veebi rakendus märguannete vastuvõtmiseks ja kuvamiseks, isegi kui kasutaja on rakenduse sulgenud või lülitunud teisele vahelehele või aken.

Aastal /public kataloog, looge uus firebase-messaging-sw.js faili ja lisage järgmine kood.

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'i konfiguratsiooniobjekt 
konst firebaseConfig = {
"konfiguratsiooniteave"
 };


firebase.initializeApp (firebaseConfig);
konst sõnumivahetus = firebase.messaging();


messaging.onBackgroundMessage(funktsiooni(kasulik koormus) {
konsool.log('Saadud taustateade', kasulik koormus);
konst notificationTitle = payload.notification.title;
konst teavitusvalikud = {
 body: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 teavitusvalikud);
});

See kood seadistab rakenduses React Firebase'i pilvsõnumside teenusetöötaja, mis võimaldab märguandeid käsitleda ja kuvada.

Looge teavituskomponent

Loo uus komponendid/Notification.js faili /src kataloogi ja lisage järgmine kood.

importida Reageerida, { useState, useEffect } alates'reageeri';
importida { Röster, röstsai } alates'reageerida-kuum-röstsai';
importida { requestPermission, onMessageListener } alates"../firebase";
funktsiooniTeavitus() {
konst [notification, setNotification] = useState({ pealkiri: '', keha: '' });
 useEffect(() => {
 requestPermission();
konst unsubscribe = onMessageListener().then((kasulik koormus) => {
 setNotification({
 pealkiri: payload?.notification?.title,
 body: payload?.notification?.body,
 });
 toost.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 kestus: 60000, 
 positsioon: 'üleval paremal', jaotis kohta brauseri leht
 });
});
tagasi() => {
 unsubscribe.catch((eks) =>konsool.log('ebaõnnestus:', eksitus));
 };
 }, []);
tagasi (



 </div>
 );
}
eksportidavaikimisi Teavitus;

See kood määratleb komponendi, mis käsitleb push-teatisi. See kasutab ära reageeri-kuum-röstsai teek, et kuvada kasutajale teatised.

Komponent küsib kasutaja luba, kuulab sissetulevaid sõnumeid kasutades onMessageListener funktsiooni ja vaikimisi kuvab brauseri lehe paremas ülanurgas ühe minuti jooksul röstsaiateatise koos vastuvõetud pealkirja ja sisuga. Ametniku abiga saate teatist veelgi kohandada reageeri-kuum-röstsai dokumentatsioon ja CSS-i positsiooni atribuut.

Lõpuks värskendage App.js faili importimiseks Teavitus komponent.

importida'./App.css';
importida Teavitus alates'./components/Notification';
funktsiooniRakendus() {
tagasi (
"Rakendus">
"Rakenduse päis"> 

 </header> 
 </div>
 );
}
eksportidavaikimisi Rakendus;

Testige Push Notification funktsiooni

Mine edasi ja keera arendusserver üles ja ava http://locahlhost: 3000 brauseris rakendusele juurdepääsuks. Te peaksite saama järgmise hüpikakna, et lubada rakendusel märguandeid vastu võtta.

Klõpsake Lubama. The kliendi tunnus tuleks luua ja sisse logida brauseri konsool. Kasutate märki oma Reacti rakendusse teavituskampaaniate saatmiseks.

Kopeerige kliendi tunnus ja minge Firebase'i arendajakonsooli projekti ülevaade lehel. Klõpsake nuppu Pilvesõnumid kaart all Kasvatage ja kaasake oma publikut osa.

Klõpsake Looge oma esimene kampaania, valige Firebase'i märguandesõnumidja lisage teatisele pealkiri ja sõnum. all Seadme eelvaade jaotises klõpsake Saada testsõnum.

Kleepige ja lisage järgmises hüpikaknas kliendi tunnus ja klõpsake nuppu Test tõuketeatise saatmiseks.

Kui olete rakenduses, saate tõuketeate. Kui ei, saate taustateate.

Tõukemärguannete saatmine Firebase'i pilvsõnumside teenuse abil

Tõukemärguanded on väärtuslik funktsioon kasutajakogemuse parandamiseks nii veebi- kui ka mobiilirakenduste puhul. Selles juhendis tõsteti esile samme tõukemärguannete integreerimiseks Firebase'i abil, sealhulgas kasutajalubade haldamine ja sõnumikuulajate seadistamine.

Kasutades Firebase'i pilvsõnumside API-sid, saate oma Reacti rakendustesse tõhusalt õigeaegseid värskendusi ja isikupärastatud sõnumeid edastada.