Senden Sie mit Firebase Cloud Messaging eine Benachrichtigung an React Native-Apps

Reagieren Sie auf Native Cloud Messaging

Dies ist unser achter Beitrag Reagieren Sie auf native Firebase Was ist als nächstes Firebase Cloud Messaging in diesem Beispiel? Arten von Nachrichten Wie sende ich eine Cloud-Nachricht? Wie bekomme ich Firebase Cloud Message in der React Native App? Beginnen wir also mit Firebase Cloud Messaging im React Native-Beispiel.

Firebase Cloud Messaging

Firebase Cloud Messaging ist eine plattformübergreifende Cloud-Lösung für Nachrichten und Benachrichtigungen für Android-, iOS- und Web-Apps, die kostenlos verfügbar ist. Mit Firebase Cloud Messaging (FCM) können Sie Client-Apps einfach über neue Updates benachrichtigen oder Angebote oder Exit-Nachrichten senden, um sie zu beschäftigen. FCM ist eine großartige Möglichkeit, Benutzer wieder einzubeziehen und zu halten. FCM kann für Instant Messaging (Chat-Anwendung) verwendet werden, da eine einzelne Nachricht bis zu 4 KB Nutzlast an die Client-Anwendung übertragen kann.

Arten von Nachrichten

Mit FCM können Sie zwei Arten von Nachrichten an Kunden senden:

  • Benachrichtigungsmeldungen, manchmal als “visuelle Botschaften” betrachtet. Diese werden automatisch vom FCM SDK gehandhabt
  • DatenmeldungenDies wird von der Client-App gehandhabt

Benachrichtigungsnachrichten enthalten einen vordefinierten Satz von Schlüsseln, die für den Benutzer sichtbar sind. Datennachrichten enthalten dagegen nur Ihre benutzerdefinierten benutzerdefinierten Schlüssel-Wert-Paare.

Benachrichtigungsnachrichten können eine optionale Datennutzlast haben, die es Ihnen ermöglicht, auch Daten in einer Benachrichtigungsnachricht zu senden. Die maximale Nutzlast für beide Nachrichtentypen beträgt 4 KB, außer beim Senden von Nachrichten über die Firebase-Konsole, die eine Beschränkung auf 1024 Zeichen erzwingt.

Weitere Informationen zum Benachrichtigungstyp finden Sie unter Über FCM-Nachrichten.

Beispielbeschreibung

In diesem Beispiel richten wir eine Firebase Cloud Messaging-Umgebung in unserer React Native-App ein und senden eine Benachrichtigung von der Firebase-Konsole. Es ist nicht praktikabel, eine Firebase-Cloud-Nachricht von der Konsole aus zu senden, daher haben wir mit dem Firebase-Admin-SDK einen Knotenserver erstellt, der uns beim Senden von Benachrichtigungen hilft. Beginnen wir mit der Einrichtung und dem Code.

So erstellen Sie eine React Native-App

Erste Schritte mit React Native hilft Ihnen dabei, mehr darüber zu erfahren, wie Sie ein React Native-Projekt erstellen. Wir werden React-Native-Init verwenden, um unsere React-Native-App zu erstellen. Vorausgesetzt, Sie haben node installiert, können Sie die Installation mit npm durchführen react-native-cli Befehlszeilenprogramm. Öffnen Sie Terminal und gehen Sie zu Workspace und führen Sie es aus

npm install -g react-native-cli

Führen Sie die folgenden Befehle aus, um ein neues React Native-Projekt zu erstellen

react-native init ProjectName

Wenn Sie ein neues Projekt mit einer bestimmten React Native-Version starten möchten, können Sie das Argument –version verwenden:

react-native init ProjectName --version X.XX.X
react-native init ProjectName --version [email protected]

Dadurch wird ein Projektframework mit einer Codedatei namens App.js in Ihrem Projektverzeichnis erstellt.

Integration von Firebase SDK

Um mit dem React Native Firebase-Beispiel zu beginnen, müssen Sie Firebase in Ihre App integrieren. Zu diesem Zweck habe ich einen separaten Beitrag erstellt, in dem Sie den Punkt-zu-Punkt-Prozess zum Hinzufügen von Firebase zu Ihrer React Native-App für Android sehen können. Beide iOS.

Besuchen Sie So integrieren Sie Firebase in eine Android- und iOS-App und kommen Sie für den nächsten Schritt zurück.

