Pushmeldingen uitvoeren in react Inheemse gebruik van Firebase

Het implementeren van pushmeldingen in een React Native-app kan de betrokkenheid van de gebruiker aanzienlijk verbeteren door tijdige updates en waarschuwingen te verstrekken. Firebase Cloud Messaging (FCM) biedt een betrouwbare en eenvoudig te integreren oplossing voor het beheren van pushmeldingen over platforms. Deze gids begeleidt u door de stappen om pushmeldingen in React Native te implementeren met behulp van Firebase.

Vereisten

• Een React Native project opgezet met Expo of React Native CLI
• Een Firebase project gemaakt in de Firebase Console
• Basiskennis van JavaScript en React Native
• Firebase SDK geïnstalleerd in uw project

Opzetten van de brandbasis

Maak eerst een Firebase project en voeg je app toe aan het project. Download de configuratiebestanden:

Voor Android

Download het Google-services.json bestand en plaats het in de android/app directory van uw project. Zorg ervoor dat u de Firebase SDK aan uw projectafhankelijkheden toevoegt.

Voor iOS

Download het GoogleService-Info.plist bestand en voeg het toe aan uw Xcode project. Installeer de Firebase SDK via CocoaPods.

Afhankelijkheden installeren

Installeer de nodige Firebase pakketten:

• Voor react-inheemse CLI:

Uitvoeren:

• Voor door Expo beheerde workflow:

Gebruik de Expo Firebase SDK of uitwerpen om workflow voor native modules bloot te stellen.

Verzoek om toestemming en om Token te krijgen

In uw React Native code, vraag toestemming voor meldingen en het apparaat token op:

Voorbeeld:

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

Behandeling van binnenkomende meldingen

Stel luisteraars in om voorgrondmeldingen en -antwoorden af te handelen:

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

Pushmeldingen versturen

Gebruik Firebase Cloud Messaging API of Firebase Console om meldingen te versturen. Voorbeeld payload:

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

Stuur het bericht via Firebase Cloud Messaging REST API of Firebase Console.

Conclusie

Het integreren van pushmeldingen met Firebase in React Native houdt in dat Firebase wordt opgezet, toestemmingen wordt aangevraagd, apparaat tokens worden opgehaald en berichten worden behandeld. Een correcte implementatie kan de betrokkenheid van de gebruiker verbeteren en uw app dynamisch en interactief houden.