Implementierung von Push-Benachrichtigungen in React Native mit Firebase

Die Implementierung von Push-Benachrichtigungen in einer React Native App kann die Benutzerbindung erheblich verbessern, indem sie zeitnahe Updates und Warnungen bereitstellt. Firebase Cloud Messaging (FCM) bietet eine zuverlässige und einfach zu integrierende Lösung für die Verwaltung von Push-Benachrichtigungen über Plattformen hinweg. Diese Anleitung führt Sie durch die Schritte zur Implementierung von Push-Benachrichtigungen in React Native mit Firebase.

Voraussetzungen

• Ein React Native Projekt, das mit Expo oder React Native CLI eingerichtet wurde
• Ein Firebase-Projekt, das in der Firebase Console erstellt wurde
• Grundkenntnisse in JavaScript und React Native
• Firebase SDK in Ihrem Projekt installiert

Firebase einrichten

Erstellen Sie zunächst ein Firebase-Projekt und fügen Sie Ihre App hinzu.

für Android

Laden Sie die Datei google-services.json herunter und legen Sie sie in das Android/App-Verzeichnis Ihres Projekts.

für iOS

Laden Sie die GoogleService-Info.plist-Datei herunter und fügen Sie sie Ihrem Xcode-Projekt hinzu. Installieren Sie das Firebase SDK über CocoaPods.

Abhängigkeiten installieren

Installieren Sie die notwendigen Firebase-Pakete:

• Für React Native CLI:

Lauf:

• Für Expo Managed Workflow:

Verwenden Sie das Expo Firebase SDK oder den Eject to Bare Workflow für native Module.

Berechtigungen anfordern und Token erhalten

Fordern Sie in Ihrem React Native-Code die Berechtigung für Benachrichtigungen an und rufen Sie das Gerätetoken ab:

Beispiel:

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
 const authStatus = await messaging().requestPermission();
 const enabled =
 authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
 authStatus === messaging.AuthorizationStatus.PROVISIONAL;

 if (enabled) {
 console.log('Authorization status:', authStatus);
 getFcmToken();
 }
}

async function getFcmToken() {
 const fcmToken = await messaging().getToken();
 if (fcmToken) {
 console.log('FCM Token:', fcmToken);
 // Send token to your server for push notifications
 }
}

requestUserPermission();

Bearbeitung eingehender Benachrichtigungen

Richten Sie Zuhörer ein, um Vordergrundbenachrichtigungen und -antworten zu bearbeiten:

messaging().onMessage(async remoteMessage => {
 console.log('A new FCM message arrived!', remoteMessage);
 // Show local notification or update UI
});

messaging().setBackgroundMessageHandler(async remoteMessage => {
 console.log('Message handled in the background!', remoteMessage);
 // Handle background message
});

Senden von Push-Benachrichtigungen

Verwenden Sie die Firebase Cloud Messaging API oder Firebase Console, um Benachrichtigungen zu senden.

{
 "to": "",
 "notification": {
 "title": "Hello!",
 "body": "This is a push notification."
 }
}

Senden Sie die Nachricht über die Firebase Cloud Messaging REST API oder die Firebase Console.

Schlussfolgerung

Die Integration von Push-Benachrichtigungen mit Firebase in React Native beinhaltet das Einrichten von Firebase, das Anfordern von Berechtigungen, das Abrufen von Gerätetoken und das Bearbeiten von Nachrichten. Die richtige Implementierung kann die Benutzerbindung verbessern und Ihre App dynamisch und interaktiv halten.