# Базовое руководство по интеграции Cordova SDK

В этом разделе содержится информация о том, как интегрировать Pushwoosh Cordova SDK в ваше приложение.

## Предварительные требования

Для интеграции Pushwoosh Cordova SDK в ваше приложение вам понадобится следующее:

<Aside type="note" title="Требования">
 - [Аккаунт Pushwoosh](https://sso.pushwoosh.com/login).
 - [Проект Pushwoosh](/ru/product/first-steps/start-with-your-project/create-your-project), настроенный в вашем аккаунте.
 - **Для интеграции с iOS:**
    - Платформа iOS, настроенная для отправки push-уведомлений. Мы рекомендуем использовать [конфигурацию на основе токенов](/ru/developer/first-steps/connect-messaging-services/ios-configuration/ios-token-based-configuration/) как самый простой подход.
    - Установите Gateway на `Sandbox` для отправки push-уведомлений в симулятор.
 - **Для интеграции с Android:**
    - [Настроенная платформа Android](/ru/developer/first-steps/connect-messaging-services/android-configuration/android-firebase-configuration)
    - Файл `google-services.json` и `package name` из вашего проекта Firebase.
    - Проект Firebase, подключенный к вашему приложению Android. При необходимости следуйте [руководству по настройке Firebase](https://firebase.google.com/docs/android/setup#manually_add_firebase).
 - Ваш `Pushwoosh Application Code` и [Pushwoosh Device API Token](/ru/developer/api-reference/api-access-token/#device-api-token) из Панели управления Pushwoosh для вашего приложения.
</Aside>

## Шаги интеграции

### 1. Добавьте зависимость Pushwoosh Cordova SDK

Добавьте зависимость Pushwoosh Cordova SDK в ваш проект:

```bash
cordova plugin add pushwoosh-cordova-plugin
```

### 2. Инициализация Cordova SDK

В корневом компоненте вашего файла `index.js` добавьте следующий код в обработчик события `deviceready`. Выполняйте шаги в точном порядке:

```javascript title="index.js"
document.addEventListener('deviceready', function() {
    var pushwoosh = cordova.require("pushwoosh-cordova-plugin.PushNotification");

    // 1. Register notification callbacks before initialization
    document.addEventListener('push-receive', function(event) {
        var notification = event.notification;
        console.log("Push received: " + JSON.stringify(notification));
    });

    document.addEventListener('push-notification', function(event) {
        var notification = event.notification;
        console.log("Push opened: " + JSON.stringify(notification));
    });

    // 2. Initialize Pushwoosh
    pushwoosh.onDeviceReady({
        appid: "__YOUR_APP_ID__"
    });

    // 3. Register the device to receive push notifications
    pushwoosh.registerDevice(
        function(status) {
            var pushToken = status.pushToken;
            // Handle successful registration
        },
        function(status) {
            // Handle registration error
        }
    );
}, false);
```

Где:
- `__YOUR_APP_ID__` — это код приложения из Панели управления Pushwoosh.

<Aside type="caution" title="Порядок инициализации важен">
Последовательность инициализации **должна** точно соответствовать порядку, указанному выше:

1. **Сначала зарегистрируйте обработчики событий** (`push-receive`, `push-notification`)
2. **Затем** вызовите `onDeviceReady()`
3. **Затем** вызовите `registerDevice()`

Изменение этого порядка может вызвать следующие проблемы:

- **Обработчики событий зарегистрированы после `onDeviceReady()`:** Если приложение было запущено нажатием на push-уведомление (холодный старт), `onDeviceReady()` немедленно доставляет полезную нагрузку уведомления о запуске в JavaScript. Если ваши обработчики еще не зарегистрированы в этот момент, **уведомление о запуске будет потеряно** без возможности его восстановить.
- **`registerDevice()` вызван до `onDeviceReady()`:** Нативный SDK может быть еще не настроен должным образом с вашим App ID, что может привести к тому, что регистрация устройства завершится неудачей без уведомления или вернет ошибку.
- **Обработчики событий зарегистрированы после `registerDevice()`:** Любое push-уведомление, которое поступит и будет обработано до того, как ваши обработчики будут установлены, будет отправлено как событие DOM и **проигнорировано**, так как в плагине нет механизма повторной отправки.

Плагин не ставит в очередь и не буферизует пропущенные события на стороне JavaScript. События DOM, инициированные `document.dispatchEvent()`, доставляются только тем обработчикам, которые уже зарегистрированы на момент отправки.
</Aside>


### 3. Нативная настройка для iOS

#### 3.1 Capabilities

Чтобы включить Push-уведомления в вашем проекте, необходимо добавить определенные capabilities (возможности).

В разделе Signing & Capabilities добавьте следующие capabilities:
- `Push Notifications`
- `Background Modes`. После добавления этой возможности, отметьте флажок `Remote notifications`.

Если вы планируете использовать Time Sensitive Notifications (iOS 15+), также добавьте capability `Time Sensitive Notifications`.

#### 3.2 Info.plist

В вашем файле `Runner/Info.plist` установите для ключа `__PUSHWOOSH_DEVICE_API_TOKEN__` значение [Pushwoosh Device API Token](/ru/developer/api-reference/api-access-token/#device-api-token):
```swift title="info.plist"
<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>
```

#### 3.3 Отслеживание доставки сообщений

Вы должны добавить цель 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 в него.

### 4. Нативная настройка для Android

#### 4.1 Установка зависимостей

Убедитесь, что необходимые зависимости и плагины добавлены в ваши скрипты Gradle:

Добавьте плагин Google Services Gradle в зависимости вашего `build.gradle` на уровне проекта:

```groovy title="android/build.gradle"
buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}
```

Примените плагин в файле `build.gradle` на уровне приложения:

```groovy title="app/build.gradle"
apply plugin: 'com.google.gms.google-services'
```

#### 4.2 Добавьте конфигурационный файл Firebase

Поместите файл `google-services.json` в папку `android/app` в директории вашего проекта.

#### 4.3 Добавьте метаданные Pushwoosh

В вашем файле `main/AndroidManifest.xml` добавьте [Pushwoosh Device API Token](/ru/developer/api-reference/api-access-token/#device-api-token) внутрь тега `<application>`:

```xml title="AndroidManifest.xml"
<meta-data android:name="com.pushwoosh.apitoken" android:value="__YOUR_DEVICE_API_TOKEN__" />
```

> **Важно:** Убедитесь, что токен имеет доступ к нужному приложению в вашей Панели управления Pushwoosh. [Узнать больше](/ru/developer/api-reference/api-access-token/#edit-token)

### 5. Запустите проект

1. Соберите и запустите проект.
2. Перейдите в Панель управления Pushwoosh и [отправьте push-уведомление](/ru/product/messaging-channels/push-notifications/send-push-notifications/one-time-push).
3. Вы должны увидеть уведомление в приложении.

## Расширенная интеграция

На этом этапе вы уже интегрировали SDK и можете отправлять и получать push-уведомления. Теперь давайте рассмотрим основную функциональность.

### Обработчики событий push-уведомлений

В Pushwoosh SDK есть два обработчика событий, предназначенных для обработки push-уведомлений:

- событие `push-receive` срабатывает, когда push-уведомление получено, пока приложение находится на переднем плане
- событие `push-notification` срабатывает, когда пользователь открывает уведомление

Эти обработчики событий **должны** быть зарегистрированы **до** вызова `onDeviceReady()`, как показано в [шаге инициализации выше](#2-cordova-sdk-initialization). Вы можете настроить логику обработчика в соответствии с вашими потребностями:

```javascript title="index.js"
// Register before onDeviceReady()
document.addEventListener('push-receive', function(event) {
    var message = event.notification.message;
    var payload = event.notification.userdata;
    console.log("Push received: " + message);
    // Add your custom logic here
});

document.addEventListener('push-notification', function(event) {
    var message = event.notification.message;
    var payload = event.notification.userdata;
    console.log("Push accepted: " + message);
    // Add your custom logic here (e.g., navigate to a specific screen)
});
```

### Конфигурация пользователя

Фокусируясь на поведении и предпочтениях отдельных пользователей, вы можете доставлять персонализированный контент, что приводит к повышению удовлетворенности и лояльности пользователей.

```javascript
class Registration {
  afterUserLogin(user) {

    // Set user ID
    pushwoosh.setUserId(user.getId());
    
    // Setting additional user information as tags for Pushwoosh
    pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}
```

### Теги

Теги — это пары «ключ-значение», присваиваемые пользователям или устройствам, что позволяет сегментировать аудиторию по таким атрибутам, как предпочтения или поведение, для целевых сообщений.

```javascript
class UpdateUser {
  afterUserUpdateProfile(user) {

    // 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()
    });
  }
}
```

### События

События — это определенные действия пользователя или происшествия в приложении, которые можно отслеживать для анализа поведения и запуска соответствующих сообщений или действий.

```javascript
class Registration {

  // Track login event
  afterUserLogin(user) {
    pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Track purchase event
  afterUserPurchase(product) {
    pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}
```

## Устранение неполадок

Если у вас возникнут какие-либо проблемы в процессе интеграции, обратитесь к разделу [поддержки и сообщества](/ru/developer/pushwoosh-sdk/support-and-community).