Kaip įdiegti tiesioginius pranešimus „React“ naudojant „Firebase“.

Push pranešimai leidžia programoms siųsti laiku naujinimus, įspėjimus ar suasmenintus pranešimus tiesiai į vartotojų įrenginius, neatsižvelgiant į tai, ar jie aktyviai naudoja programą. Šie pranešimai užtikrina nuolatinį vartotojų įsitraukimą ir greitą ryšį.

Jei naudojate žiniatinklio programas, naršyklė iš pradžių užfiksuoja šiuos pranešimus, o vėliau persiunčia juos atitinkamai programai.

Nustatykite „Firebase“ projektą

Norėdami pradėti ir nustatyti „Firebase“ projektą, atlikite toliau nurodytus veiksmus.

1. Eikite į „Firebase“ kūrėjų pultas, prisijunkite naudodami „Google“ el. pašto adresą ir spustelėkite Eikite į konsolę mygtuką, kad pereitumėte į konsolės apžvalgos puslapį.
2. Konsolės apžvalgos puslapyje spustelėkite Sukurti projektą mygtuką, kad sukurtumėte naują projektą. Tada nurodykite projekto pavadinimą.
3. Kai projektas bus sėkmingai sukurtas, eikite į projekto apžvalgos puslapį. Norėdami generuoti API raktus, turite užregistruoti programą „Firebase“. Norėdami užregistruoti programą, spustelėkite
   instagram viewer
   Žiniatinklis piktogramą, nurodykite programos pavadinimą ir spustelėkite Registruokis programėlę mygtuką.
4. Užregistravę „React“ programą, nukopijuokite „Firebase“ konfigūracijos kodą.

Konfigūruokite „Firebase“ pranešimų siuntimo iš debesies (FCM) paslaugą

Kai užregistruosite programą „Firebase“, kitas veiksmas – sukonfigūruoti „Firebase“ pranešimų siuntimo iš debesies (FCM) paslaugą.

1. Eikite į Projekto nustatymai puslapį.
2. Tada spustelėkite Pranešimų siuntimas iš debesies skirtuką ant Projekto nustatymai puslapį. „Firebase Cloud Messaging“ naudoja „Application Identity“ raktų poras, kad prisijungtų prie išorinių tiesioginių paslaugų. Dėl šios priežasties turite sugeneruoti savo unikalų tapatybės raktą.
3. Ant Pranešimų siuntimas iš debesies nustatymus, eikite į Žiniatinklio konfigūracija skyrių ir spustelėkite Sukurkite raktų porą mygtuką, kad sukurtumėte savo unikalų raktą.

Nustatykite programą „React“.

Pirmas, sukurti programą „React“.. Įdiegę eikite į priekį ir įdiekite ugnies bazė ir reaguoti-karšta-skrudinta duona paketai, kuriuos naudosite norėdami įdiegti tiesioginius pranešimus programoje „React“.

npm įdiegti firebase react-hot-toast

Šio projekto šaltinio kodą galite rasti čia GitHub saugykla.

Konfigūruokite „Firebase“ ir pranešimų siuntimo iš debesies paslaugą

Eikite į savo Projekto nustatymai puslapį kūrėjo pulte ir nukopijuokite pateiktą „Firebase“ konfigūracijos objektą. Viduje src katalogą, sukurkite naują firebase.js failą ir pridėkite šį kodą.

importuoti { inicializuoti programą } iš„firebase/app“;
importuoti { getMessaging, getToken, onMessage } iš„Firebase / Messaging“;
konst firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projekto ID: "",
 saugojimo kibiras: "",
 messagingSenderId: "",
 appId: ""
};
konst app = inicializuotiApp (firebaseConfig);
konst pranešimų siuntimas = getMessaging (programėlė);

Pakeiskite aukščiau pateiktą firebaseConfig objektas su tuo, kurį nukopijavote iš Projekto nustatymai puslapį. Šis kodas nustatys „Firebase“ egzempliorių ir inicijuos debesies pranešimų siuntimo objektą, kad jūsų programoje būtų įgalintos FCM funkcijos.

Tvarkykite pranešimų naudotojo leidimo užklausas

Norėdami leisti „React“ programoms gauti tiesioginius pranešimus iš „Firebase“ pranešimų siuntimo per debesį paslaugos, turite tvarkyti naudotojo leidimus.

