So implementieren Sie Push-Benachrichtigungen in React mithilfe von Firebase

Push-Benachrichtigungen ermöglichen es Anwendungen, zeitnahe Updates, Warnungen oder personalisierte Nachrichten direkt an die Geräte der Benutzer zu senden, unabhängig davon, ob sie die Anwendung aktiv nutzen. Diese Benachrichtigungen gewährleisten eine kontinuierliche Benutzereinbindung und sofortige Konnektivität.

Bei Webanwendungen erfasst der Browser diese Benachrichtigungen zunächst und leitet sie anschließend an die entsprechende Anwendung weiter.

Richten Sie ein Firebase-Projekt ein

Führen Sie die folgenden Schritte aus, um zu beginnen und ein Firebase-Projekt einzurichten:

1. Geh 'rüber zu Firebase-Entwicklerkonsole, melden Sie sich mit Ihrer Google-E-Mail-Adresse an und klicken Sie auf Gehen Sie zur Konsole Klicken Sie auf die Schaltfläche, um zur Übersichtsseite der Konsole zu navigieren.
2. Klicken Sie auf der Übersichtsseite der Konsole auf Erstellen Sie ein Projekt
   instagram viewer
   Klicken Sie auf die Schaltfläche, um ein neues Projekt zu erstellen. Geben Sie dann den Namen des Projekts ein.
3. Sobald das Projekt erfolgreich erstellt wurde, navigieren Sie zur Übersichtsseite des Projekts. Sie müssen eine Anwendung bei Firebase registrieren, um API-Schlüssel zu generieren. Um eine App zu registrieren, klicken Sie auf Netz Geben Sie den App-Namen ein und klicken Sie auf das Symbol App registrieren Taste.
4. Kopieren Sie den Firebase-Konfigurationscode, nachdem Sie Ihre React-App registriert haben.

Konfigurieren Sie den Firebase Cloud Messaging (FCM)-Dienst

Nachdem Sie Ihre Anwendung bei Firebase registriert haben, besteht der nächste Schritt darin, den Firebase Cloud Messaging (FCM)-Dienst zu konfigurieren.

1. Navigieren Sie zu Projekt Einstellungen Buchseite.
2. Klicken Sie anschließend auf Cloud-Messaging Registerkarte auf der Projekt Einstellungen Buchseite. Firebase Cloud Messaging verwendet Application Identity-Schlüsselpaare, um eine Verbindung mit externen Push-Diensten herzustellen. Aus diesem Grund müssen Sie Ihren eindeutigen Identitätsschlüssel generieren.
3. Auf der Cloud-Messaging Navigieren Sie zu den Einstellungen Webkonfiguration Abschnitt, und klicken Sie auf Schlüsselpaar generieren Klicken Sie auf die Schaltfläche, um Ihren eindeutigen Schlüssel zu generieren.

Richten Sie die React-App ein

Erste, Erstellen Sie eine React-App. Fahren Sie nach der Installation mit der Installation fort Feuerbasis Und React-Hot-Toast Pakete, mit denen Sie Push-Benachrichtigungen in der React-App implementieren.

npm installiert Firebase React-Hot-Toast

Den Quellcode dieses Projekts finden Sie hier GitHub-Repository.

Konfigurieren Sie Firebase und den Cloud Messaging Service

Gehen Sie zu Ihrem Projekt Einstellungen Seite auf der Entwicklerkonsole und kopieren Sie das bereitgestellte Firebase-Konfigurationsobjekt. Im src Verzeichnis, erstellen Sie ein neues firebase.js Datei und fügen Sie den folgenden Code hinzu.

importieren { initializeApp } aus„firebase/app“;
importieren { getMessaging, getToken, onMessage } aus'firebase/messaging';
const firebaseConfig = {
 API-Schlüssel: "",
 AuthDomain: "",
 Projekt-ID: "",
 storageBucket: "",
 messageSenderId: "",
 App-ID: ""
};
const app = initializeApp (firebaseConfig);
const Messaging = getMessaging (App);

Ersetzen Sie das Obige firebaseConfig Objekt mit dem, das Sie kopiert haben Projekt Einstellungen Buchseite. Dieser Code richtet die Firebase-Instanz ein und initialisiert das Cloud-Messaging-Objekt, um die FCM-Funktionalität in Ihrer Anwendung zu aktivieren.

Verwalten Sie Benutzerberechtigungsanfragen für Benachrichtigungen

Damit die React-Anwendungen Push-Benachrichtigungen vom Cloud Messaging-Dienst von Firebase empfangen können, müssen Sie die Benutzerberechtigungen verwalten.

