Lær, hvordan du bruger Firebase Cloud Messaging-funktionen (FCM) til at inkorporere push-meddelelser i en React-applikation.

Push-meddelelser gør det muligt for applikationer at sende rettidige opdateringer, advarsler eller personlige beskeder direkte til brugernes enheder, uanset deres aktive brug af applikationen. Disse meddelelser sikrer kontinuerlig brugerengagement og øjeblikkelig tilslutning.

I tilfælde af webapplikationer fanger browseren disse meddelelser indledningsvis og videresender dem efterfølgende til den tilsvarende applikation.

Konfigurer et Firebase-projekt

Følg nedenstående trin for at komme i gang og konfigurere et Firebase-projekt:

  1. Gå over til Firebase Developer Console, log ind med din Google-e-mailadresse, og klik på Gå til konsol knappen for at navigere til konsoloversigtssiden.
  2. På konsoloversigtssiden skal du klikke på Opret et projekt knappen for at oprette et nyt projekt. Angiv derefter projektets navn.
  3. Når projektet er oprettet, skal du navigere til projektets oversigtsside. Du skal registrere en applikation på Firebase for at generere API-nøgler. For at registrere en app skal du klikke på
    instagram viewer
    Web ikonet, angiv appnavnet og klik på Registrer app knap.
  4. Kopiér Firebase-konfigurationskoden efter registrering af din React-app.

Konfigurer Firebase Cloud Messaging (FCM) Service

Når du har registreret din applikation på Firebase, er næste trin at konfigurere Firebase Cloud Messaging-tjenesten (FCM).

  1. Naviger til Projektindstillinger side.
  2. Klik derefter på Cloud Messaging fanen på Projektindstillinger side. Firebase Cloud Messaging bruger Application Identity-nøglepar til at oprette forbindelse til eksterne push-tjenester. Af denne grund skal du generere din unikke identitetsnøgle.
  3. På den Cloud Messaging indstillinger, skal du navigere til Web konfiguration afsnittet, og klik på Generer nøglepar knappen for at generere din unikke nøgle.

Konfigurer React-appen

Først, oprette en React-app. Når det er installeret, skal du gå videre og installere brandbase og reagere-varm-toast pakker, som du vil bruge til at implementere push-meddelelser i React-appen.

npm installer firebase react-hot-toast

Du kan finde dette projekts kildekode i denne GitHub-depot.

Konfigurer Firebase og Cloud Messaging Service

Gå over til din Projektindstillinger side på udviklerkonsollen, og kopier det medfølgende Firebase-konfigurationsobjekt. I src mappe, skal du oprette en ny firebase.js fil og tilføj følgende kode.

importere { initializeApp } fra"firebase/app";
importere { getMessaging, getToken, onMessage } fra'firebase/beskeder';
konst firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projekt-id: "",
 storageBucket: "",
 messagingSenderId: "",
 appId: ""
};
konst app = initializeApp (firebaseConfig);
konst messaging = getMessaging (app);

Udskift ovenstående firebaseConfig objekt med den, du kopierede fra Projektindstillinger side. Denne kode opsætter Firebase-instansen og initialiserer skymeddelelsesobjektet for at aktivere FCM-funktionalitet i din applikation.

Administrer notifikationers brugertilladelsesanmodninger

For at tillade, at React-applikationerne modtager push-beskeder fra Firebases Cloud Messaging-tjeneste, skal du håndtere brugertilladelserne.

Dette involverer at definere og kalde anmod om tilladelse metode leveret af meddelelsesobjektet, som du tidligere har konfigureret. Det sikrer, at du håndterer brugerens svar på meddelelsernes anmodninger om tilladelse korrekt.

Tilføj følgende kode til firebase.js fil efter initialisering af meddelelsesobjektet.

eksportkonst requestPermission = () => {
konsol.log("Anmoder om brugertilladelse...");
 Notification.requestPermission().then((tilladelse) => {


hvis (tilladelse "bevilget") {


konsol.log("Meddelelse brugertilladelse givet."); 
Vend tilbage getToken (beskeder, { vapidKey: `Notifikationsnøglepar` })
 .derefter((nuværende Token) => {


hvis (currentToken) {


konsol.log('Client Token:', currentToken);
 } andet {

konsol.log("Kunne ikke generere appregistreringstokenet.");
 }
 })
 .fangst((fejl) => {


konsol.log("Der opstod en fejl under anmodning om at modtage tokenet.", fejl);
 });
 } andet {


konsol.log("Brugertilladelse nægtet.");
 }
 });


 }
requestPermission();

Den angivne kode anmoder om brugertilladelse til meddelelser og håndterer tilladelsessvaret. Hvis der gives tilladelse, fortsætter den med at få et registreringstoken til applikationen ved hjælp af getToken fungere.

Registreringstokenet fungerer som en identifikator for den enhed eller browser, der modtager meddelelserne. Du kan derefter bruge dette token til at oprette en underretningskampagne på Firebase Cloud Messaging-indstillingssiden.

Sørg for at udskifte pladsholderen Notification_key_pair med det faktiske nøglepar, du genererede tidligere i Web konfiguration afsnit.

Definer notifikationslyttere

