React Native библиотека

Pushed React Native - интеграция Pushed.ru и React Native

Обзор

Этот пакет позволяет интегрировать службу push-уведомлений Pushed.ru в ваше приложение React Native.

Примеры использования

Вы можете посмотреть пример использования запустив приложение example из этого репозитория.

Инструкция по использованию

Выполните следующие шаги, чтобы использовать пакет pushed-react-native в своем приложении React Native.

1. Установите библиотеку

Запустите следующую команду, чтобы установить библиотеку:

npm install github:PushedLab/Pushed.Messaging.ReactNative

2. Импортируйте необходимые методы и типы

Импортируйте необходимые методы и типы из библиотеки:

import {
  startService,
  stopService,
  PushedEventTypes,
  Push,
} from 'pushed-react-native';

3. Подпишитесь на событие PushedEventTypes.PUSH_RECEIVED

Подпишитесь на событие PUSH_RECEIVED для обработки входящих push-уведомлений:

import React, { useEffect } from 'react';
import { NativeEventEmitter, NativeModules } from 'react-native';
import { displayNotification } from './Notifee';

useEffect(() => {
  const eventEmitter = new NativeEventEmitter(NativeModules.PushedReactNative);
  const eventListener = eventEmitter.addListener(
    PushedEventTypes.PUSH_RECEIVED,
    (push: Push) => {
      console.log(push);
      displayNotification(push.title, push.body);
    }
  );

  // Remove the listener when the component unmounts
  return () => {
    eventListener.remove();
  };
}, []);

4. Запустите сервис приема сообщений

Используйте функцию startService для запуска foreground-службы, отвечающей за прием сообщений: Для связи приложения с клиентским токеном необходимо передать идентификатор приложения. Его можно получить в личном кабинете admin.multipushed.ru → Приложения → поле «Идентификатор».

const handleStart = () => {
  console.log('Starting Pushed Service');
  startService('PushedService', 'YOUR_APPLICATION_ID').then((newToken) => {
    console.log(`Service has started: ${newToken}`);
  });
};

5. Остановите сервис приема сообщений

Используйте функцию stopService для остановки foreground-службы, отвечающей за прием сообщений:

const handleStop = () => {
 stopService().then((m) => {
 console.log(m);
 });
};

Особенности работы в iOS

1. Сообщения доставляются посредством службы apns и обрабатываются самим устройством в фоновом режиме. startService можно вызвать только один раз, чтобы зарегистрировать клиенсткий токен.
2. Необходимо настроить ваше приложение для работы с apns в панели управления Pushed (см. статью)[https://pushed.ru/docs/apns/]
3. Убедитесь, что приложение имеет разрешения Push Notifications и Background Modes -> Remote Notifications

iOS: Notification Service Extension (подтверждение + SHOW)

Создание таргета

1. Откройте проект в Xcode и выберите File ▸ New ▸ Target….
2. В разделе iOS выберите Notification Service Extension.
3. Укажите имя, например AppNotiService, и завершите мастер. Xcode создаст файл NotificationService.swift и таргет для расширения.

1) Podfile Добавьте отдельный под только для Extension:

target 'AppNotiService' do
  pod 'pushed-react-native-extension', :path => '../node_modules/@PushedLab/pushed-react-native'
end

2) Импорт и код в Extension (полный пример) Ниже приведена полная реализация NotificationService.swift:

import UserNotifications
import Foundation
import pushed_react_native_extension

@objc(NotificationService)
class NotificationService: UNNotificationServiceExtension {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?

    override func didReceive(
        _ request: UNNotificationRequest,
        withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void
    ) {
        self.contentHandler = contentHandler
        bestAttemptContent = request.content.mutableCopy() as? UNMutableNotificationContent

        guard let bestAttemptContent else {
            contentHandler(request.content)
            return
        }

        NSLog("[Extension] didReceiveNotificationRequest called with userInfo: \(request.content.userInfo)")

        // Обрабатываем messageId через helper: сохраняет в App Group и подтверждает доставку
        if let messageId = request.content.userInfo["messageId"] as? String {
            NSLog("[Extension] Found messageId: \(messageId), delegating to PushedIosLib")
            PushedExtensionHelper.processMessage(messageId)
        } else {
            NSLog("[Extension] No messageId found in notification")
        }

        // Всегда возвращаем контент системе
        contentHandler(bestAttemptContent)
    }

    override func serviceExtensionTimeWillExpire() {
        if let contentHandler = contentHandler, let bestAttemptContent =  bestAttemptContent {
            contentHandler(bestAttemptContent)
        }
    }
}

3) App Group (обязательно)

• Включите App Groups в Signing & Capabilities для приложения и Extension с одинаковым идентификатором, например group.ru.pushed.messaging.

• Убедитесь, что и приложение, и Extension подписываются одной и той же Team, а у Extension отдельный bundle identifier в том же пространстве, например com.yourapp.notification-service.

Важно: payload пуша должен содержать поле messageId. Без него подтверждение отправлено не будет.

Описание методов и типов библиотеки pushed-react-native

startService(serviceName: string): Promise<string>

Эта функция запускает службу push-уведомлений.

• Параметры:
• serviceName: строка, представляющая имя запускаемой службы.
• Возвращаемое значение:
• Promise<string>, который резолвится токеном устройства, который понадобится при отправке пуша. См. пример.

stopService(): Promise<string>

Эта функция останавливает службу push-уведомлений.

• Возвращаемое значение:
• Promise<string>, который резолвится сообщением, указывающим, что служба остановлена.

PushedEventTypes

Это перечисление содержит типы событий, с которыми работает система Pushed.ru

• Перечисляемые значения:
• PUSH_RECEIVED: представляет тип события при получении push-уведомления.

Push

Это класс, представляющий push-уведомление, он является оберткой произвольного словаря key-value

• Constructor:
• constructor(data: { [key: string]: string })
  • Cоздает новый экземпляр Push, используя предоставленные данные.