Sobald Sie mit der Firefox-Integration fertig sind, können Sie weitere Abhängigkeiten installieren.

Installation von Abhängigkeiten

Um Abhängigkeiten zu installieren, öffnen Sie ein Terminal und navigieren Sie mit zu Ihrem Projekt

cd ProjectName

Für React Native Firefox müssen wir das App-Modul installieren und konfigurieren

npm install @react-native-firebase/app --save

Installieren Sie nun das Messaging-Modul

npm install  @react-native-firebase/messaging --save

Dieser Befehl kopiert alle Abhängigkeiten in Ihr node_module-Verzeichnis. -save ist optional, dies sollte die Abhängigkeit in Ihrer Datei „package.json“ aktualisieren.

CocoaPods-Installation

Nach dem React Native 0.60-Update haben sie die automatische Verknüpfung eingeführt, sodass wir die Bibliothek nicht verknüpfen müssen, aber wir müssen Pods für iOS installieren. Verwenden Sie also Pods zum Installieren

cd ios/ && pod install --repo-update && cd ..

Code für React Native Firebase Cloud Messaging

Öffnen Sie App.js in einem beliebigen Code-Editor und ersetzen Sie den Code durch den folgenden Code

App.js

/*
 * #8 Send Notification to React Native App using
 * Firebase Cloud Messaging
 * https://aboutreact.com/react-native-notification-firebase-cloud-messaging
 */

// import React in our code
import React, {useEffect} from 'react';

// import all the components we are going to use
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  Image
} from 'react-native';

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

const TOPIC = 'MyNews';

const App = () => {
  const requestUserPermission = async () => {
    /**
     * On iOS, messaging permission must be requested by
     * the current application before messages can be
     * received or sent
     */
    const authStatus = await messaging().requestPermission();
    console.log('Authorization status(authStatus):', authStatus);
    return (
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL
    );
  };

  useEffect(() => {
    if (requestUserPermission()) {
      /**
       * Returns an FCM token for this device
       */
      messaging()
        .getToken()
        .then((fcmToken) => {
          console.log('FCM Token -> ', fcmToken);
        });
    } else console.log('Not Authorization status:', authStatus);

    /**
     * When a notification from FCM has triggered the application
     * to open from a quit state, this method will return a
     * `RemoteMessage` containing the notification data, or
     * `null` if the app was opened via another method.
     */
    messaging()
      .getInitialNotification()
      .then(async (remoteMessage) => {
        if (remoteMessage) {
          console.log(
            'getInitialNotification:' +
              'Notification caused app to open from quit state',
          );
          console.log(remoteMessage);
          alert(
            'getInitialNotification: Notification caused app to' +
            ' open from quit state',
          );
        }
      });

    /**
     * When the user presses a notification displayed via FCM,
     * this listener will be called if the app has opened from
     * a background state. See `getInitialNotification` to see
     * how to watch for when a notification opens the app from
     * a quit state.
     */
    messaging().onNotificationOpenedApp(async (remoteMessage) => {
      if (remoteMessage) {
        console.log(
          'onNotificationOpenedApp: ' +
            'Notification caused app to open from background state',
        );
        console.log(remoteMessage);
        alert(
          'onNotificationOpenedApp: Notification caused app to' +
          ' open from background state',
        );
      }
    });

    /**
     * Set a message handler function which is called when
     * the app is in the background or terminated. In Android,
     * a headless task is created, allowing you to access the
     * React Native environment to perform tasks such as updating
     * local storage, or sending a network request.
     */
    messaging().setBackgroundMessageHandler(
      async (remoteMessage) => {
        console.log(
          'Message handled in the background!',
          remoteMessage
        );
    });

    /**
     * When any FCM payload is received, the listener callback
     * is called with a `RemoteMessage`. Returns an unsubscribe
     * function to stop listening for new messages.
     */
    const unsubscribe = messaging().onMessage(
      async (remoteMessage) => {
        alert('A new FCM message arrived!');
        console.log(
          'A new FCM message arrived!',
          JSON.stringify(remoteMessage)
        );
      }
    );

    /**
     * Apps can subscribe to a topic, which allows the FCM
     * server to send targeted messages to only those devices
     * subscribed to that topic.
     */
    messaging()
      .subscribeToTopic(TOPIC)
      .then(() => {
        console.log(`Topic: ${TOPIC} Suscribed`);
      });

    return () => {
      unsubscribe;
      /**
       * Unsubscribe the device from a topic.
       */
      // messaging().unsubscribeFromTopic(TOPIC);
    };
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <Text style={styles.titleText}>
          Send Notification to React Native App
        </Text>
        <Text style={styles.textStyle}>using</Text>
        <Image
          source={require('./Image/firebase.png')}
          style={{
            width: '90%',
            height: '50%',
            resizeMode: 'contain',
            margin: 30,
          }}
        />
        <Text style={styles.titleText}>
          Firebase Cloud Messaging
        </Text>
      </View>
      <Text
        style={{
          fontSize: 16,
          textAlign: 'center',
          color: 'white',
        }}>
        www.aboutreact.com
      </Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    textAlign: 'center',
    backgroundColor: '#307ecc',
  },
  titleText: {
    fontSize: 24,
    textAlign: 'center',
    fontWeight: 'bold',
    marginVertical: 10,
    color: 'white',
  },
  textStyle: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 10,
    color: 'white',
  },
});

