Wie man Push-Benachrichtigungen in einer React Native-App mit Sendbird Chat implementiert
Einführung: Was sind Push-Benachrichtigungen und warum sind sie wichtig?
Eine Push-Benachrichtigung ist eine automatisierte, anklickbare Popup-Nachricht, die von einer Anwendung an ihre Benutzer gesendet wird. Die Nachricht wird sofort an ein Gerät übermittelt, wenn das Gerät inaktiv ist oder die App im Hintergrund ausgeführt wird. Push-Benachrichtigungen sind wichtig, weil sie:
- Stellen Sie wichtige Informationen, Erinnerungen und Neuigkeiten im Zusammenhang mit der Aktivität oder den Interessen des Benutzers bereit
- Steigern Sie Interaktion mobiler Apps Kennzahlen
- Präsentieren Sie ausgewählte Inhalte
- Fördern Sie gezielten, relevanten Traffic, der die Konversionsraten erhöht
- Schaffen Sie ein nahtloses Benutzererlebnis mit personalisierten, zeitlich gut abgestimmten und relevanten Inhalten
In unserem Leitfaden zu mobilen Push-Benachrichtigungen finden Sie alles, was Sie über Push-Benachrichtigungen, ihre Vorteile und deren Verwendung wissen müssen.< /span>
Es ist erwähnenswert, dass der durchschnittliche Smartphone-Benutzer in den USA 45 Push-Benachrichtigungen pro Tag erhält! Laut RubyGarage haben Unternehmen, die Push-Benachrichtigungen implementieren, eine dreimal höhere Kundenbindung und ein um 88 % höheres Engagement als Unternehmen, die dies nicht tun. Zwar gibt es Variationen bei der Aktivierung von Push-Benachrichtigungen und den Klickraten je nach Branche, Standort, Typ und viele andere Faktoren machen deutlich, dass die Implementierung von Push-Benachrichtigungen stark spricht.
Dieses Tutorial bietet Schritt-für-Schritt-Anleitungen zur Implementierung von React Native-Push-Benachrichtigungen. Aber werfen wir zunächst einen Blick auf einige Voraussetzungen.
Voraussetzungen
- Erstellen Sie ein Sendbird-Konto.
- Stellen Sie sicher, dass Sendbird Chat in Ihrer React Native-App gut funktioniert.
Denken Sie daran, dass, wenn eine Nachricht von einer App an den Sendbird-Server gesendet wird (über das Chat SDK für JavaScript), der Server mit kommuniziert FCM. FCM übermittelt dann eine Push-Benachrichtigung an das Android-Gerät oder kommuniziert mit APNs, um die Push-Benachrichtigung an das iOS-Gerät zu übermitteln.
Push-Benachrichtigungen für React Native-Anwendungen
Push-Benachrichtigungen können mit dem Sendbird Chat SDK für JavaScript an Benutzer hybrider mobiler Anwendungen (Android und iOS) gesendet werden. Derzeit ist die Push-Benachrichtigungsfunktion des JavaScript SDK nur mit React Native kompatibel. Dieses Tutorial enthält Details zum Aktivieren von Push-Benachrichtigungen in einer React Native-App mithilfe von Firebase Cloud Messaging (FCM) und dem Sendbird Chat SDK.
Bevor wir uns mit den Implementierungsdetails befassen, sprechen wir über FCM-Nachrichten. Es gibt zwei Arten von FCM-Nachrichten: Benachrichtigungsnachrichten und Datennachrichten. Laut der Firebase-Dokumentation „haben Benachrichtigungsnachrichten einen vordefinierten Satz von für den Benutzer sichtbaren Schlüsseln und eine optionale Datennutzlast aus benutzerdefinierten Schlüssel-Wert-Paaren.“ Datennachrichten enthalten nur benutzerdefinierte Schlüssel-Wert-Paare. Sendbird verwendet Datennachrichten und ermöglicht es Client-Apps, die benutzerdefinierte Nachrichtennutzlast zu erstellen, die aus diesen benutzerdefinierten Schlüssel-Wert-Paaren besteht.
Push-Benachrichtigungen werden für Webanwendungen nicht unterstützt. Wenn Sie Push-Benachrichtigungen für Web-Apps implementieren müssen, empfehlen wir die Verwendung der Webhook-Ereignisse, um Push-Benachrichtigungen für Web-Anwendungen zu implementieren.
Bevor Sie beginnen, stellen Sie sicher, dass Sie Zugriff auf die Firebase-Konsole haben. Lass uns eintauchen! 💻
Schritt 1: Registrieren Sie FCM-Anmeldeinformationen und APNs-Zertifikat im Sendbird-Dashboard
Der Sendbird-Server benötigt einen FCM-Serverschlüssel für Android und ein APNs-Zertifikat für iOS, um die Push-Benachrichtigungen zuzustellen.
Befolgen Sie die Schritte 1 und 2 dieses Tutorials, um die FCM-Anmeldeinformationen zu registrieren, und befolgen Sie die Anweisungen im docs, um das APNs-Zertifikat im Sendbird-Dashboard zu registrieren.
Schritt 2: Installieren Sie das React Native Firebase-Modul und fügen Sie die Konfigurationsdateien hinzu
React Native Firebase ist die offiziell empfohlene Paketsammlung, die React Native-Unterstützung für alle Firebase-Dienste auf Android- und iOS-Apps bietet. Konfigurieren Sie FCM für Android und APNs für iOS in Ihrem React Native-Projekt, indem Sie den Anweisungen in der offiziellen Dokumentation folgen. Am Ende dieses Schritts sollten Sie Android- und iOS-Apps zum Firebase-Projekt und entsprechende Konfigurationsdateien zum React Native-Projekt hinzugefügt haben.
Weitere Informationen zum Anzeigen und Bearbeiten von Benachrichtigungen von FCM finden Sie auf der Seite React Native Firebase Benachrichtigungen.
Schritt 3: Registrieren Sie ein Push-Token auf dem Sendbird-Server
Um Benachrichtigungen an eine bestimmte Client-App zu senden, benötigt FCM ein FCM-Registrierungstoken für Android-Geräte und ein APNs-Gerätetoken für iOS-Geräte, ausgestellt von der Client-App-Instanz. Daher benötigt der Sendbird-Server auch das Registrierungstoken jeder Client-App-Instanz, um in Ihrem Namen Benachrichtigungsanfragen an FCM zu senden. Das Chat SDK bietet eine Schnittstelle zum Registrieren und Aufheben der Registrierung dieser beiden Tokentypen beim Sendbird-Server.
Der folgende Codeausschnitt zeigt die Geräte-Token-Registrierung.
Der registrierte Push-Token wird im Dashboard unter „Benutzer >“ angezeigt. user_id > Plaudern':
Schritt 4: Push-Benachrichtigungsnachrichten empfangen
Sobald das Geräte-Token registriert wurde, kann die Client-App-Instanz die FCM-Benachrichtigungsnachrichten unabhängig von der iOS- oder Android-Plattform empfangen und verarbeiten. Weitere Informationen zur Implementierung finden Sie auf der Seite Nutzung der React Native Firebase-Dokumentation.
Das Sendbird Chat SDK für JavaScript erkennt den Status Ihrer Anwendung nicht automatisch, daher sind setForegroundState() und Die vom Sendbird SDK bereitgestellten setBackgroundState()-Methoden müssen explizit aufgerufen werden.
Sehen Sie sich die React Native Firebase-Dokumentation an, um die verfügbaren Ereignishandler zum Empfangen von Nachrichten zu verstehen. Der folgende Codeausschnitt zeigt die Analyse empfangener FCM-Nachrichten.
Hinweis: Kanäle sind ein reines Android-Konzept, mit dem Benutzer kategorisieren und steuern können, wie Benachrichtigungen auf ihren Geräten gehandhabt werden.
Das aus einer FCM-Datennachricht analysierte Datenobjekt enthält eine Reihe von Schlüsselwertelementen, wie im folgenden JSON-Code gezeigt.
Tipps zur Fehlersuche bei Push-Benachrichtigungen
Die Fehlerbehebung bei Push-Benachrichtigungen kann komplex sein. Hier finden Sie einige Tipps dazu.
- Um Entwicklern das Debuggen und Beheben von Push-Benachrichtigungen zu erleichtern, haben wir ein Tester-Tool entwickelt, das für Sie nützlich sein könnte. Bitte sehen Sie sich dieses Tutorial an, um zu verstehen, wie Sie das Tool verwenden, auf das Sie über das Sendbird-Dashboard.
- Sehen Sie sich diesen umfassenden Leitfaden zur Fehlerbehebung bei Android-Chat-Push-Benachrichtigungen an.
- Wenn Sie Fehlerbedingungen debuggen möchten, sehen Sie sich bitte die FCM-Fehlercodes an.
Schlussfolgerung
Und das ist Schluss! Sie wissen jetzt, wie Sie mit Sendbird Chat Push-Benachrichtigungen für React Native-Apps senden. Mit der Anleitung in diesem Tutorial und den Dokumenten sind Sie im Handumdrehen auf dem Weg, zeitnahe, relevante und ansprechende Push-Benachrichtigungen zu versenden!
Wir sind immer für Sie da; Kontaktieren Sie uns, wenn Sie Fragen, Kommentare oder Bedenken haben.
Viel Spaß beim Erstellen von Push-Benachrichtigungen! 💻