Dazu gehört das Definieren und Aufrufen des um Erlaubnis bitten Methode, die vom Messaging-Objekt bereitgestellt wird und das Sie zuvor konfiguriert haben. Dadurch wird sichergestellt, dass Sie die Antworten des Benutzers auf die Berechtigungsanfragen der Benachrichtigungen ordnungsgemäß verarbeiten.

Fügen Sie den folgenden Code hinzu firebase.js Datei nach der Initialisierung des Messaging-Objekts.

Exportconst requestPermission = () => {
Konsole.Protokoll(„Benutzererlaubnis anfordern…“);
 Notification.requestPermission().then((Erlaubnis) => {
Wenn (Erlaubnis "gewährt") {
Konsole.Protokoll(„Benachrichtigungsbenutzerberechtigung erteilt.“); 
zurückkehren getToken (Messaging, { vapidKey: „Notification_key_pair“. })
 .Dann((currentToken) => {
Wenn (currentToken) {
Konsole.Protokoll('Client-Token:', currentToken);
 } anders {

Konsole.Protokoll(„Das App-Registrierungstoken konnte nicht generiert werden.“);
 }
 })
 .fangen((irren) => {
Konsole.Protokoll(„Bei der Anforderung, den Token zu erhalten, ist ein Fehler aufgetreten.“, irren);
 });
 } anders {
Konsole.Protokoll(„Benutzerberechtigung verweigert.“);
 }
 });
 }
um Erlaubnis bitten();

Der bereitgestellte Code fordert Benutzerberechtigungen für Benachrichtigungen an und verarbeitet die Berechtigungsantwort. Wenn die Erlaubnis erteilt wird, wird mit der Anforderung eines Registrierungstokens für die Anwendung fortgefahren bekomme Token Funktion.

Der Registrierungstoken dient als Kennung für das Gerät oder den Browser, der die Benachrichtigungen empfängt. Sie können dieses Token dann verwenden, um eine Benachrichtigungskampagne auf der Firebase Cloud Messaging-Einstellungsseite einzurichten.

Stellen Sie sicher, dass Sie den Platzhalter ersetzen Notification_key_pair mit dem tatsächlichen Schlüsselpaar, das Sie zuvor generiert haben Webkonfiguration Abschnitt.

Definieren Sie Benachrichtigungs-Listener

Um jede Art von eingehenden Benachrichtigungen zu verarbeiten, müssen Nachrichten-Listener eingerichtet werden, um eingehende Benachrichtigungen zu verfolgen, und Rückruffunktionen eingerichtet werden, um alle Nachrichtenereignisse auszulösen.

In deinem firebase.js Datei hinzufügen, fügen Sie den folgenden Code hinzu.

Exportconst onMessageListener = () =>
neuVersprechen((beschließen) => {
 onMessage (Messaging, (Payload) => {
 auflösen (Nutzlast);
 });
});

Diese Funktion richtet einen Nachrichten-Listener speziell für Push-Benachrichtigungen ein. Der onMessage Funktion im Inneren onMessageListener wird immer dann ausgelöst, wenn die App eine Push-Benachrichtigung erhält und im Fokus ist.

Wenn eine Benachrichtigung empfangen wird, enthält die Nachrichtennutzlast relevante Daten, die mit der Benachrichtigung verknüpft sind, beispielsweise den Titel und den Text der Nachricht.

Definieren Sie einen Firebase Messaging Service Worker

FCM erfordert ein Firebase Messaging Servicemitarbeiter um eingehende Push-Benachrichtigungen zu verarbeiten.

Der Service Worker ist eine JavaScript-Datei, die im Hintergrund ausgeführt wird und Push-Benachrichtigungen verarbeitet – er ermöglicht das Web App zum Empfangen und Anzeigen von Benachrichtigungen, auch wenn der Benutzer die App geschlossen oder zu einem anderen Tab gewechselt hat oder Fenster.

Im /public Verzeichnis, erstellen Sie ein neues firebase-messaging-sw.js Datei und fügen Sie den folgenden Code ein.

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");
//das Firebase-Konfigurationsobjekt 
const firebaseConfig = {
„Konfigurationsinformationen“
 };
firebase.initializeApp (firebaseConfig);
const Messaging = firebase.messaging();
Messaging.onBackgroundMessage(Funktion(Nutzlast) {
Konsole.Protokoll(„Hintergrundmeldung erhalten“, Nutzlast);
const notificationTitle = payload.notification.title;
const notificationOptions = {
 Körper: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 Benachrichtigungsoptionen);
});

