So implementieren Sie Push-Benachrichtigungen in React Native (Android)

Haben Sie jemals über die Benachrichtigungen nachgedacht, die wir von den von uns installierten Apps erhalten? oder Wie bringen uns Swiggy oder Zomato mit ihren kreativen Benachrichtigungen dazu, um 3 Uhr morgens Essen zu bestellen? ?

Lassen Sie uns tief in das Konzept der Benachrichtigungen eintauchen!

Was sind Benachrichtigungen?

Eine Benachrichtigung ist eine Nachricht oder Warnung, die von einer App gesendet wird, um Benutzer über Updates, Ereignisse oder Aktionen zu informieren, die normalerweise außerhalb der Benutzeroberfläche der App übermittelt wird.

Jetzt kann es zwei Arten von Benachrichtigungen geben, wie unten gezeigt -

Push-Benachrichtigung

Push-Benachrichtigungen sind Nachrichten oder Warnungen, die von einem Server an eine App gesendet werden, wenn die App nicht aktiv im Vordergrund ausgeführt wird. Sie werden in erster Linie dazu verwendet, Benutzer durch das Versenden von Updates, Erinnerungen oder personalisierten Inhalten zu binden. Push-Benachrichtigungen werden über Betriebssystemdienste wie Apple Push Notification Service (APNs) für iOS oder Firebase Cloud Messaging (FCM) für Android übermittelt.

So funktioniert Push-Benachrichtigung:

1. Registrierung: Wenn die App installiert oder zum ersten Mal geöffnet wird, fordert die App ein eindeutiges Geräte-Token vom Push-Benachrichtigungsdienst des Betriebssystems (APNs oder FCM) an.
2. Serverkommunikation: Die App sendet dieses Token an den Backend-Server der App, der es für die zukünftige Verwendung speichert.
3. Senden von Benachrichtigungen: Der Server sendet eine Benachrichtigungsnutzlast (mit Titel, Nachricht, Aktionsschaltflächen usw.) an den Push-Benachrichtigungsdienst (APNs/FCM) mit dem Geräte-Token.
4. Zustellung: Der Push-Benachrichtigungsdienst liefert die Nachricht an das jeweilige Gerät, auch wenn die App nicht ausgeführt wird.

In-App-Benachrichtigung

In-App-Benachrichtigungen sind Nachrichten oder Warnungen, die Benutzern angezeigt werden, während sie die App aktiv nutzen. Im Gegensatz zu Push-Benachrichtigungen erfordern diese keinen Servereingriff und werden innerhalb der App selbst ausgelöst, normalerweise als Ergebnis von Benutzeraktionen oder App-Ereignissen.

So funktioniert die In-App-Benachrichtigung:

1. Ereignisauslöser: Wenn ein bestimmtes Ereignis innerhalb der App eintritt (z. B. wenn ein Benutzer einen Meilenstein erreicht oder eine Funktion Aufmerksamkeit erfordert), kann die App eine In-App-Benachrichtigung auslösen.
2. Anzeige: Die Benachrichtigung wird als Banner, modal oder Pop-up in der Benutzeroberfläche der App angezeigt und führt den Benutzer oder informiert ihn über das Ereignis.
3. Benutzerdefinierte Logik: In-App-Benachrichtigungen werden direkt vom Code der App verarbeitet und können dynamisch basierend auf dem internen Status oder der Logik der App angezeigt werden.

Implementierung in der React Native Android-App:

Da wir nun über Benachrichtigungen und deren Typen Bescheid wissen, ist es an der Zeit, die Funktion in Ihrer eigenen nativen React-App zu implementieren. Diese Anleitung dient nur zur Implementierung von Push-Benachrichtigungen in der nativen Android-App React. Wenn Sie iOS- oder In-App-Benachrichtigungen wünschen, schreiben Sie einen Kommentar und ich werde ihn auf jeden Fall veröffentlichen!

Zu Beginn nutzen wir einen Drittanbieterdienst namens OneSignal. Ich bin kürzlich auf diese Plattform gestoßen und war von den angebotenen Dienstleistungen schockiert.

Über OneSignal:

OneSignal ist ein Push-Benachrichtigungsdienst, der es App-Entwicklern ermöglicht, gezielte Benachrichtigungen an Benutzer auf verschiedenen Plattformen zu senden, einschließlich mobiler Apps, Websites und E-Mail. Es unterstützt Push-, In-App- und Web-Benachrichtigungen und bietet Funktionen wie Segmentierung, Automatisierung, A/B-Tests und Echtzeitanalysen. OneSignal wird häufig zur Verbesserung der Benutzereinbindung und -bindung eingesetzt, indem es eine einfach zu integrierende Lösung zum Senden personalisierter Nachrichten bietet. Ihr kostenloses Kontingent besteht aus 10.000 kostenlosen E-Mail-Versendungen pro Monat, unbegrenzten mobilen Push-Versendungen, Journeys-Workflows, DSGVO-Konformität und A/B-Tests

