Genomföra push-meddelanden i React Native Använda Firebase

Genomföra push-meddelanden i en React Native-app kan signifikant förbättra användarengagemanget genom att tillhandahålla aktuella uppdateringar och varningar. Firebase Cloud Messaging (FCM) erbjuder en pålitlig och lätt att integrera lösning för att hantera push-meddelanden över plattformar. Denna guide går igenom stegen för att genomföra push-meddelanden i React Native med Firebase.

Förutsättningar

• Ett Reagera Native-projekt som inrättats med Expo eller React Native CLI
• Ett Firebase-projekt som skapats i Firebase Console
• Grundläggande kunskap om JavaScript och Reagera infödda
• Firebase SDK installerat i ditt projekt

Ställa in Firebase

Skapa först ett Firebase-projekt och lägg till din app till det. Ladda ner konfigurationsfilerna:

För Android

Ladda ner google-services.json-filen och placera den i ditt projekts android/app-katalog. Se till att lägga till Firebase SDK till dina projektberoende.

För iOS

Ladda ner GoogleService-Info.plist-filen och lägg till den i ditt Xcode-projekt. Installera Firebase SDK via CocoaPods.

Installera beroenden

Installera nödvändiga Firebase-paket:

• ] För Reagera infödda CLI:

Kör: ]

• För Expo lyckades arbetsflödet:]

Använd Expo Firebase SDK eller ejekt för att bara fungera för inhemska moduler.

Begär behörigheter och få token

I din Reagera indirekt kod, begära tillstånd för meddelanden och hämta enhetstoken:

Exempel:

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();

Hantera inkommande meddelanden

Ställ in lyssnare för att hantera förgrundsmeddelanden och svar:

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
});

Skicka push-meddelanden

Använd Firebase Cloud Messaging API eller Firebase Console för att skicka meddelanden. Exempel på nyttolast:

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

Skicka meddelandet via Firebase Cloud Messaging REST API eller Firebase Console.

Slutsats

Integrera push-meddelanden med Firebase in React Native innebär att du ställer in Firebase, begär behörigheter, hämtar tokens och hanterar meddelanden. Korrekt implementering kan förbättra användarens engagemang och hålla din app dynamisk och interaktiv.