Dieser Code richtet einen Service Worker für Firebase Cloud Messaging in der React-Anwendung ein und ermöglicht die Verarbeitung und Anzeige von Benachrichtigungen.

Erstellen Sie eine Benachrichtigungskomponente

Erstelle eine neue Komponenten/Notification.js Datei in der /src Verzeichnis und fügen Sie den folgenden Code hinzu.

importieren Reagieren, { useState, useEffect } aus'reagieren';
importieren { Toaster, Toast } aus'React-Hot-Toast';
importieren { requestPermission, onMessageListener } aus'../firebase';
FunktionBenachrichtigung() {
const [Benachrichtigung, setNotification] = useState({ Titel: '', Körper: '' });
 useEffect(() => {
 um Erlaubnis bitten();
const unsubscribe = onMessageListener().then((Nutzlast) => {
 setNotification({
 Titel: Nutzlast?.Benachrichtigung?.Titel,
 body: Nutzlast?.notification?.body,
 });
 toast.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 Dauer: 60000, 
 Position: 'oben rechts', Abschnitt von der Browserseite
 });
});
zurückkehren() => {
 unsubscribe.catch((irren) =>Konsole.Protokoll('fehlgeschlagen: ', irren));
 };
 }, []);
zurückkehren (



 </div>
 );
}
ExportStandard Benachrichtigung;

Dieser Code definiert eine Komponente, die Push-Benachrichtigungen verarbeitet. Es nutzt die React-Hot-Toast Bibliothek, um dem Benutzer Benachrichtigungen anzuzeigen.

Die Komponente fordert Benutzerberechtigungen an und wartet auf eingehende Nachrichten onMessageListener Funktion und zeigt standardmäßig eine Toastbenachrichtigung mit dem empfangenen Titel und Text für eine Minute lang oben rechts auf der Browserseite an. Sie können die Benachrichtigung mit Hilfe des Beamten weiter anpassen React-Hot-Toast Dokumentation und die CSS-Positionseigenschaft.

Aktualisieren Sie abschließend die App.js Datei zum Importieren Benachrichtigung Komponente.

importieren'./App.css';
importieren Benachrichtigung aus'./components/Notification';
FunktionApp() {
zurückkehren (
„App“>
„App-Header“> 

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

Testen Sie die Push-Benachrichtigungsfunktion

Fahren Sie fort, starten Sie den Entwicklungsserver und öffnen Sie ihn http://locahlhost: 3000 in Ihrem Browser ein, um auf die Anwendung zuzugreifen. Sie sollten das folgende Popup-Fenster erhalten, damit die Anwendung Benachrichtigungen empfangen kann.

Klicken Erlauben. Der Client-Token sollte generiert und protokolliert werden Browserkonsole. Mit dem Token senden Sie Benachrichtigungskampagnen an Ihre React-App.

Kopiere das Client-Token und gehen Sie zur Entwicklerkonsole von Firebase Projektübersicht Buchseite. Drücke den Cloud-Messaging Karte unter der Erweitern und binden Sie Ihr Publikum ein Abschnitt.

Klicken Erstellen Sie Ihre erste Kampagne, wählen Firebase-Benachrichtigungsnachrichtenund geben Sie einen Titel und eine Nachricht für Ihre Benachrichtigung ein. Unter dem Gerätevorschau Abschnitt, klicken Sie Testnachricht senden.

Fügen Sie das Client-Token in das folgende Popup-Fenster ein, fügen Sie es hinzu und klicken Sie darauf Prüfen um die Push-Benachrichtigung zu versenden.

Wenn Sie sich in der Bewerbung befinden, erhalten Sie eine Push-Benachrichtigung. Wenn nicht, erhalten Sie eine Hintergrundbenachrichtigung.

Senden von Push-Benachrichtigungen über den Firebase Cloud Messaging Service

Push-Benachrichtigungen sind eine wertvolle Funktion zur Verbesserung des Benutzererlebnisses sowohl für Web- als auch für mobile Anwendungen. In diesem Leitfaden werden die Schritte zur Integration von Push-Benachrichtigungen mit Firebase hervorgehoben, einschließlich der Handhabung von Benutzerberechtigungen und der Einrichtung von Nachrichten-Listenern.

Durch die Nutzung der Firebase Cloud Messaging APIs können Sie effektiv zeitnahe Updates und personalisierte Nachrichten an Ihre React-Anwendungen übermitteln.