# Expo SDK: Руководство по базовой интеграции В этом разделе содержится информация о том, как интегрировать Pushwoosh Expo SDK в ваше приложение. ## Предварительные требования Для интеграции Pushwoosh Expo SDK в ваше приложение вам понадобится следующее: ## Шаги интеграции ### 1. Установите плагин Установите плагин Pushwoosh Expo с помощью Expo CLI ```bash expo install pushwoosh-expo-plugin ``` Установите Pushwoosh React Native SDK ```bash npm install pushwoosh-react-native-plugin --save ``` ### 2. Настройте свойства плагина Добавьте плагин в начало массива плагинов с необходимыми свойствами: ```json title="app.json/app.config.js" { "expo": { "plugins": [ [ "pushwoosh-expo-plugin", { "mode": "development", "ios": { "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__" }, "android": { "apiToken": "__YOUR_DEVICE_API_TOKEN__" } } ] ] } } ``` Где: - `mode` используется для настройки прав окружения APNs. Доступны значения “Development” или “production”. - `PW_API_TOKEN`, `apiToken` — это ваш [Pushwoosh Device API Token.](/ru/developer/api-reference/api-access-token/#device-api-token) ### 3. Инициализируйте Pushwoosh В корневом компоненте вашего приложения: - Импортируйте плагин `pushwoosh-react-native-plugin`. - Инициализируйте Pushwoosh SDK. - Вызовите `register()` в вашей логике инициализации для регистрации на получение push-уведомлений. ```javascript title="index.tsx" import Pushwoosh from 'pushwoosh-react-native-plugin'; Pushwoosh.init({ "pw_appid": "__YOUR_APP_ID__" }); Pushwoosh.register(); ``` Где: - `__YOUR_APP_ID__` — это код приложения из Панели управления Pushwoosh. ### 4. Нативная настройка для Android Добавьте файл конфигурации Firebase: 1. Скопируйте ваш файл `google-services.json` в корневой каталог проекта. 2. Установите свойство `googleServicesFile` на путь к вашему файлу `google-services.json` и укажите свойство `package`: ```json title="app.json/app.config.js" "expo": { "name": "sample", "android": { "package": "com.pushwoosh.sample", "googleServicesFile": "./google-services.json" }, "plugins": [ [ "pushwoosh-expo-plugin", { "mode": "development", "ios": { "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__" }, "android": { "apiToken": "__YOUR_DEVICE_API_TOKEN__" } } ] ] } ``` ### 5. Нативная настройка для iOS Установите свойство `bundleIdentifier` для объекта `ios`: ```json title="app.json/app.config.js" "expo": { "name": "sample", "ios": { "bundleIdentifier": "com.pushwoosh.sample" }, "plugins": [ [ "pushwoosh-expo-plugin", { "mode": "development", "ios": { "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__" }, "android": { "apiToken": "__YOUR_DEVICE_API_TOKEN__" } } ] ] } ``` ### 6. Сделайте пребилд приложения Сгенерируйте нативный код и настройте зависимости для каждой платформы, запустив prebuild: ```bash npx expo prebuild ``` ### 7. Запустите проект 1. Соберите и запустите проект: ```bash npx expo run:android ``` ```bash npx expo run:ios ``` 2. Перейдите в Панель управления Pushwoosh и [отправьте push-уведомление](/ru/product/messaging-channels/push-notifications/send-push-notifications/one-time-push). 3. Вы должны увидеть уведомление в приложении. ## Расширенная интеграция На этом этапе вы уже интегрировали SDK и можете отправлять и получать push-уведомления. Теперь давайте рассмотрим основную функциональность. ### Слушатели событий push-уведомлений В Pushwoosh SDK есть два слушателя событий, предназначенных для обработки push-уведомлений: - событие `onPushReceived` срабатывает, когда получено push-уведомление - событие `onPushAccepted` срабатывает, когда пользователь открывает уведомление Вам следует настроить эти слушатели событий сразу после инициализации SDK при запуске приложения: ```typescript import { DeviceEventEmitter } from 'react-native'; import Pushwoosh from 'pushwoosh-react-native-plugin'; class PushwooshNotificationHandler { setupPushListeners(): void { DeviceEventEmitter.addListener("pushReceived", (e) => { console.warn("Push received: " + JSON.stringify(e)); }); DeviceEventEmitter.addListener("pushOpened", (e) => { console.warn("Push opened:" + JSON.stringify(e)); }); } } ``` ### Конфигурация пользователя Фокусируясь на поведении и предпочтениях отдельных пользователей, вы можете доставлять персонализированный контент, что приводит к повышению удовлетворенности и лояльности пользователей. ```typescript import Pushwoosh from 'pushwoosh-react-native-plugin'; class Registration { afterUserLogin(user: User): void { // Set user ID Pushwoosh.setUserId(user.getId()); // Set user email Pushwoosh.setEmails(user.getEmailList()); // Setting additional user information as tags for Pushwoosh Pushwoosh.setTags({ "age": user.getAge(), "name": user.getName(), "last_login": user.getLastLoginDate() }); } } ``` ### Теги Теги (Tags) — это пары ключ-значение, присваиваемые пользователям или устройствам, которые позволяют сегментировать аудиторию на основе атрибутов, таких как предпочтения или поведение, для целевых сообщений. ```typescript import Pushwoosh from 'pushwoosh-react-native-plugin'; class UpdateUser { afterUserUpdateProfile(user: User): void { // Set list of favorite categories Pushwoosh.setTags({ "favorite_categories": user.getFavoriteCategoriesList() }); // Set payment information Pushwoosh.setTags({ "is_subscribed": user.isSubscribed(), "payment_status": user.getPaymentStatus(), "billing_address": user.getBillingAddress() }); } } ``` ### События События (Events) — это конкретные действия пользователя или происшествия в приложении, которые можно отслеживать для анализа поведения и запуска соответствующих сообщений или действий. ```typescript import Pushwoosh from 'pushwoosh-react-native-plugin'; class Registration { // Track login event afterUserLogin(user: User): void { Pushwoosh.postEvent("login", { "name": user.getName(), "last_login": user.getLastLoginDate() }); } // Track purchase event afterUserPurchase(product: Product): void { Pushwoosh.postEvent("purchase", { "product_id": product.getId(), "product_name": product.getName(), "price": product.getPrice(), "quantity": product.getQuantity() }); } } ``` ### Отслеживание доставки сообщений для iOS Вы должны добавить цель Notification Service Extension в ваш проект. Это необходимо для точного отслеживания доставки и таких функций, как Rich Media на iOS. Следуйте [шагам в нативном руководстве](/ru/developer/pushwoosh-sdk/ios-sdk/setting-up-pushwoosh-ios-sdk/basic-integration-guide/#4-message-delivery-tracking), чтобы добавить цель расширения и необходимый код Pushwoosh в него. ### Дополнительные свойства плагина | Свойство
| По умолчанию
| Описание | |-----------------|---------|-------------| | **Свойства iOS** | | | | `Pushwoosh_LOG_LEVEL` | `INFO` | Уровень логирования для iOS. Возможные значения: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` | | **Свойства Android** | | | | `logLevel` | `INFO` | Уровень логирования для Android. Одно из: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` | | `multiNotificationMode`| `true` | Можно изменить на false, если вы хотите отображать пользователю только последнее уведомление | | `icon` | - | Путь к пользовательской иконке уведомления для Android | ## Устранение неполадок Если у вас возникнут какие-либо проблемы в процессе интеграции, пожалуйста, обратитесь к разделу [поддержки и сообщества](/ru/developer/pushwoosh-sdk/support-and-community). ###### FCM registration error: Failed to retrieve token. Is firebase configured correctly? Убедитесь, что свойство `googleServicesFile` вашего Firebase настроено в файле конфигурации Expo, а файл `google-services.json` добавлен в корневой каталог вашего проекта: ```json title="app.json/app.config.js" "expo": { "name": "sample", "android": { "package": "com.pushwoosh.sample", "googleServicesFile": "./google-services.json" }, "plugins": [ [ "pushwoosh-expo-plugin", { "mode": "development", "ios": { "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__" }, "android": { "apiToken": "__YOUR_DEVICE_API_TOKEN__" } } ] ] } ``` ###### TypeError: Cannot read property 'init' of null Вы можете столкнуться с этой ошибкой при попытке запустить приложение на устройстве.\ Чтобы решить проблему, убедитесь, что вы выполнили шаг пребилда. Он генерирует нативный код и настраивает зависимости для каждой платформы. ```bash npx expo prebuild ```