Tai apima apibrėžimą ir iškvietimą prašymasLeidimas metodą, kurį teikia pranešimų siuntimo objektas, kurį anksčiau sukonfigūravote. Tai užtikrina, kad tinkamai tvarkysite naudotojo atsakymus į pranešimų leidimo užklausas.

Pridėkite šį kodą prie firebase.js failą inicijavus pranešimų objektą.

eksportuotikonst requestPermission = () => {
konsolė.log(„Prašoma vartotojo leidimo...“);
 Notification.requestPermission().then((leidimas) => {
jeigu (leidimas "suteikta") {
konsolė.log(„Pranešimo vartotojo leidimas suteiktas“.); 
grąžinti getToken (pranešimai, { vapidKey: „Notification_key_pair“. })
 .thena((currentToken) => {
jeigu (currentToken) {
konsolė.log('Kliento prieigos raktas:', currentToken);
 } Kitas {

konsolė.log(„Nepavyko sugeneruoti programos registracijos prieigos rakto“.);
 }
 })
 .catch((klysti) => {
konsolė.log(„Prašant gauti prieigos raktą įvyko klaida.“, klaida);
 });
 } Kitas {
konsolė.log(„Vartotojo leidimas atmestas“.);
 }
 });
 }
requestPermission ();

Pateiktas kodas prašo vartotojo leidimo gauti pranešimus ir apdoroja atsakymą dėl leidimo. Jei leidimas suteikiamas, jis gauna programos registracijos prieigos raktą, naudodamas getToken funkcija.

Registracijos prieigos raktas tarnauja kaip pranešimus gaunančio įrenginio arba naršyklės identifikatorius. Tada galite naudoti šį prieigos raktą pranešimų kampanijai nustatyti „Firebase“ pranešimų siuntimo per debesį nustatymų puslapyje.

Įsitikinkite, kad pakeisite rezervuotąją vietą Pranešimo_raktų_pora su faktine raktų pora, kurią sugeneravote anksčiau Žiniatinklio konfigūracija skyrius.

Apibrėžkite pranešimų klausytojus

Norint apdoroti bet kokio tipo gaunamus pranešimus, būtina nustatyti pranešimų klausytojus, kad jie sektų gaunamus pranešimus, ir atgalinio skambinimo funkcijas, kad suaktyvintų bet kokius pranešimų siuntimo įvykius.

Jūsų firebase.js failą, pridėkite šį kodą.

eksportuotikonst onMessageListener = () =>
naujasPažadas((išspręsti) => {
 onMessage (pranešimai, (naudinga apkrova) => {
 išspręsti (naudinga apkrova);
 });
});

Ši funkcija nustato pranešimų klausytoją specialiai tiesioginiams pranešimams. The onMessage funkcija viduje onMessageListener suveikia, kai programa gauna tiesioginį pranešimą ir yra sufokusuota.

Kai gaunamas pranešimas, žinutėje bus atitinkami su pranešimu susiję duomenys, pvz., pranešimo pavadinimas ir turinys.

Apibrėžkite „Firebase“ pranešimų tarnybos darbuotoją

FCM reikalingas „Firebase“ pranešimų siuntimas aptarnaujantis darbuotojas tvarkyti gaunamus tiesioginius pranešimus.

Aptarnavimo darbuotojas yra „JavaScript“ failas, kuris veikia fone ir tvarko tiesioginius pranešimus – leidžia žiniatinklyje programą, kad gautumėte ir rodytumėte pranešimus, net jei vartotojas uždarė programą arba perjungė kitą skirtuką arba langas.

Viduje /public katalogą, sukurkite naują firebase-messaging-sw.js failą ir įtraukite šį 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 konfigūracijos objektas 
konst firebaseConfig = {
"konfigūracijos informacija"
 };
firebase.initializeApp (firebaseConfig);
konst pranešimų siuntimas = firebase.messaging();
messaging.onBackgroundMessage(funkcija(naudingoji apkrova) {
konsolė.log(„Gautas foninis pranešimas“, naudingoji apkrova);
konst NotificationTitle = payload.notification.title;
konst pranešimų parinktys = {
 body: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 pranešimų parinktys);
});

