Leer hoe u de Firebase Cloud Messaging (FCM) -functie kunt gebruiken om pushmeldingen op te nemen in een React-applicatie.

Pushmeldingen stellen applicaties in staat om tijdige updates, waarschuwingen of gepersonaliseerde berichten rechtstreeks naar de apparaten van gebruikers te sturen, ongeacht hun actieve gebruik van de applicatie. Deze meldingen zorgen voor continue gebruikersbetrokkenheid en directe connectiviteit.

In het geval van webapplicaties vangt de browser deze meldingen in eerste instantie op en stuurt ze vervolgens door naar de bijbehorende applicatie.

Zet een Firebase-project op

Volg de onderstaande stappen om aan de slag te gaan en een Firebase-project in te stellen:

  1. Ga naar Firebase-ontwikkelaarsconsole, meld u aan met uw Google-e-mailadres en klik op het Ga naar Console om naar de overzichtspagina van de console te navigeren.
  2. Klik op de overzichtspagina van de console op de Maak een project aan knop om een ​​nieuw project aan te maken. Geef vervolgens de naam van het project op.
    3. instagram viewer
  3. Nadat het project is aangemaakt, navigeert u naar de overzichtspagina van het project. U moet een applicatie op Firebase registreren om API-sleutels te genereren. Om een ​​app te registreren, klikt u op de Web pictogram, geef de app-naam op en klik op het App registreren knop.
  4. Kopieer de Firebase-configuratiecode na het registreren van uw React-app.

Configureer de Firebase Cloud Messaging-service (FCM).

Nadat u uw applicatie op Firebase heeft geregistreerd, is de volgende stap het configureren van de Firebase Cloud Messaging (FCM)-service.

  1. Navigeer naar de Project instellingen bladzijde.
  2. Klik vervolgens op de Cloud-berichten tabblad op de Project instellingen bladzijde. Firebase Cloud Messaging gebruikt Application Identity-sleutelparen om verbinding te maken met externe pushservices. Om deze reden moet u uw unieke identiteitssleutel genereren.
  3. Op de Cloud-berichten instellingen, navigeer naar de Webconfiguratie sectie en klik op de Sleutelpaar genereren knop om uw unieke sleutel te genereren.

Stel de React-app in

Eerst, maak een React-app. Eenmaal geïnstalleerd, ga je gang en installeer het vuurbasis En reactie-hete-toast pakketten die u gaat gebruiken om pushmeldingen in de React-app te implementeren.

npm installeer firebase reactie-hot-toast

U vindt de broncode van dit project hierin GitHub-opslagplaats.

Configureer Firebase en de Cloud Messaging-service

Ga naar je Project instellingen pagina op de ontwikkelaarsconsole en kopieer het opgegeven Firebase-configuratieobject. In de src map, maak een nieuwe firebase.js bestand en voeg de volgende code toe.

importeren { app initialiseren } van"firebase/app";
importeren { getMessaging, getToken, onMessage } van'firebase/berichten';
const firebaseConfig = {
 API sleutel: "",
 authDomein: "",
 projectId: "",
 opslagEmmer: "",
 messagingSenderId: "",
 appId: ""
};
const app = app initialiseren (firebaseConfig);
const messaging = getMessaging (app);

Vervang bovenstaande firebaseConfig object met degene die u hebt gekopieerd van de Project instellingen bladzijde. Deze code stelt de Firebase-instantie in en initialiseert het cloud messaging-object om FCM-functionaliteit in uw applicatie in te schakelen.

Beheer de machtigingsverzoeken van gebruikers voor meldingen

Om ervoor te zorgen dat de React-applicaties pushmeldingen ontvangen van de Cloud Messaging-service van Firebase, moet u de gebruikersmachtigingen afhandelen.

Dit omvat het definiëren en aanroepen van de toestemming vragen methode geleverd door het messaging-object, dat u eerder hebt geconfigureerd. Het zorgt ervoor dat u de reacties van de gebruiker op de toestemmingsverzoeken van de meldingen correct afhandelt.

Voeg de volgende code toe aan het firebase.js bestand na het initialiseren van het berichtenobject.

exporterenconst verzoekPermissie = () => {
troosten.log("Toestemming van gebruiker vragen...");
 Notification.requestPermission().then((toestemming) => {


als (toestemming "toegekend") {


troosten.log("Melding Gebruikerstoestemming verleend."); 
opbrengst getToken (berichten, { vapidKey: `Notification_key_pair` })
 .Dan((huidigeToken) => {


als (currentToken) {


troosten.log('Klanttoken:', huidigeToken);
 } anders {

troosten.log('Kan het app-registratietoken niet genereren.');
 }
 })
 .vangst((fout) => {


troosten.log('Er is een fout opgetreden bij het aanvragen van het token.', fout);
 });
 } anders {


troosten.log("Gebruikerstoestemming geweigerd.");
 }
 });


 }
toestemming vragen();

De verstrekte code vraagt ​​gebruikerstoestemming voor meldingen en handelt het toestemmingsantwoord af. Als toestemming wordt verleend, gaat het verder met het verkrijgen van een registratietoken voor de applicatie met behulp van de getToken functie.

Het registratietoken dient als identificatie voor het apparaat of de browser die de meldingen ontvangt. U kunt dit token vervolgens gebruiken om een ​​meldingscampagne op te zetten op de Firebase Cloud Messaging-instellingenpagina.

Zorg ervoor dat u de tijdelijke aanduiding vervangt Notification_key_pair met het daadwerkelijke sleutelpaar dat u eerder in het Webconfiguratie sectie.

