Lær hvordan du bruker Firebase Cloud Messaging-funksjonen (FCM) for å inkorporere push-varsler i en React-applikasjon.

Push-varsler gjør det mulig for applikasjoner å sende rettidige oppdateringer, varsler eller personlige meldinger direkte til brukernes enheter, uavhengig av deres aktive bruk av applikasjonen. Disse varslene sikrer kontinuerlig brukerengasjement og umiddelbar tilkobling.

Når det gjelder nettapplikasjoner, fanger nettleseren opp disse varslene først og videresender dem deretter til den tilsvarende applikasjonen.

Sett opp et Firebase-prosjekt

Følg trinnene nedenfor for å komme i gang og sette opp et Firebase-prosjekt:

  1. Gå over til Firebase utviklerkonsoll, logg på med Google-e-postadressen din og klikk på Gå til konsoll knappen for å navigere til konsolloversiktssiden.
  2. På konsolloversiktssiden klikker du på Lag et prosjekt knappen for å opprette et nytt prosjekt. Oppgi deretter prosjektets navn.
  3. Når prosjektet er opprettet, går du til prosjektets oversiktsside. Du må registrere en applikasjon på Firebase for å generere API-nøkler. For å registrere en app, klikk på
    instagram viewer
    Web ikonet, oppgi appnavnet og klikk på Registrer app knapp.
  4. Kopier Firebase-konfigurasjonskoden etter at du har registrert React-appen din.

Konfigurer Firebase Cloud Messaging (FCM)-tjeneste

Når du har registrert applikasjonen din på Firebase, er neste trinn å konfigurere Firebase Cloud Messaging-tjenesten (FCM).

  1. Naviger til Prosjektinnstillinger side.
  2. Deretter klikker du på Skymeldinger fanen på Prosjektinnstillinger side. Firebase Cloud Messaging bruker Application Identity-nøkkelpar for å koble til eksterne push-tjenester. Av denne grunn må du generere din unike identitetsnøkkel.
  3. På Skymeldinger innstillinger, naviger til Nettkonfigurasjon delen, og klikk på Generer nøkkelpar for å generere din unike nøkkel.

Sett opp React-appen

Først, lage en React-app. Når den er installert, fortsett og installer brannbase og reagere-varm-toast pakker som du vil bruke til å implementere push-varsler i React-appen.

npm installer firebase react-hot-toast

Du finner dette prosjektets kildekode i denne GitHub-depot.

Konfigurer Firebase og skymeldingstjenesten

Gå over til din Prosjektinnstillinger siden på utviklerkonsollen, og kopier det angitte Firebase-konfigurasjonsobjektet. I src katalog, opprette en ny firebase.js fil og legg til følgende kode.

import { initializeApp } fra"firebase/app";
import { getMessaging, getToken, onMessage } fra'firebase/meldinger';
konst firebaseConfig = {
 apiKey: "",
 authDomain: "",
 prosjekt-ID: "",
 lagringsbøtte: "",
 messagingSenderId: "",
 appId: ""
};
konst app = initializeApp (firebaseConfig);
konst meldinger = getMessaging (app);

Erstatt ovenstående firebaseConfig objekt med den du kopierte fra Prosjektinnstillinger side. Denne koden vil sette opp Firebase-forekomsten og initialisere skymeldingsobjektet for å aktivere FCM-funksjonalitet i applikasjonen din.

Administrer varslingers brukertillatelsesforespørsler

For å tillate at React-appene mottar push-varsler fra Firebase sin Cloud Messaging-tjeneste, må du håndtere brukertillatelsene.

Dette innebærer å definere og kalle requestPermission metode levert av meldingsobjektet, som du tidligere har konfigurert. Det sikrer at du håndterer brukerens svar på varslenes tillatelsesforespørsler på riktig måte.

Legg til følgende kode til firebase.js fil etter initialisering av meldingsobjektet.

eksportkonst requestPermission = () => {
konsoll.Logg("Ber om brukertillatelse ...");
 Notification.requestPermission().then((tillatelse) => {


hvis (tillatelse "gitt") {


konsoll.Logg("Varsling brukertillatelse gitt."); 
komme tilbake getToken (meldinger, { vapidKey: `Notification_key_pair` })
 .deretter((gjeldende Token) => {


hvis (currentToken) {


konsoll.Logg('Klienttoken:', gjeldende Token);
 } ellers {

konsoll.Logg("Kunne ikke generere appregistreringstokenet.");
 }
 })
 .å fange((feil) => {


konsoll.Logg('Det oppsto en feil ved forespørsel om å motta tokenet.', feil);
 });
 } ellers {


konsoll.Logg("Brukertillatelse nektet.");
 }
 });


 }
requestPermission();

Den oppgitte koden ber om brukertillatelse for varsler og håndterer tillatelsessvaret. Hvis tillatelse gis, fortsetter den med å skaffe et registreringsmerke for applikasjonen ved å bruke getToken funksjon.

Registreringstokenet fungerer som en identifikator for enheten eller nettleseren som mottar varslene. Du kan deretter bruke dette tokenet til å sette opp en varslingskampanje på innstillingssiden for Firebase Cloud Messaging.