Šis kodas nustato „Firebase Cloud Messaging“ paslaugų darbuotoją programoje „React“, leidžiantį tvarkyti ir rodyti pranešimus.

Sukurkite pranešimų komponentą

Sukurti naują komponentai/Notification.js failą /src katalogą ir pridėkite šį kodą.

importuoti Reaguoti, { useState, useEffect } iš'reaguoti';
importuoti { Skrudintuvas, skrebučiai } iš„reaguoti-karštas-skrudinta duona“;
importuoti { requestPermission, onMessageListener } iš„../firebase“;
funkcijaPranešimas() {
konst [notification, setNotification] = useState({ titulą: '', kūnas: '' });
 useEffect (() => {
 requestPermission ();
konst unsubscribe = onMessageListener().then((naudingoji apkrova) => {
 setNotification({
 title: payload?.notification?.title,
 body: payload?.notification?.body,
 });
 skrudinta duona.sėkmė (`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 trukmė: 60000, 
 pozicija: 'viršutinis dešinysis', skyrius apie naršyklės puslapį
 });
});
grąžinti() => {
 unsubscribe.catch((klysti) =>konsolė.log('nepavyko:', klaida));
 };
 }, []);
grąžinti (



 </div>
 );
}
eksportuotinumatytas Pranešimas;

Šis kodas apibrėžia komponentą, kuris apdoroja tiesioginius pranešimus. Jis naudoja reaguoti-karšta-skrudinta duona biblioteka, kad būtų rodomi pranešimai vartotojui.

Komponentas prašo vartotojo leidimo, klausosi gaunamų pranešimų onMessageListener funkcija ir pagal numatytuosius nustatymus naršyklės puslapio viršuje dešinėje rodomas skrudinimo pranešimas su gautu pavadinimu ir tekstu vieną minutę. Galite toliau tinkinti pranešimą naudodamiesi pareigūno pagalba reaguoti-karšta-skrudinta duona dokumentacija ir CSS pozicijos nuosavybė.

Galiausiai atnaujinkite App.js failą importuoti Pranešimas komponentas.

importuoti„./App.css“;
importuoti Pranešimas iš'./components/Notification';
funkcijaProgramėlė() {
grąžinti (
"Programėlė">
"Programos antraštė"> 

 </header> 
 </div>
 );
}
eksportuotinumatytas Programėlė;

Išbandykite tiesioginio pranešimo funkciją

Eikite į priekį, sukite kūrimo serverį ir atidarykite http://locahlhost: 3000 naršyklėje, kad pasiektumėte programą. Turėtumėte gauti šį iššokantįjį langą, kad programa galėtų gauti pranešimus.

Spustelėkite Leisti. The kliento žetonas turi būti sugeneruotas ir prisijungęs naršyklės konsolė. Ženklą naudosite pranešimų kampanijoms siųsti į programą „React“.

Nukopijuokite kliento žetonas ir eikite į „Firebase“ kūrėjų pultą projekto apžvalga puslapį. Spustelėkite Pranešimų siuntimas iš debesies kortelė po Auginkite ir įtraukite savo auditoriją skyrius.

Spustelėkite Sukurkite savo pirmąją kampaniją, pasirinkite „Firebase“ pranešimų pranešimaiir pateikite pranešimo pavadinimą bei pranešimą. Pagal Įrenginio peržiūra skyrių, spustelėkite Siųsti bandomąjį pranešimą.

Įklijuokite ir pridėkite kliento prieigos raktą kitame iššokančiame lange ir spustelėkite Testas norėdami išsiųsti tiesioginį pranešimą.

Jei esate programoje, gausite tiesioginį pranešimą. Jei ne, gausite foninį pranešimą.

Tiesioginių pranešimų siuntimas naudojant „Firebase“ debesies pranešimų paslaugą

Push pranešimai yra vertinga funkcija, gerinanti žiniatinklio ir mobiliųjų programų naudotojų patirtį. Šiame vadove buvo akcentuoti tiesioginių pranešimų integravimo naudojant „Firebase“ veiksmai, įskaitant naudotojų leidimų tvarkymą ir pranešimų klausytojų nustatymą.

Naudodami „Firebase“ pranešimų siuntimo iš debesies API, galite efektyviai laiku pateikti naujinius ir suasmenintus pranešimus savo „React“ programoms.