Definieer meldingsluisteraars

Om elk type inkomende meldingen af ​​te handelen, is het noodzakelijk om berichtluisteraars in te stellen om inkomende meldingen en terugbelfuncties te volgen om berichtgebeurtenissen te activeren.

In uw firebase.js bestand, voeg de volgende code toe.

exporterenconst onMessageListener = () =>
nieuwBelofte((oplossen) => {
 onMessage (berichten, (payload) => {
 oplossen (payload);
 });
});

Deze functie stelt een berichtluisteraar in, specifiek voor pushmeldingen. De opBericht functie binnen opMessageListener wordt geactiveerd wanneer de app een pushmelding ontvangt en in focus is.

Wanneer een melding wordt ontvangen, bevat de payload van het bericht relevante gegevens die aan de melding zijn gekoppeld, zoals de titel en de hoofdtekst van het bericht.

Definieer een Firebase Messaging Service-medewerker

FCM vereist een Firebase Messaging service medewerker om inkomende pushmeldingen af ​​te handelen.

De servicemedewerker is een JavaScript-bestand dat op de achtergrond wordt uitgevoerd en pushmeldingen afhandelt - het staat internet toe app om meldingen te ontvangen en weer te geven, zelfs als de gebruiker de app heeft gesloten of is overgeschakeld naar een ander tabblad of raam.

In de /public map, maak een nieuwe firebase-berichten-sw.js bestand en voeg de volgende code toe.

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");
// het Firebase-configuratieobject 
const firebaseConfig = {
"configuratie-informatie"
 };


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


messaging.onBackgroundMessage(functie(lading) {
troosten.log('Ontvangen achtergrondbericht', lading);
const notificationTitle = payload.notification.title;
const notificatieOpties = {
 body: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 notificatieOpties);
});

Deze code stelt een servicemedewerker in voor Firebase Cloud Messaging in de React-applicatie, waardoor meldingen kunnen worden verwerkt en weergegeven.

Maak een meldingscomponent

Maak een nieuwe aan componenten/Notification.js bestand in de /src directory en voeg de volgende code toe.

importeren Reageren, { useState, useEffect } van'Reageer';
importeren { Broodrooster, toast } van'reageer-hete-toast';
importeren { requestPermission, onMessageListener } van'../vuurbasis';
functieKennisgeving() {
const [melding, setNotificatie] = useState({ titel: '', lichaam: '' });
 gebruikEffect(() => {
 toestemming vragen();
const uitschrijven = onMessageListener().then((lading) => {
 setMelding({
 titel: lading?.melding?.titel,
 lichaam: lading?.melding?.lichaam,
 });
 toast.succes(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 duur: 60000, 
 positie: 'rechtsboven', sectie van de browserpagina
 });
});
opbrengst() => {
 uitschrijven.catch((fout) =>troosten.log('mislukt:', fout));
 };
 }, []);
opbrengst (



 </div>
 );
}
exporterenstandaard Kennisgeving;

Deze code definieert een component die pushmeldingen afhandelt. Het maakt gebruik van de reactie-hete-toast bibliotheek om meldingen aan de gebruiker weer te geven.

De component vraagt ​​gebruikerstoestemming, luistert naar inkomende berichten met behulp van opMessageListener functie, en toont standaard een toastmelding met de ontvangen titel en hoofdtekst gedurende een minuut in de rechterbovenhoek van de browserpagina. U kunt de melding verder aanpassen met behulp van de ambtenaar reactie-hete-toast documentatie en de eigenschap CSS position.

Werk ten slotte de App.js bestand om de Kennisgeving bestanddeel.

importeren'./App.css';
importeren Kennisgeving van'./componenten/Notificatie';
functieapp() {
opbrengst (
"App">
"App-header"> 

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

Test de functie voor pushmeldingen

Ga je gang en start de ontwikkelingsserver en open http://locahlhost: 3000 in uw browser om toegang te krijgen tot de applicatie. U zou de volgende pop-up moeten krijgen om de toepassing toe te staan ​​meldingen te ontvangen.

Klik Toestaan. De client-token moet worden gegenereerd en ingelogd in de browserconsole. U gebruikt het token om meldingscampagnes naar uw React-app te sturen.

Kopieer de client-token en ga naar de ontwikkelaarsconsole van Firebase Projectoverzicht bladzijde. Klik op de Cloud-berichten kaart onder de Laat uw publiek groeien en betrekken sectie.

Klik Maak je eerste campagne, selecteer Firebase-meldingsberichtenen geef een titel en bericht op voor uw melding. Onder de Voorbeeld van apparaat sectie, klik Stuur een testbericht.

Plak en voeg het clienttoken toe in het pop-upvenster dat volgt en klik Test om de pushmelding te verzenden.

Als u zich in de applicatie bevindt, ontvangt u een pushmelding. Zo niet, dan ontvangt u een achtergrondmelding.

Pushmeldingen verzenden met Firebase Cloud Messaging Service

Pushmeldingen zijn een waardevolle functie voor het verbeteren van de gebruikerservaring voor zowel web- als mobiele applicaties. Deze gids belichtte de stappen voor het integreren van pushmeldingen met Firebase, inclusief het afhandelen van gebruikersmachtigingen en het instellen van berichtluisteraars.

Door gebruik te maken van Firebase Cloud Messaging API's, kunt u effectief tijdige updates en gepersonaliseerde berichten aan uw React-applicaties leveren.