Pass på at du bytter plassholderen Notification_key_pair med det faktiske nøkkelparet du genererte tidligere i Nettkonfigurasjon seksjon.

Definer varslingslyttere

For å håndtere alle typer innkommende varsler, er det nødvendig å sette opp meldingslyttere for å spore innkommende varsler og tilbakeringingsfunksjoner for å utløse meldingshendelser.

I din firebase.js fil, legg til følgende kode.

eksportkonst onMessageListener = () =>
nyLove((Løse) => {
 onMessage (meldinger, (nyttelast) => {
 løse (nyttelast);
 });
});

Denne funksjonen setter opp en meldingslytter spesifikt for push-varsler. De onMessage funksjon innenfor onMessageListener utløses hver gang appen mottar et push-varsel og er i fokus.

Når et varsel mottas, vil meldingens nyttelast inneholde relevante data knyttet til varselet, for eksempel tittelen og brødteksten til meldingen.

Definer en Firebase Messaging Service Worker

FCM krever en Firebase Messaging servicearbeider for å håndtere innkommende push-varsler.

Tjenestearbeideren er en JavaScript-fil som kjører i bakgrunnen og håndterer push-varsler – den tillater nettet app for å motta og vise varsler, selv om brukeren har lukket appen eller byttet til en annen fane eller vindu.

I /public katalog, opprette 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-konfigurasjonsobjektet 
konst firebaseConfig = {
"konfigurasjonsinformasjon"
 };


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


messaging.onBackgroundMessage(funksjon(nyttelast) {
konsoll.Logg("Mottatt bakgrunnsmelding", nyttelast);
konst notificationTitle = payload.notification.title;
konst notificationOptions = {
 body: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 varslingsalternativer);
});

Denne koden setter opp en tjenestearbeider for Firebase Cloud Messaging i React-applikasjonen, og muliggjør håndtering og visning av varsler.

Opprett en varslingskomponent

Lage en ny komponenter/Notification.js fil i /src katalog og legg til følgende kode.

import Reager, { useState, useEffect } fra'reagere';
import { Brødrister, ristet brød } fra'reager-hot-toast';
import { requestPermission, onMessageListener } fra'../firebase';
funksjonMelding() {
konst [notification, setNotification] = useState({ tittel: '', kropp: '' });
 useEffect(() => {
 requestPermission();
konst unsubscribe = onMessageListener().then((nyttelast) => {
 setNotification({
 tittel: nyttelast?.varsling?.tittel,
 body: nyttelast?.notification?.body,
 });
 toast.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 varighet: 60000, 
 posisjon: 'øverst til høyre', seksjon av nettlesersiden
 });
});
komme tilbake() => {
 unsubscribe.catch((feil) =>konsoll.Logg('mislyktes:', feil));
 };
 }, []);
komme tilbake (



 </div>
 );
}
eksportmisligholde Melding;

Denne koden definerer en komponent som håndterer push-varsler. Den bruker reagere-varm-toast bibliotek for å vise varsler til brukeren.

Komponenten ber brukertillatelse, lytter etter innkommende meldinger ved hjelp av onMessageListener funksjon, og viser som standard et toastvarsel med den mottatte tittelen og brødteksten i en varighet på ett minutt øverst til høyre på nettlesersiden. Du kan tilpasse varselet ytterligere ved hjelp av tjenestemannen reagere-varm-toast dokumentasjon og CSS-posisjonsegenskapen.

Til slutt, oppdater App.js filen for å importere Melding komponent.

import'./App.css';
import Melding fra'./components/Notification';
funksjonApp() {
komme tilbake (
"App">
"App-header"> 

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

Test Push Notification-funksjonen

Gå videre og snurr opp utviklingsserveren og åpne http://locahlhost: 3000 på nettleseren din for å få tilgang til applikasjonen. Du bør få opp følgende popup-vindu for å tillate at applikasjonen mottar varsler.

Klikk Tillate. De klient token skal genereres og logges på nettleserkonsoll. Du vil bruke tokenet til å sende varslingskampanjer til React-appen din.

Kopier klient token og gå over til Firebases utviklerkonsoll prosjekt oversikt side. Klikk på Skymeldinger kortet under Utvid og engasjer publikum seksjon.

Klikk Opprett din første kampanje, plukke ut Firebase-varslingsmeldinger, og oppgi en tittel og melding for varselet. Under Forhåndsvisning av enheten seksjon, klikk Send testmelding.

Lim inn og legg til klienttokenet i popup-vinduet som følger og klikk Test for å sende push-varslingen.

Hvis du er på applikasjonen, vil du motta et push-varsel. Hvis ikke, vil du motta et bakgrunnsvarsel.

Sende push-varsler ved hjelp av Firebase Cloud Messaging Service

Push-varsler er en verdifull funksjon for å forbedre brukeropplevelsen for både nett- og mobilapplikasjoner. Denne veiledningen fremhevet trinnene for å integrere push-varsler ved hjelp av Firebase, inkludert håndtering av brukertillatelser og konfigurering av meldingslyttere.

Ved å utnytte Firebase Cloud Messaging API-er kan du effektivt levere rettidige oppdateringer og personlig tilpassede meldinger til React-appene dine.