Zurück zum Leitfaden: Da wir bereits wissen, dass Push-Benachrichtigungen eine serverseitige Verarbeitung über FCM (Firebase Cloud Messaging) erfordern, müssen einige Schritte befolgt werden:

1. Firebase-Projekt einrichten (ignorieren Sie die ersten beiden Schritte, wenn Sie bereits ein Firebase-Projekt haben):

   • Gehen Sie zur Firebase-Konsole und melden Sie sich bei Ihrem Konto an.
   • Erstellen Sie hier ein Projekt und befolgen Sie die Schritte
   • Sobald Ihr Projekt erstellt ist, gehen Sie in der Seitenleiste zu den Projekteinstellungen
   • Navigieren Sie in der Leiste zu Dienstkonten und es sollte so aussehen
   • Klicken Sie auf Neuen privaten Schlüssel generieren. Dadurch wird eine JSON-Datei heruntergeladen. Bewahren Sie sie sorgfältig an einem sicheren Ort auf. Wir werden sie beim Einrichten von OneSignal benötigen.

2. OneSignal einrichten

   • Gehen Sie zu OneSignal und erstellen Sie ein Konto.
   • Nachdem Sie ein Konto erstellt haben, gehen Sie die Einrichtungsschritte durch und erstellen Sie eine Organisation. Nun wird eine Seite zum Hinzufügen von Apps angezeigt.
   • Geben Sie auf dieser Seite den Namen Ihrer App ein und wählen Sie Google Android (FCM) für unseren Fall aus. und klicken Sie auf Konfigurieren Sie Ihre Plattform
   • Jetzt werden Sie zu dieser Seite weitergeleitet, auf der wir die JSON-Datei des Dienstkontos verwenden, die während der Firebase-Konfiguration heruntergeladen wurde Laden Sie den JSON hoch und klicken Sie dann auf Speichern und fortfahren
   • Wählen Sie auf der nächsten Seite React Native/Expo als Ziel-SDK und dann erneut Speichern und fortfahren
   • Auf dem nächsten Bildschirm erhalten Sie Ihre App-ID. Dies ist eine vertrauliche ID und mit dieser ID kann jeder eine Benachrichtigung in Ihrer App auslösen, seien Sie also vorsichtig mit diesem Geheimnis.

Wir sind mit der Einrichtung in Firebase und OneSignal fertig, jetzt bleibt nur noch etwas Kaffee mit Code

Fügen Sie OneSignal zu Ihrer App hinzu und konfigurieren Sie es

• Schritt 1: Fügen Sie OneSignal zu Ihrer App hinzu, indem Sie zuerst diesen Befehl ausführen

                       npm i react-native-onesignal

• Schritt 2: Importieren Sie OneSignal in Ihre index.js oder App.tsx oder App.js, je nachdem, was das Stammverzeichnis Ihres Projekts ist

             import { OneSignal } from 'react-native-onesignal';

und Sie haben dieses Code-Snippet hinzugefügt, um OneSignal zu initialisieren

                    OneSignal.initialize('YOUR_APP_ID');

Sie können dies in einen useEffect-Hook einbinden, um eine nahtlose Integration und Konnektivität mit OneSignal zu gewährleisten.

Dadurch wird das Gerät mit einer eindeutigen ID für OneSignal initialisiert und Sie können dies in den Abonnements in der Seitenleiste überprüfen. Jedes initialisierte Gerät wird mit dieser eindeutigen OneSignal-ID identifiziert und Sie können sie manuell festlegen, auch wenn Sie bereits Benutzer mit eigenen eindeutigen IDs haben, indem Sie dieses Code-Snippet verwenden:

                         OneSignal.login(userId)

Sobald der Benutzer erfolgreich abonniert wurde, wird es im Dashboard wie folgt angezeigt

Jetzt stoßen Sie möglicherweise auf einige Probleme, wenn OneSignal nicht ordnungsgemäß verwendet wird, oder auf einige kritische Fehler. Hier ist ein Teil, dem Sie folgen können, der mir bei der Lösung dieser Probleme geholfen hat.

• Schritt 3: Fügen Sie in Ihrem androidappbuild.gradle dieses Code-Snippet hinzu

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

• Schritt 4: In Android, um die erforderlichen Berechtigungen für Push-Benachrichtigungen bereitzustellen, in androidappsrcmainAndroidManifest.xml hinzufügen

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

direkt vor dem Anwendungs-Tag. Die INTERNET-Berechtigung ist jedoch optional, da sie möglicherweise standardmäßig aktiviert ist.

Boom? Alle Schritte zur Implementierung von Push-Benachrichtigungen werden abgedeckt, und Sie können eine Testbenachrichtigung über das OneSignal-Dashboard selbst senden.

Probieren Sie es selbst aus und wenn Sie Zweifel haben, können Sie unten einen Kommentar abgeben. Folgen Sie für detailliertere Anleitungen!

Referenzen:
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

Viel Spaß beim Codieren!?‍?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Push-Benachrichtigungen in React Native (Android). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!