Примечание: Устаревшая документация для этого элемента отсутствует, поэтому вы видите текущую документацию.
SDK PushEngage React Native упрощает интеграцию push-уведомлений в ваши приложения React Native, предлагая бесшовную поддержку Android и iOS. Мы предлагаем три фреймворка для реализации push-уведомлений приложений: React, Native и Flutter. Вы можете найти руководства для push-уведомлений приложений Native Android, iOS и Flutter для дальнейшей помощи.
В этом руководстве мы рассмотрим настройку SDK PushEngage React Native для включения push-уведомлений как на Android, так и на iOS.
Прежде чем начать
Вот список того, что вам понадобится
- Проект React Native и поддержка turbo module. Если у вас нет учетной записи, вы можете зарегистрироваться здесь.
- Учетная запись Firebase с настроенным Firebase Cloud Messaging (FCM) для Android.
- Учетная запись разработчика Apple для настройки служб Apple Push Notification (APN) для iOS.
Установка SDK PushEngage React Native
Вы можете установить SDK PushEngage React Native, используя npm или yarn
npm install @pushengage/pushengage-react-nativeДля React Native 0.77.0 или более ранних версий
Если вы используете React Native версии 0.77.0 или более ранней, используйте версию SDK 0.0.1, как показано ниже:
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. Здесь вы найдете идентификатор отправителя, который необходим для инициализации PushEngage SDK.
Интеграция FCM с PushEngage
Чтобы беспрепятственно интегрировать данные FCM с панелью управления PushEngage, вы можете следовать приведенным ниже шагам.
1. Получите доступ к своей учетной записи PushEngage, войдя в систему
2. В левой навигации перейдите в раздел Настройки » Установка. Выберите Android SDK
3. Из списка доступных платформ выберите опцию Android SDK для настройки push-уведомлений для Android.
4. Настройте параметры FCM – Введите ваш Firebase Sender ID (полученный из Firebase Console). Загрузите файл Service Account JSON (загруженный из Firebase). Нажмите кнопку Обновить, чтобы сохранить эти настройки.
5. После настройки параметров FCM вам будет предоставлен App ID. Скопируйте этот App ID, так как он требуется для инициализации SDK PushEngage для Android в вашем приложении Flutter.
Настройка iOS
Вы можете следовать шагам после открытия your_project_name » iOS » your_project_name.xcworkspace.
Шаг 1: Включить удаленные уведомления
1. Откройте ваш проект Xcode и выберите корневой проект в навигаторе проекта.
2. Выберите целевой объект вашего основного приложения.
3. Перейдите в раздел «Signing & Capabilities».
4. Убедитесь, что добавлена возможность Background Modes. Если нет, добавьте ее, нажав кнопку «+ Capability».
5. Аналогично убедитесь, что добавлена возможность Push Notifications. Если нет, добавьте ее с помощью кнопки «+ Capability».
Если возможность «Push-уведомления» не отображается в Xcode:
1. Войдите в свою учетную запись разработчика Apple.
2. Перейдите в раздел «Certificates, Identifiers & Profiles».
3. Выберите идентификатор вашего приложения.
4. Отредактируйте конфигурацию вашего App ID и убедитесь, что Push Notifications включены.
5. Вернитесь в Xcode и попробуйте снова добавить возможность Push Notifications.
Шаг 2: Включите фоновые режимы
1. В вашем проекте Xcode перейдите в раздел «Signing & Capabilities».
2. В разделе «Background Modes» включите «Remote notifications» и «Background fetch».
Этот шаг гарантирует, что ваше приложение сможет эффективно обрабатывать удаленные уведомления и фоновое извлечение данных.
Создайте сертификат iOS APNs
Вы можете обратиться к руководству здесь, чтобы создать сертификат iOS APNs, если у вас его еще нет.
Добавьте расширение Notification Service и расширение Notification Content
Это применимо только для устройств iOS.
Создание расширения Notification Service
Расширение Notification Service расширяет возможности вашего приложения iOS по получению уведомлений. Оно используется для изменения содержимого уведомления или для получения/обработки любых данных при получении уведомления. Следуйте этим шагам, чтобы создать расширение Notification Service:
1. Откройте Xcode и перейдите к вашему проекту.
2. Выберите File » New » Target в меню.
3. В окне выбора шаблона выберите Notification Service Extension и нажмите Next.
4. Укажите имя для вашего расширения, например, PushEngageNotificationServiceExtension, и нажмите Finish.
После завершения создания Notification Service Extension вам может быть предложено активировать его. Не активируйте его сразу.
Активация расширения переключит фокус отладки Xcode с вашего приложения на расширение. Если вы активировали его случайно, не волнуйтесь; вы можете переключиться обратно на отладку вашего приложения в Xcode.
5. В навигаторе проекта выберите каталог верхнего уровня проекта и выберите цель NotificationServiceExtension в списке целей, созданных на шаге 4.
6. Установите Deployment Target на iOS 10 или выше, так как именно в этой версии iOS Apple добавила поддержку этого расширения.
Инициализация SDK PushEngage для Notification Service Extension
Чтобы обеспечить правильную работу 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. В вашей цели Notification Service Extension убедитесь, что вы импортировали фреймворк 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)
}
}
}
Создание Notification Content Extension
Чтобы улучшить отображение путем добавления пользовательского интерфейса, вам потребуется создать Notification Content Extension. Следуйте приведенным ниже шагам для настройки расширения:
1. В Xcode перейдите в Файл » Новый » Цель.
2. Выберите Notification Content Extension и нажмите Далее.
3. Не выбирайте «Активировать» в диалоговом окне, которое появляется после нажатия «Готово». Отмена сохранит отладку вашего приложения в Xcode вместо расширения. Если вы случайно активируете его, вернитесь к отладке вашего приложения в Xcode (рядом с кнопкой запуска).
4. В навигаторе проекта выберите каталог верхнего уровня проекта и выберите цель NotificationContentExtension в списке целей, созданных в шаге № 2.
5. Установите Deployment Target на iOS 10 или выше, так как это версия iOS, для которой Apple выпустила поддержку этого расширения.
Инициализация SDK PushEngage для Notification Content Extension
Чтобы обеспечить надлежащее функционирование SDK PushEngage в вашем iOS Notification Content Extension, выполните следующие шаги:
1. Откройте имя_вашего_проекта » iOS » Podfile.
2. Добавьте следующее в конец вашего Podfile:
target 'Your_Notification_Content_Extension_Name' do
pod 'PushEngage', '0.0.5'
end
3. Установите зависимость:
Перейдите в каталог 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:
Если у вас есть существующая группа приложений (app group) и вы хотите использовать ее, вы можете перейти к шагу № 4.
1. В вашем проекте Xcode, в навигаторе проекта, выберите корневой каталог проекта и выберите основную цель приложения.
2. Перейдите на вкладку Signing & Capabilities.
3. Нажмите кнопку “+ Capability” и выберите App Groups из списка.
4. Нажмите кнопку +, чтобы добавить группу приложений.
5. Добавьте уникальное имя для вашей группы приложений и нажмите OK.
6. В основной области редактора выберите основную цель вашего приложения. Если вы создали группу приложений, укажите имя группы в Info.plist вашего приложения с ключом PushEngage_App_Group_Key.
7. Добавьте тот же ключ и значение в файл Info.plist расширения службы уведомлений.
8. Убедитесь, что вы выбрали одну и ту же группу приложений как для основной цели приложения, так и для вашего расширения службы уведомлений.
Инициализация PushEngage SDK
В вашем 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
Прослушивайте события глубоких ссылок и обрабатывайте их в вашем приложении
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 для ошибки: use of ‘@import’ when c++ modules are disabled, consider using -fmodules and -fcxx-modules в настройках сборки проекта iOS.
Если вы хотите изучить больше возможностей iOS SDK, вы можете ознакомиться с нашей подробной документацией по API.
Если у вас возникнут какие-либо проблемы, пожалуйста, свяжитесь с нами, нажав здесь. Наша служба поддержки сможет вам помочь.