export default App;

Senden Sie eine Cloud-Nachricht von der Firebase-Konsole

Um eine Firebase Cloud-Nachricht von der Firebase-Konsole zu senden, öffnen Sie die Firebase-Konsole, wählen Sie Projekt und dann im linken Menü Cloud-Messaging aus.

Klicken Sie auf „Senden Sie Ihre erste Nachricht“ und Sie sehen die Eingaben/Optionen zum Erstellen der Benachrichtigung. Sie können einen Titel, Text und ein Bild für die Benachrichtigung einfügen.

Sobald Sie auf Weiter klicken, sehen Sie Optionen zur Auswahl Ihrer Zielgruppe. Sie können eine auswählen Benutzerbereich oder ein Titel. Es gibt viele Möglichkeiten, Ihr Publikum auszuwählen Benutzerbereich Option zum Senden von Nachrichten basierend auf App-Version, Sprachen, Land/Region, Benutzerzielgruppe usw.

Sie können die Nachricht jetzt senden oder für später planen

Nachrichten überprüfen und Veröffentlichen

Screenshots ausgeben

Laden Sie den Quellcode herunter

Knotenserver zum Senden von Firebase Cloud-Nachrichten

Sie können Cloud-Nachrichten von der Konsole aus senden, aber in der Praxis benötigen Sie eine Möglichkeit, Cloud-Nachrichten von Ihrem Server auszulösen. Das Firebase Admin SDK hilft Ihnen dabei. Hier ist ein kleines Projekt in Node.js, das mit dem Firebase Admin SDK erstellt wurde.

Bevor Sie dieses Projekt ausführen, müssen Sie die Datei service-account.json abrufen, um Ihren Server mit Ihrer Firebase-Instanz zu verbinden. Um die Datei service-account.json zu öffnen, klicken Sie auf das Einstellungssymbol und wählen Sie „Projekteinstellungen“. Sobald Sie die Projekteinstellungen geöffnet haben, klicken Sie auf die Registerkarte „Dienstkonten“, Sie sehen eine Option zum Generieren eines neuen privaten Schlüssels . Dieser Schlüssel ist dieselbe Datei, die wir an unsere Firebase-Instanz anhängen müssen.

Die heruntergeladene Dienstkontodatei kann einen langen Namen mit der Erweiterung json haben, Sie können sie umbenennen, wenn Sie möchten. Jetzt können Sie den Knotenserver mit den folgenden Schritten einrichten.

1. Repository klonen

git clone https://github.com/SnehalAgrawal/about-react-dummy-firebase-apis.git

2. Navigieren Sie zum Verzeichnis

cd about-react-dummy-firebase-apis

3. Installieren Sie node_module

npm install

4. Aktualisieren Sie den Dateipfad des Dienstkontos

const serviceAccount =
require("/Users/kepi/Desktop/MainRepo/service-account-file.json");

5. Starten Sie den Server

npm start

Dadurch wird Ihr Server für Sie gestartet

Sobald Ihr Server betriebsbereit ist, können Sie die folgende URL verwenden, um eine Benachrichtigung zu senden

http://localhost:3000/notify/

So senden Sie eine Firebase Cloud-Nachricht in einer React Native-App für Android und iOS. Wenn Sie Zweifel haben oder etwas über das Thema mitteilen möchten, kommentieren Sie unten oder kontaktieren Sie uns hier. Weitere Beiträge folgen in Kürze. Warte ab!

Ich hoffe, es hat euch gefallen. 🙂