So implementieren Sie Push-Benachrichtigungen in React mithilfe von Firebase

Leser wie Sie unterstützen MUO. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Push-Benachrichtigungen ermöglichen es Anwendungen, zeitnahe Aktualisierungen, 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.

MAKEUSEOF-VIDEO DES TAGES Scrollen Sie, um mit dem Inhalt fortzufahren

Richten Sie ein Firebase-Projekt ein

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

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.
Klicken Sie auf der Übersichtsseite der Konsole auf Erstellen Sie ein Projekt Klicken Sie auf die Schaltfläche, um ein neues Projekt zu erstellen. Geben Sie dann den Namen des Projekts ein.
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.
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.

Was macht die Hardwarebeschleunigung in Chrome?

Navigieren Sie zu Projekt Einstellungen Buchseite.
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.
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 install firebase react-hot-toast