For at håndtere enhver form for indgående notifikationer er det nødvendigt at konfigurere beskedlyttere til at spore indgående notifikationer og tilbagekaldsfunktioner for at udløse eventuelle beskedhændelser.

I din firebase.js fil, skal du tilføje følgende kode.

eksportkonst onMessageListener = () =>
nyLøfte((beslutte) => {
 onMessage (beskeder, (nyttelast) => {
 løse (nyttelast);
 });
});

Denne funktion opsætter en beskedlytter specifikt til push-meddelelser. Det onMessage funktion indenfor onMessageListener udløses, hver gang appen modtager en push-notifikation og er i fokus.

Når en meddelelse modtages, vil meddelelsens nyttelast indeholde relevante data knyttet til meddelelsen, såsom titlen og brødteksten på meddelelsen.

Definer en Firebase Messaging Service Worker

FCM kræver en Firebase Messaging servicemedarbejder til at håndtere indgående push-beskeder.

Serviceworkeren er en JavaScript-fil, der kører i baggrunden og håndterer push-meddelelser – den tillader internettet app til at modtage og vise meddelelser, selvom brugeren har lukket appen eller skiftet til en anden fane eller vindue.

I /public mappe, skal du oprette en ny firebase-messaging-sw.js fil og inkludere følgende kode.

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-konfigurationsobjektet 
konst firebaseConfig = {
"konfigurationsoplysninger"
 };


firebase.initializeApp (firebaseConfig);
konst messaging = firebase.messaging();


messaging.onBackgroundMessage(fungere(nyttelast) {
konsol.log('Modtaget baggrundsbesked', nyttelast);
konst notificationTitle = payload.notification.title;
konst notificationOptions = {
 body: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 meddelelsesmuligheder);
});

Denne kode opsætter en servicemedarbejder til Firebase Cloud Messaging i React-applikationen, hvilket muliggør håndtering og visning af meddelelser.

Opret en meddelelseskomponent

Opret en ny komponenter/Notifikation.js fil i /src bibliotek og tilføje følgende kode.

importere Reager, { useState, useEffect } fra'reagere';
importere { Brødrister, ristet brød } fra'reager-varm-toast';
importere { requestPermission, onMessageListener } fra'../firebase';
fungereNotifikation() {
konst [notification, setNotification] = useState({ titel: '', legeme: '' });
 useEffect(() => {
 requestPermission();
konst unsubscribe = onMessageListener().then((nyttelast) => {
 setNotifikation({
 titel: nyttelast?.meddelelse?.titel,
 body: nyttelast?.meddelelse?.body,
 });
 toast.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 varighed: 60000, 
 position: 'øverst til højre', afsnit af browsersiden
 });
});
Vend tilbage() => {
 unsubscribe.catch((fejl) =>konsol.log('mislykkedes: ', fejl));
 };
 }, []);
Vend tilbage (



 </div>
 );
}
eksportStandard Notifikation;

Denne kode definerer en komponent, der håndterer push-meddelelser. Den udnytter reagere-varm-toast bibliotek for at vise meddelelser til brugeren.

Komponenten anmoder om brugertilladelse, lytter efter indgående beskeder vha onMessageListener funktion, og viser som standard en toast-meddelelse med den modtagne titel og brødtekst i et minuts varighed øverst til højre på browsersiden. Du kan tilpasse meddelelsen yderligere med hjælp fra embedsmanden reagere-varm-toast dokumentation og CSS-positionsegenskaben.

Opdater endelig App.js fil for at importere Notifikation komponent.

importere'./App.css';
importere Notifikation fra'./components/Meddelelse';
fungereApp() {
Vend tilbage (
"App">
"App-header"> 

 </header> 
 </div>
 );
}
eksportStandard App;

Test Push Notification-funktionen

Gå videre og skru udviklingsserveren op og åbn http://locahlhost: 3000 på din browser for at få adgang til applikationen. Du bør få følgende pop op for at tillade, at applikationen modtager meddelelser.

Klik Give lov til. Det klient token skal genereres og logges på browserkonsol. Du skal bruge tokenet til at sende notifikationskampagner til din React-app.

Kopier klient token og gå over til Firebases udviklerkonsol Projektoversigt side. Klik på Cloud Messaging kort under Udvid og engager dit publikum afsnit.

Klik Opret din første kampagne, Vælg Firebase-meddelelser, og angiv en titel og besked til din notifikation. Under Forhåndsvisning af enheden sektion, klik Send testbesked.

Indsæt og tilføj klienttokenet i pop op-vinduet, der følger, og klik Prøve for at sende push-meddelelsen.

Hvis du er på applikationen, vil du modtage en push-besked. Hvis ikke, vil du modtage en baggrundsmeddelelse.

Afsendelse af push-meddelelser ved hjælp af Firebase Cloud Messaging Service

Push-meddelelser er en værdifuld funktion til at forbedre brugeroplevelsen for både web- og mobilapplikationer. Denne vejledning fremhævede trinene til at integrere push-meddelelser ved hjælp af Firebase, herunder håndtering af brugertilladelser og opsætning af beskedlyttere.

Ved at udnytte Firebase Cloud Messaging API'er kan du effektivt levere rettidige opdateringer og personlige beskeder til dine React-applikationer.