Σημείωση: Δεν υπάρχει διαθέσιμη παλιά τεκμηρίωση για αυτό το στοιχείο, επομένως βλέπετε την τρέχουσα τεκμηρίωση.
Το SDK React Native της PushEngage απλοποιεί την ενσωμάτωση ειδοποιήσεων push στις εφαρμογές σας React Native, προσφέροντας απρόσκοπτη υποστήριξη για Android και iOS. Προσφέρουμε τρία frameworks για την υλοποίηση ειδοποιήσεων push εφαρμογών: React, Native και Flutter. Μπορείτε να βρείτε οδηγούς για ειδοποιήσεις push εφαρμογών Native Android, iOS και Flutter για περαιτέρω βοήθεια.
Σε αυτόν τον οδηγό, θα σας καθοδηγήσουμε στη ρύθμιση του SDK React Native της PushEngage για την ενεργοποίηση ειδοποιήσεων push τόσο σε Android όσο και σε iOS.
Πριν Ξεκινήσετε
Ακολουθεί μια λίστα με τα πράγματα που θα χρειαστείτε
- Ένα έργο React Native & υποστήριξη turbo module. Αν δεν έχετε λογαριασμό, μπορείτε να εγγραφείτε εδώ.
- Λογαριασμός Firebase με ρύθμιση Firebase Cloud Messaging (FCM) για Android.
- Λογαριασμός προγραμματιστή Apple για τη διαμόρφωση υπηρεσιών Apple Push Notification (APN) για iOS.
Εγκατάσταση του SDK React Native της PushEngage
Μπορείτε να εγκαταστήσετε το SDK React Native της PushEngage χρησιμοποιώντας είτε npm είτε yarn
npm install @pushengage/pushengage-react-nativeΓια React Native 0.77.0 ή παλαιότερο
Αν χρησιμοποιείτε την έκδοση React Native 0.77.0 ή παλαιότερη, χρησιμοποιήστε την έκδοση 0.0.1 του SDK όπως φαίνεται παρακάτω:
npm install @pushengage/[email protected]Ρύθμιση Android
Ρύθμιση Firebase Cloud Messaging (FCM)
Για να ενεργοποιήσετε τις ειδοποιήσεις push για Android, θα χρειαστεί να διαμορφώσετε το Firebase Cloud Messaging (FCM)
1. Πρόσβαση στην κονσόλα Firebase χρησιμοποιώντας τον λογαριασμό σας Google.
2. Κάντε κλικ στο “Προσθήκη Έργου” για να δημιουργήσετε ένα νέο έργο, ή επιλέξτε ένα υπάρχον έργο από τη λίστα σας. Αν χρησιμοποιείτε ένα υπάρχον έργο, προχωρήστε απευθείας στο βήμα 4.
3. Εισαγάγετε ένα όνομα για το έργο σας και κάντε κλικ στο Συνέχεια. Ολοκληρώστε τη διαδικασία ρύθμισης κάνοντας κλικ στο “Δημιουργία έργου” στην τελική οθόνη.
4. Στον πίνακα ελέγχου του Firebase έργου σας, κάντε κλικ στο εικονίδιο Android για να προσθέσετε μια εφαρμογή Android.
5. Εισαγάγετε το όνομα πακέτου της εφαρμογής σας Android (βρίσκεται στο android/app/build.gradle κάτω από το μπλοκ android) και δώστε ένα όνομα εφαρμογής. Κάντε κλικ στο Εγγραφή όταν τελειώσετε.
6. Κατεβάστε το αρχείο google-services.json και τοποθετήστε το στη ρίζα της ενότητας εφαρμογής σας Android στο android/app/.
7. Δημιουργία Αρχείου JSON Λογαριασμού Υπηρεσίας
- Στην κονσόλα Firebase, κάντε κλικ στο εικονίδιο Ρυθμίσεις δίπλα στο “Επισκόπηση Έργου” στην επάνω αριστερή γωνία, και στη συνέχεια επιλέξτε Ρυθμίσεις Έργου.
- Μεταβείτε στην καρτέλα Λογαριασμοί Υπηρεσιών.
- Κάντε κλικ στο Δημιουργία νέου ιδιωτικού κλειδιού, και λήψη του αρχείου .json.
- Κρατήστε αυτό το αρχείο ασφαλές καθώς θα το χρειαστείτε για τη ρύθμιση του πίνακα ελέγχου PushEngage.
8. Λήψη Αναγνωριστικού Αποστολέα
- Στην κονσόλα Firebase, κάντε κλικ στο εικονίδιο Ρυθμίσεις δίπλα στο Επισκόπηση Έργου στην επάνω αριστερή γωνία και επιλέξτε “Ρυθμίσεις Έργου.”
- Επιλέξτε την καρτέλα Cloud Messaging, Εδώ, θα βρείτε το Sender ID, το οποίο χρειάζεται για την αρχικοποίηση του PushEngage SDK.
Ενσωμάτωση FCM με το PushEngage
Για να ενσωματώσετε απρόσκοπτα τις λεπτομέρειες FCM με τον Πίνακα Ελέγχου PushEngage, μπορείτε να ακολουθήσετε τα παρακάτω βήματα.
1. Πρόσβαση στον λογαριασμό σας PushEngage κάνοντας σύνδεση
2. Στην αριστερή πλοήγηση, μεταβείτε στις Ρυθμίσεις » Εγκατάσταση. Επιλέξτε Android SDK
3. Από τη λίστα των διαθέσιμων πλατφορμών, επιλέξτε την επιλογή Android SDK για να διαμορφώσετε τις ειδοποιήσεις push για Android.
4. Διαμόρφωση Ρυθμίσεων FCM – Εισαγάγετε το Αναγνωριστικό Αποστολέα Firebase (που λάβατε από το Firebase Console). Ανεβάστε το αρχείο JSON Λογαριασμού Υπηρεσίας (που κατεβάσατε από το Firebase). Κάντε κλικ στο κουμπί Ενημέρωση για να αποθηκεύσετε αυτές τις ρυθμίσεις.
5. Αφού διαμορφώσετε τις ρυθμίσεις FCM, θα σας δοθεί ένα Αναγνωριστικό Εφαρμογής. Αντιγράψτε αυτό το Αναγνωριστικό Εφαρμογής, καθώς απαιτείται για την αρχικοποίηση του SDK PushEngage Android στην εφαρμογή σας Flutter.
Ρύθμιση iOS
Μπορείτε να ακολουθήσετε τα βήματα αφού ανοίξετε το your_project_name » iOS » your_project_name.xcworkspace.
Βήμα 1: Ενεργοποίηση Απομακρυσμένων Ειδοποιήσεων
1. Ανοίξτε το έργο σας Xcode και επιλέξτε το ριζικό έργο στον Πλοηγό του Έργου.
2. Επιλέξτε τον κύριο στόχο της εφαρμογής σας.
3. Μεταβείτε στις "Υπογραφές & Δυνατότητες".
4. Βεβαιωθείτε ότι η δυνατότητα Background Modes έχει προστεθεί. Αν όχι, προσθέστε την κάνοντας κλικ στο κουμπί "+ Δυνατότητα".
5. Ομοίως, βεβαιωθείτε ότι η δυνατότητα Push Notifications έχει προστεθεί. Αν όχι, προσθέστε την χρησιμοποιώντας το κουμπί "+ Δυνατότητα".
Εάν η δυνατότητα "Push Notifications" δεν είναι ορατή στο Xcode:
1. Μεταβείτε στον λογαριασμό σας στην Apple Developer.
2. Μεταβείτε στις "Πιστοποιητικά, Αναγνωριστικά & Προφίλ".
3. Επιλέξτε το αναγνωριστικό της εφαρμογής σας.
4. Επεξεργαστείτε τη διαμόρφωση του App ID σας και βεβαιωθείτε ότι οι Ειδοποιήσεις Push είναι ενεργοποιημένες.
5. Επιστρέψτε στο Xcode και προσπαθήστε να προσθέσετε ξανά τη δυνατότητα Ειδοποιήσεις Push.
Βήμα 2: Ενεργοποίηση Λειτουργιών Παρασκηνίου
1. Στο έργο σας Xcode, μεταβείτε στις "Υπογραφές & Δυνατότητες".
2. Στην ενότητα "Λειτουργίες Παρασκηνίου", ενεργοποιήστε τόσο τις "Απομακρυσμένες ειδοποιήσεις" όσο και την "Λήψη στο παρασκήνιο.".
Αυτό το βήμα διασφαλίζει ότι η εφαρμογή σας μπορεί να χειριστεί απομακρυσμένες ειδοποιήσεις και λήψεις παρασκηνίου αποτελεσματικά.
Δημιουργία πιστοποιητικού APNs για iOS
Μπορείτε να ανατρέξετε στον οδηγό εδώ για να δημιουργήσετε ένα πιστοποιητικό APNs για iOS, εάν δεν έχετε ήδη.
Προσθήκη επέκτασης Notification Service και επέκτασης Notification Content
Αυτό ισχύει μόνο για συσκευές iOS.
Δημιουργία Επέκτασης Notification Service
Η Επέκταση Notification Service βελτιώνει την ικανότητα της εφαρμογής σας iOS να λαμβάνει ειδοποιήσεις. Αυτή χρησιμοποιείται για την τροποποίηση του περιεχομένου της ειδοποίησης ή για τη λήψη/επεξεργασία οποιωνδήποτε δεδομένων κατά τη λήψη της ειδοποίησης. Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε μια Επέκταση Notification Service:
1. Ανοίξτε το Xcode και μεταβείτε στο έργο σας.
2. Επιλέξτε Αρχείο » Νέο » Στόχος από το μενού.
3. Στο παράθυρο επιλογής προτύπου, επιλέξτε Notification Service Extension και κάντε κλικ στο Επόμενο.
4. Δώστε ένα όνομα για την επέκτασή σας, για παράδειγμα, PushEngageNotificationServiceExtension, και κάντε κλικ στο Τέλος.
Μόλις ολοκληρώσετε τη δημιουργία της Επέκτασης Υπηρεσίας Ειδοποιήσεων, ενδέχεται να σας ζητηθεί να την ενεργοποιήσετε. Μην την ενεργοποιήσετε αμέσως.
Η ενεργοποίηση της επέκτασης θα μετατοπίσει την εστίαση αποσφαλμάτωσης του Xcode από την εφαρμογή σας στην επέκταση. Εάν την ενεργοποιήσετε κατά λάθος, μην ανησυχείτε. μπορείτε να επιστρέψετε στην αποσφαλμάτωση της εφαρμογής σας εντός του Xcode.
5. Στον περιηγητή έργου, επιλέξτε τον κατάλογο έργου κορυφαίου επιπέδου και επιλέξτε τον στόχο NotificationServiceExtension στο έργο από τη λίστα στόχων που δημιουργήθηκε στο βήμα 4.
6. Ορίστε το Deployment Target σε iOS 10 ή νεότερη έκδοση, που είναι η έκδοση του iOS στην οποία η Apple κυκλοφόρησε την υποστήριξη για αυτήν την επέκταση.
Αρχικοποίηση του SDK PushEngage για την Επέκταση Υπηρεσίας Ειδοποιήσεων
Για να διασφαλίσετε τη σωστή λειτουργία του PushEngage SDK στην επέκταση Notification Service του iOS, ακολουθήστε αυτά τα βήματα:
1. Ανοίξτε το your_project_name » ios » Podfile.
2. Προσθέστε τα ακόλουθα στο μπλοκ post_install του κύριου στόχου της εφαρμογής
post_install do |installer|
# https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
react_native_post_install(
installer,
config[:reactNativePath],
:mac_catalyst_enabled => false,
# :ccache_enabled => true
)
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'
end
end
end
3. Προσθέστε στο κάτω μέρος του αρχείου
target 'Your_Notification_Service_Extension_Name' do
pod 'PushEngage', '~>0.0.5'
end
4. Εγκαταστήστε την εξάρτηση
pod repo update
pod install
5. Στον στόχο της Επέκτασης Υπηρεσίας Ειδοποιήσεων, βεβαιωθείτε ότι εισάγετε το πλαίσιο PushEngage και προσθέστε τον απαραίτητο κώδικα αρχικοποίησης.
Swift
import UserNotifications
import PushEngage
@available(iOSApplicationExtension 10.0, *)
class PushEngageNotificationServiceExtension: UNNotificationServiceExtension {
var contentHandler: ((UNNotificationContent) -> Void)?
var bestAttemptContent: UNMutableNotificationContent?
var request : UNNotificationRequest?
override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
self.request = request
self.contentHandler = contentHandler
self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
if let bestContent = bestAttemptContent {
PushEngage.didReceiveNotificationExtensionRequest(request, bestContentHandler: bestContent)
contentHandler(bestContent)
}
}
override func serviceExtensionTimeWillExpire() {
// Called just before the extension will be terminated by the system.
// Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
if let contentHandler = contentHandler, let request = request ,let bestAttemptContent = bestAttemptContent {
guard let content = PushEngage.serviceExtensionTimeWillExpire(request, content: bestAttemptContent) else {
contentHandler(bestAttemptContent)
return
}
contentHandler(content)
}
}
}
Δημιουργία Επέκτασης Περιεχομένου Ειδοποίησης
Για να βελτιώσετε τον τρόπο με τον οποίο προσθέτετε προσαρμοσμένο UI, θα χρειαστεί να δημιουργήσετε μια Επέκταση Περιεχομένου Ειδοποίησης. Ακολουθήστε τα παρακάτω βήματα για να ρυθμίσετε την επέκταση:
1. Στο Xcode, μεταβείτε στις Αρχείο » Νέο » Στόχος.
2. Επιλέξτε Notification Content Extension και κάντε κλικ στο Επόμενο.
3. Μην επιλέξετε “Ενεργοποίηση” στο παράθυρο διαλόγου που εμφανίζεται μετά το κλικ στο Τέλος. Η ακύρωση διατηρεί την αποσφαλμάτωση της εφαρμογής σας από το Xcode αντί για την επέκταση. Αν την ενεργοποιήσετε κατά λάθος, επιστρέψτε στην αποσφαλμάτωση της εφαρμογής σας εντός του Xcode (δίπλα στο κουμπί εκτέλεσης).
4. Στον περιηγητή έργου, επιλέξτε τον κατάλογο έργου κορυφαίου επιπέδου και επιλέξτε τον στόχο NotificationContentExtension στο έργο από τη λίστα στόχων που δημιουργήθηκε στο βήμα αρ. 2.
5. Ορίστε το Στόχο Ανάπτυξης σε iOS 10 ή νεότερη έκδοση, η οποία είναι η έκδοση του iOS στην οποία η Apple κυκλοφόρησε την υποστήριξη για αυτήν την επέκταση.
Αρχικοποίηση του SDK PushEngage για την Επέκταση Περιεχομένου Ειδοποίησης
Για να διασφαλίσετε τη σωστή λειτουργία του SDK PushEngage στην Επέκταση Περιεχομένου Ειδοποίησης του iOS, ακολουθήστε αυτά τα βήματα:
1. Ανοίξτε το your_project_name » iOS » Podfile.
2. Προσθέστε τα ακόλουθα στο κάτω μέρος του Podfile σας:
target 'Your_Notification_Content_Extension_Name' do
pod 'PushEngage', '0.0.5'
end
3. Εγκαταστήστε την εξάρτηση:
cd στον κατάλογο ios του έργου σας και εκτελέστε την παρακάτω εντολή
pod repo update
pod install
4. Στον στόχο του Notification Content Extension, βεβαιωθείτε ότι εισάγετε το πλαίσιο PushEngage και προσθέστε τον απαραίτητο κώδικα αρχικοποίησης. Δείτε πώς μπορείτε να το κάνετε με μερικά παραδείγματα στοιχείων UI:
Swift
import UIKit
import UserNotifications
import UserNotificationsUI
import PushEngage
@available(iOSApplicationExtension 10.0, *)
class NotificationViewController: UIViewController, UNNotificationContentExtension {
fileprivate var hostingView: UIHostingController<ContentView>?
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .white
}
func didReceive(_ notification: UNNotification) {
if(notification.request.content.categoryIdentifier == "your_identifier"){
let payLoad = PushEngage.getCustomUIPayLoad(for: notification.request)
//pass the payload to your custom View
let view = CustomView(payLoadInfo: payLoad)
hostingView = UIHostingController(rootView: view)
If let customView = self.hostingView {
addChild(hostingView!)
}
}
}
}
Προσθήκη Ομάδων Εφαρμογών
Οι Ομάδες Εφαρμογών είναι απαραίτητες για την επικοινωνία μεταξύ της κύριας εφαρμογής, της επέκτασης υπηρεσίας ειδοποιήσεων και της επέκτασης περιεχομένου ειδοποιήσεων. Ακολουθήστε αυτά τα βήματα για να προσθέσετε Ομάδες Εφαρμογών στο έργο σας iOS:
Εάν έχετε μια υπάρχουσα ομάδα εφαρμογών και επιθυμείτε να χρησιμοποιήσετε την ίδια, μπορείτε να παραλείψετε στο βήμα αρ. 4.
1. Στο έργο σας Xcode, στον περιηγητή έργου, επιλέξτε τον κατάλογο έργου κορυφαίου επιπέδου και επιλέξτε τον κύριο στόχο της εφαρμογής.
2. Μεταβείτε στην καρτέλα Υπογραφές & Δυνατότητες.
3. Κάντε κλικ στο κουμπί “+ Δυνατότητα” και επιλέξτε Ομάδες Εφαρμογών από τη λίστα.
4. Κάντε κλικ στο κουμπί + για να προσθέσετε μια Ομάδα Εφαρμογών.
5. Προσθέστε ένα μοναδικό όνομα στην Ομάδα Εφαρμογών σας και κάντε κλικ στο OK.
6. Στην κύρια περιοχή επεξεργασίας, επιλέξτε τον κύριο στόχο της εφαρμογής σας. Εάν έχετε δημιουργήσει μια ομάδα εφαρμογών, παρακαλώ δώστε το όνομα της ομάδας στο Info.plist της εφαρμογής σας με το κλειδί PushEngage_App_Group_Key.
7. Προσθέστε το ίδιο κλειδί και τιμή στο αρχείο Info.plist της Επέκτασης Υπηρεσίας Ειδοποιήσεων.
8. Βεβαιωθείτε ότι έχετε επιλέξει την ίδια ομάδα εφαρμογών τόσο στον Κύριο Στόχο Εφαρμογής όσο και στην Επέκταση Υπηρεσίας Ειδοποιήσεων.
Αρχικοποίηση SDK PushEngage
Στο index.js σας, αρχικοποιήστε το SDK PushEngage.
import PushEngage from 'pushengage-react-native';
PushEngage.setAppId('your-app-id');
Στο AppDelegate.mm της εφαρμογής iOS
@import PushEngage;
@implementation AppDelegate
- (instancetype)init
{
self = [super init];
if (self) {
[PushEngage swizzleInjectionWithIsEnabled: YES];
}
return self;
}
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.moduleName = @"PushengageReactNativeExample";
// You can add your custom initial props in the dictionary below.
// They will be passed down to the ViewController used by React Native.
self.initialProps = @{};
[PushEngage setInitialInfoFor:application with:launchOptions];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
completionHandler(UIBackgroundFetchResultNewData);
}
Χειρισμός deepLink
Ακούστε για συμβάντα deep link και χειριστείτε τα στην εφαρμογή σας
const listenerSubscription = React.useRef<null | EventSubscription>(null);
React.useEffect(() => {
listenerSubscription.current = PushEngage.onValueChanged((data) => {
Alert.alert(`Deeplink: ${data.deepLink}`);
console.log('Data:', data.data);
});
return () => {
listenerSubscription.current?.remove();
listenerSubscription.current = null;
};
}, []);
Αντιμετώπιση προβλημάτων
Προσθέστε -fcxx-modules στα Other C++ flags για σφάλμα: χρήση του ‘@import’ όταν οι ενότητες c++ είναι απενεργοποιημένες, σκεφτείτε να χρησιμοποιήσετε -fmodules και -fcxx-modules στις Ρυθμίσεις Δημιουργίας του έργου iOS.
Εάν θέλετε να εξερευνήσετε περισσότερες δυνατότητες του SDK iOS, μπορείτε να ανατρέξετε στην αναλυτική μας τεκμηρίωση API.
Αν αντιμετωπίσετε οποιοδήποτε πρόβλημα, παρακαλούμε επικοινωνήστε μαζί μας κάνοντας κλικ εδώ. Η ομάδα υποστήριξής μας θα μπορέσει να σας βοηθήσει.
