Observera: Det finns ingen äldre dokumentation tillgänglig för det här objektet, så du ser den aktuella dokumentationen.
PushEngage React Native SDK förenklar integrationen av push-notiser i dina React Native-appar och erbjuder sömlöst stöd för Android och iOS. Vi erbjuder tre ramverk för att implementera push-notiser för appar: React, Native och Flutter. Du hittar guider för Native Android, iOS och Flutter app-push-notiser för ytterligare hjälp.
I den här guiden går vi igenom installationen av PushEngage React Native SDK för att aktivera push-notiser på både Android och iOS.
Innan du börjar
Här är en lista över saker du skulle behöva
- Ett React Native-projekt & stöd för turbomoduler. Om du inte har ett konto kan du registrera dig här.
- Firebase-konto med Firebase Cloud Messaging (FCM) konfigurerat för Android.
- Ett Apple Developer-konto för att konfigurera Apple Push Notification (APN) -tjänster för iOS.
Installera PushEngage React Native SDK
Du kan installera PushEngage React Native SDK med antingen npm eller yarn
npm install @pushengage/pushengage-react-nativeFör React Native 0.77.0 eller tidigare
Om du använder React Native version 0.77.0 eller tidigare, använd version 0.0.1 av SDK:n enligt nedan:
npm install @pushengage/[email protected]Konfigurera Android
Firebase Cloud Messaging (FCM) konfiguration
För att aktivera push-notiser för Android måste du konfigurera Firebase Cloud Messaging (FCM)
1. Gå till Firebase-konsolen med ditt Google-konto.
2. Klicka på “Lägg till projekt” för att skapa ett nytt projekt, eller välj ett befintligt projekt från din lista. Om du använder ett befintligt projekt, fortsätt direkt till steg 4.
3. Ange ett namn för ditt projekt och klicka på Fortsätt. Slutför installationsprocessen genom att klicka på ”Skapa projekt” på den sista skärmen.
4. I din Firebase-projektdashbord, klicka på Android-ikonen för att lägga till en Android-app.
5. Ange ditt Android-apps paketnamn (finns i android/app/build.gradle under android-blocket) och ange ett appnamn. Klicka på Registrera när du är klar.
6. Ladda ner google-services.json-filen och placera den i roten av din Android-appmodul på android/app/.
7. Generera Service Account JSON
- I Firebase-konsolen, klicka på Inställningar-ikonen bredvid "Projektsöversikt" längst upp till vänster, välj sedan Projektinställningar.
- Navigera till fliken Servicekonton.
- Klicka på Generera ny privat nyckel och ladda ner .json-filen.
- Förvara denna fil säkert eftersom du behöver den för PushEngage-dashbordkonfigurationen.
8. Hämta avsändar-ID
- I Firebase-konsolen, klicka på Inställningar-ikonen bredvid Projektsöversikt längst upp till vänster och välj "Projektinställningar."
- Välj fliken Cloud Messaging. Här hittar du avsändar-ID, som behövs för initialisering av PushEngage SDK.
Integrera FCM med PushEngage
För att sömlöst integrera FCM-detaljer med PushEngage-instrumentpanelen kan du följa stegen nedan.
1. Gå till ditt PushEngage-konto genom att logga in
2. I den vänstra navigeringen, gå till Inställningar » Installation. Välj Android SDK
3. Välj alternativet Android SDK från listan över tillgängliga plattformar för att konfigurera push-notiser för Android.
4. Konfigurera FCM-inställningar – Ange ditt Firebase avsändar-ID (hämtat från Firebase Console). Ladda upp Service Account JSON-filen (nedladdad från Firebase). Klicka på knappen Uppdatera för att spara dessa inställningar.
5. Efter att ha konfigurerat FCM-inställningarna får du ett App-ID. Kopiera detta App-ID eftersom det krävs för att initialisera PushEngage Android SDK i din Flutter-app.
Konfigurera iOS
Du kan följa stegen efter att ha öppnat ditt_projektnamn » iOS » ditt_projektnamn.xcworkspace.
Steg 1: Aktivera fjärrnotiser
1. Öppna ditt Xcode-projekt och välj rotprojektet i projektnavigatorn.
2. Välj ditt huvudapp-mål.
3. Navigera till "Signering & Behörigheter."
4. Se till att behörigheten Bakgrundslägen är tillagd. Om inte, lägg till den genom att klicka på knappen "+ Behörighet".
5. På samma sätt, se till att Push-aviseringar-behörigheten är tillagd. Om inte, lägg till den med knappen "+ Behörighet".
Om behörigheten "Push-notiser" inte är synlig i Xcode:
1. Gå till ditt Apple Developer-konto.
2. Navigera till "Certifikat, Identifierare & Profiler."
3. Välj din app-identifierare.
4. Redigera konfigurationen för din App ID och se till att Push-aviseringar är aktiverat.
5. Återgå till Xcode och försök lägga till Push-aviseringar-behörigheten igen.
Steg 2: Aktivera bakgrundslägen
1. I ditt Xcode-projekt, navigera till "Signering & Behörigheter."
2. Inom "Bakgrundslägen", aktivera både "Fjärraviseringar" och "Bakgrundshämtning."
Detta steg säkerställer att din app kan hantera fjärrnotiser och bakgrundshämtningar effektivt.
Skapa iOS APNs-certifikat
Du kan hänvisa till guiden här för att skapa ett iOS APNs-certifikat om du inte redan har ett.
Lägg till Notification Service-tillägg och Notification Content-tillägg
Detta gäller endast för iOS-enheter.
Skapa Notification Service Extension
Notification Service Extension förbättrar din iOS-apps förmåga att ta emot notiser. Detta används för att modifiera notisens innehåll eller hämta/bearbeta data vid mottagande av notisen. Följ dessa steg för att skapa en Notification Service Extension:
1. Öppna Xcode och navigera till ditt projekt.
2. Välj Arkiv » Nytt » Mål från menyn.
3. I fönstret för mallval, välj Notification Service Extension och klicka på Nästa.
4. Ange ett namn för ditt tillägg, till exempel PushEngageNotificationServiceExtension, och klicka på Slutför.
När du är klar med att skapa Notification Service Extension kan du bli ombedd att aktivera det. Aktivera det inte omedelbart.
Att aktivera extensionen skulle skifta Xcodes felsökningsfokus från din app till extensionen. Om du aktiverar den av misstag, oroa dig inte; du kan byta tillbaka till att felsöka din app inom Xcode.
5. I projektnavigatören, välj den övergripande projektkatalogen och välj NotificationServiceExtension-målet i projektet från listan över mål som skapades i steg 4.
6. Ställ in Deployment Target till iOS 10 eller senare, vilket är den version av iOS som Apple släppte stödet för detta tillägg.
Initiera PushEngage SDK för Notification Service Extension
För att säkerställa korrekt funktion av PushEngage SDK i ditt iOS Notification Service Extension, följ dessa steg:
1. Öppna ditt_projektnamn » ios » Podfile.
2. Lägg till följande i post_install-blocket för huvudappens mål
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. Lägg till längst ner i filen
target 'Your_Notification_Service_Extension_Name' do
pod 'PushEngage', '~>0.0.5'
end
4. Installera beroendet
pod repo update
pod install
5. I ditt Notification Service Extension-mål, se till att importera PushEngage-ramverket och lägg till nödvändig initialiseringskod.
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)
}
}
}
Skapa Notification Content Extension
För att förbättra sättet genom att lägga till anpassat UI, behöver du skapa en Notification Content Extension. Följ stegen nedan för att ställa in tillägget:
1. I Xcode, gå till Arkiv » Nytt » Mål.
2. Välj Notification Content Extension och klicka på Nästa.
3. Välj inte “Aktivera” i dialogrutan som visas efter att ha klickat på Slutför. Att avbryta gör att Xcode felsöker din app istället för tillägget. Om du av misstag aktiverar det, byt tillbaka till att felsöka din app inom Xcode (bredvid körknappen).
4. I projektnavigatören, välj den översta projektdirektori och välj NotificationContentExtension-målet i projektet från mållistan som skapades i steg nr. 2.
5. Ställ in Deployment Target till iOS 10 eller senare, vilket är den version av iOS som Apple släppte stödet för detta tillägg.
Initiera PushEngage SDK för Notification Content Extension
För att säkerställa korrekt funktion av PushEngage SDK i din iOS Notification Content Extension, följ dessa steg:
1. Öppna ditt_projektnamn » iOS » Podfile.
2. Lägg till följande längst ner i din Podfile:
target 'Your_Notification_Content_Extension_Name' do
pod 'PushEngage', '0.0.5'
end
3. Installera beroendet:
cd in i ios-katalogen för ditt projekt och kör kommandot nedan
pod repo update
pod install
4. I din Notification Content Extension-mål, se till att importera PushEngage-ramverket och lägga till nödvändig initialiseringskod. Här är hur du kan göra det med några exempel på UI-element:
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!)
}
}
}
}
Lägg till App Groups
App Groups är avgörande för att möjliggöra kommunikation mellan huvudappen, tilläggsmodulen för meddelandetjänsten och tilläggsmodulen för meddelandeinnehåll. Följ dessa steg för att lägga till App Groups i ditt iOS-projekt:
Om du har en befintlig appgrupp och vill använda samma, kan du hoppa till steg 4.
1. I ditt Xcode-projekt, i projektnavigatören, välj den översta projektdirektori och välj huvudmålet för appen.
2. Navigera till fliken Signing & Capabilities.
3. Klicka på knappen “+ Capability” och välj App Groups från listan.
4. Klicka på knappen + för att lägga till en App Group.
5. Lägg till ett unikt namn för din App Group och klicka på OK.
6. I huvudredigeringsområdet, välj huvudmålet för din app. Om du har skapat en appgrupp, ange namnet på gruppen i din applikations Info.plist med nyckeln PushEngage_App_Group_Key.
7. Lägg till samma nyckel och värde i Notification Service Extensions Info.plist-fil.
8. Se till att du väljer samma appgrupp i både Main Application Target och Your_Notification_Service_Extension.
Initiera PushEngage SDK
I din index.js, initialisera PushEngage SDK.
import PushEngage from 'pushengage-react-native';
PushEngage.setAppId('your-app-id');
I din AppDelegate.mm för iOS-appen
@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);
}
Hantering av deepLink
Lyssna på djupa länkhändelser och hantera dem i din applikation
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;
};
}, []);
Felsökning
Lägg till -fcxx-modules i Other C++ flags för fel: användning av '@import' när c++-moduler är inaktiverade, överväg att använda -fmodules och -fcxx-modules under iOS-projektets Build Settings.
Om du vill utforska fler av iOS SDK:s funktioner kan du gå igenom vår detaljerade API-dokumentation.
Om du stöter på några problem, vänligen kontakta oss genom att klicka här. Vårt supportteam kommer att kunna hjälpa dig.
