Uyarı: Bu öğe için eski belgelere ulaşılamıyor, bu nedenle geçerli belgeleri görüyorsunuz.
PushEngage React Native SDK'sı, React Native uygulamalarınıza anlık bildirim entegrasyonunu basitleştirir ve Android ve iOS için sorunsuz destek sunar. Uygulama anlık bildirimlerini uygulamak için üç çerçeve sunuyoruz: React, Native ve Flutter. Daha fazla yardım için Native Android, iOS ve Flutter uygulama anlık bildirimleri için kılavuzları bulabilirsiniz.
Bu kılavuzda, hem Android hem de iOS'ta anlık bildirimleri etkinleştirmek için PushEngage React Native SDK'sını ayarlama işleminden bahsedeceğiz.
Başlamadan Önce
İhtiyacınız olacak şeylerin bir listesi
- React Native projesi ve turbo modül desteği. Hesabınız yoksa, buradan kaydolabilirsiniz.
- Android için Firebase Cloud Messaging (FCM) kurulumu olan Firebase hesabı.
- iOS için Apple Anlık Bildirim (APN) hizmetlerini yapılandırmak üzere bir Apple Geliştirici hesabı.
PushEngage React Native SDK'sını Yükleme
PushEngage React Native SDK'sını npm veya yarn kullanarak yükleyebilirsiniz
npm install @pushengage/pushengage-react-nativeReact Native 0.77.0 veya Daha Eski Sürümler İçin
React Native sürüm 0.77.0 veya daha eski bir sürüm kullanıyorsanız, aşağıda gösterildiği gibi SDK'nın 0.0.1 sürümünü kullanın:
npm install @pushengage/[email protected]Android Kurulumu
Firebase Cloud Messaging (FCM) Kurulumu
Android için anlık bildirimleri etkinleştirmek üzere Firebase Cloud Messaging'i (FCM) yapılandırmanız gerekecek
1. Google hesabınızı kullanarak Firebase konsoluna erişin.
2. Yeni bir proje oluşturmak için “Proje Ekle”ye tıklayın veya listeden mevcut bir projeyi seçin. Mevcut bir projeyi kullanıyorsanız, doğrudan 4. adıma geçin.
3. Projeniz için bir ad girin ve Devam'a tıklayın. Son ekrandaki “Proje oluştur” seçeneğine tıklayarak kurulum işlemini tamamlayın.
4. Firebase proje kontrol panelinizde, bir Android uygulaması eklemek için Android simgesine tıklayın.
5. Android uygulamanızın paket adını (android/app/build.gradle dosyasındaki android bloğu altında bulunur) girin ve bir uygulama adı belirtin. İşiniz bittiğinde Kaydet'e tıklayın.
6. google-services.json dosyasını indirin ve android/app/ adresindeki Android uygulama modülünüzün kök dizinine yerleştirin.
7. Hizmet Hesabı JSON'unu Oluşturun
- Firebase konsolunda, sol üstteki “Proje Genel Bakışı”nın yanındaki Ayarlar simgesine tıklayın, ardından Proje ayarları'nı seçin.
- Hizmet hesapları sekmesine gidin.
- Yeni özel anahtar oluştur'a tıklayın ve .json dosyasını indirin.
- Bu dosyayı güvende tutun, çünkü PushEngage kontrol paneli kurulumu için gerekecektir.
8. Gönderici Kimliğini Alın
- Firebase konsolunda, sol üstteki Proje Genel Bakışı'nın yanındaki Ayarlar simgesine tıklayın ve “Proje ayarları”nı seçin.
- Cloud Messaging sekmesini seçin. Burada, PushEngage SDK başlatması için gereken Gönderici Kimliğini bulacaksınız.
FCM'yi PushEngage ile Entegre Edin
FCM ayrıntılarını PushEngage Kontrol Paneli ile sorunsuz bir şekilde entegre etmek için aşağıdaki adımları izleyebilirsiniz.
1. Giriş yaparak PushEngage hesabınıza erişin
2. Sol gezinme menüsünde Ayarlar » Kurulum'a gidin. Android SDK'yı seçin
3. Mevcut platformlar listesinden, Android için anlık bildirimleri yapılandırmak üzere Android SDK seçeneğini belirleyin.
4. FCM Ayarlarını Yapılandırın – Firebase Gönderici Kimliğinizi (Firebase Konsolu'ndan alınan) girin. Hizmet Hesabı JSON dosyasını (Firebase'den indirilen) yükleyin. Bu ayarları kaydetmek için Güncelle düğmesine tıklayın.
5. FCM ayarlarını yapılandırdıktan sonra size bir Uygulama Kimliği verilecektir. Bu Uygulama Kimliğini, Flutter uygulamanızda PushEngage Android SDK'sını başlatmak için gerektiğinden kopyalayın.
iOS Kurulumu
your_project_name » iOS » your_project_name.xcworkspace'i açtıktan sonraki adımları izleyebilirsiniz.
Adım 1: Uzaktan Bildirimleri Etkinleştir
1. Xcode projenizi açın ve Proje Gezgini'nde kök projeyi seçin.
2. Ana uygulama hedefinizi seçin.
3. “Signing & Capabilities.“ bölümüne gidin.
4. Background Modes özelliğinin eklendiğinden emin olun. Değilse, “+ Capability” düğmesine tıklayarak ekleyin.
5. Benzer şekilde, Push Notifications özelliğinin eklendiğinden emin olun. Değilse, “+ Capability” düğmesini kullanarak ekleyin.
Eğer “Anlık Bildirimler” yeteneği Xcode'da görünmüyorsa:
1. Apple Geliştirici hesabınıza gidin.
2. “Certificates, Identifiers & Profiles.“ bölümüne gidin.
3. Uygulama tanımlayıcınızı seçin.
4. App ID yapılandırmanızı düzenleyin ve Push Notifications özelliğinin etkinleştirildiğinden emin olun.
5. Xcode'a geri dönün ve Push Notifications özelliğini tekrar eklemeyi deneyin.
Adım 2: Background Modes'u Etkinleştirin
1. Xcode projenizde, “Signing & Capabilities.“ bölümüne gidin.
2. “Background Modes“ içinde, hem “Remote notifications” hem de “Background fetch.“ seçeneklerini etkinleştirin.
Bu adım, uygulamanızın uzak bildirimleri ve arka plan alımlarını verimli bir şekilde işleyebilmesini sağlar.
iOS APNs sertifikası oluşturun
Henüz bir iOS APNs sertifikanız yoksa, buradaki kılavuza başvurarak bir tane oluşturabilirsiniz.
Notification Service uzantısı ve Notification Content uzantısı ekleyin
Bu yalnızca iOS cihazları için geçerlidir.
Bildirim Hizmeti Uzantısı Oluşturma
Bildirim Hizmeti Uzantısı, iOS uygulamanızın bildirim alma yeteneğini geliştirir. Bu, bildirim içeriğini değiştirmek veya bildirim alındığında herhangi bir veriyi almak/işlemek için kullanılır. Bir Bildirim Hizmeti Uzantısı oluşturmak için şu adımları izleyin:
1. Xcode'u açın ve projenize gidin.
2. Menüden File » New » Target seçeneğini seçin.
3. Şablon seçimi penceresinde, Notification Service Extension'ı seçin ve Next'e tıklayın.
4. Uzantınız için bir ad verin, örneğin, PushEngageNotificationServiceExtension, ve Finish'e tıklayın.
Notification Service Extension'ı oluşturmayı bitirdikten sonra, etkinleştirmeniz istenebilir. Hemen etkinleştirmeyin.
Uzantıyı etkinleştirmek, Xcode'un hata ayıklama odağını uygulamanızdan uzantıya kaydıracaktır. Yanlışlıkla etkinleştirirseniz, endişelenmeyin; Xcode içinde uygulamanızın hata ayıklamasına geri dönebilirsiniz.
5. Proje gezgininde, en üst düzey proje dizinini seçin ve 4. adımdaki hedefler listesinden NotificationServiceExtension hedefini seçin.
6. Deployment Target'ı iOS 10 veya üstü olarak ayarlayın; bu, Apple'ın bu uzantı desteğini yayınladığı iOS sürümüdür.
Bildirim Hizmeti Uzantısı için PushEngage SDK'sını Başlatma
PushEngage SDK'nın iOS Notification Service Extension'ınızda düzgün çalışmasını sağlamak için şu adımları izleyin:
1. your_project_name » ios » Podfile dosyasını açın.
2. Ana uygulama hedefinin post_install bloğuna aşağıdakileri ekleyin
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. Dosyanın altına ekleyin
target 'Your_Notification_Service_Extension_Name' do
pod 'PushEngage', '~>0.0.5'
end
4. Bağımlılığı yükleyin
pod repo update
pod install
5. Notification Service Extension hedefinizde, PushEngage framework'ünü içe aktardığınızdan ve gerekli başlatma kodunu eklediğinizden emin olun.
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)
}
}
}
Bildirim İçeriği Uzantısı Oluşturma
Özel kullanıcı arayüzü ekleyerek iyileştirmek için bir Bildirim İçeriği Uzantısı oluşturmanız gerekecektir. Uzantıyı ayarlamak için aşağıdaki adımları izleyin:
1. Xcode'da, File » New » Target. yolunu izleyin.
2. Bildirim İçeriği Uzantısı'nı seçin ve İleri'ye tıklayın.
3. Bitir'e tıkladıktan sonra görünen iletişim kutusunda “Etkinleştir” seçeneğini işaretlemeyin. İptal etmek, Xcode'un uygulamanızın hata ayıklamasını uzantı yerine uygulamanız için yapmasını sağlar. Yanlışlıkla etkinleştirirseniz, Xcode içinde uygulamanızın hata ayıklamasına geri dönün (çalıştırma düğmesinin yanında).
4. Proje gezgininde, en üst düzey proje dizinini seçin ve 2 numaralı adımdaki oluşturulan hedef listesinden projede NotificationContentExtension hedefini seçin.
5. Dağıtım Hedefini iOS 10 veya üstü olarak ayarlayın; bu, Apple'ın bu uzantı desteğini yayınladığı iOS sürümüdür.
Bildirim İçeriği Uzantısı için PushEngage SDK'sını Başlatma
PushEngage SDK'sının iOS Bildirim İçeriği Uzantınızda düzgün çalışmasını sağlamak için bu adımları izleyin:
1. your_project_name » iOS » Podfile dosyasını açın.
2. Podfile dosyanızın en altına aşağıdakileri ekleyin:
target 'Your_Notification_Content_Extension_Name' do
pod 'PushEngage', '0.0.5'
end
3. Bağımlılığı yükleyin:
Projenizin iOS dizinine cd ile girin ve aşağıdaki komutu çalıştırın
pod repo update
pod install
4. Bildirim İçerik Uzantısı hedefinizde, PushEngage framework'ünü içe aktardığınızdan ve gerekli başlatma kodunu eklediğinizden emin olun. İşte UI öğeleri örnekleriyle bunu nasıl yapabileceğiniz:
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!)
}
}
}
}
Uygulama Grupları Ekle
Uygulama Grupları, ana uygulama, bildirim hizmeti uzantısı ve bildirim içerik uzantısı arasındaki iletişimi etkinleştirmek için gereklidir. Uygulama Gruplarını iOS projenize eklemek için şu adımları izleyin:
Mevcut bir uygulama grubunuz varsa ve aynı grubu kullanmak istiyorsanız, 4. adıma geçebilirsiniz.
1. Xcode projenizde, proje gezgininde, üst düzey proje dizinini seçin ve uygulamanın ana hedefini seçin.
2. Signing & Capabilities sekmesine gidin.
3. “+ Capability” düğmesine tıklayın ve listeden App Groups'u seçin.
4. Bir Uygulama Grubu eklemek için + düğmesine tıklayın.
5. Uygulama Grubunuza benzersiz bir ad ekleyin ve Tamam'a tıklayın.
6. Ana düzenleme alanında, uygulamanızın ana hedefini seçin. Bir uygulama grubu oluşturduysanız, lütfen grubun adını uygulamanızın Info.plist dosyasına PushEngage_App_Group_Key anahtarıyla ekleyin.
7. Aynı anahtarı ve değeri Bildirim Hizmeti Uzantısı'nın Info.plist dosyasına ekleyin.
8. Hem Ana Uygulama Hedefi hem de Bildirim Hizmeti Uzantınız için aynı uygulama grubunu seçtiğinizden emin olun.
PushEngage SDK'sını Başlatın
index.js dosyanızda PushEngage SDK'sını başlatın.
import PushEngage from 'pushengage-react-native';
PushEngage.setAppId('your-app-id');
iOS uygulamanızın AppDelegate.mm dosyasında
@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);
}
Derin Bağlantıyı İşleme
Derin bağlantı olaylarını dinleyin ve uygulamanızda işleyin
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;
};
}, []);
Sorun Giderme
Hata için Diğer C++ bayraklarına -fcxx-modules ekleyin: '@import' kullanımı c++ modülleri devre dışı bırakıldığında, iOS projesinin Derleme Ayarları altında -fmodules ve -fcxx-modules kullanmayı düşünün.
iOS SDK'nın diğer özelliklerini keşfetmek isterseniz, ayrıntılı API belgelerimize göz atabilirsiniz.
Sorun yaşamanız durumunda, lütfen buraya tıklayarak bizimle iletişime geçin. Destek ekibimiz size yardımcı olabilecektir.
