Capacitor SDK: Руководство по базовой интеграции

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

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

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

Требования

• Аккаунт Pushwoosh.
• Проект Pushwoosh, настроенный в вашем аккаунте.
• Для интеграции с iOS:
  • Платформа iOS, настроенная для отправки push-уведомлений. Мы рекомендуем использовать конфигурацию на основе токенов аутентификации как самый простой подход.
  • Установите Gateway в режим Sandbox для отправки push-уведомлений в симулятор.
• Для интеграции с Android:
  • Настроенная платформа Android
  • Файл google-services.json и package name из вашего проекта Firebase.
  • Проект Firebase, подключенный к вашему Android-приложению. При необходимости следуйте руководству по настройке Firebase.
• Ваш Pushwoosh Application Code и Pushwoosh Device API Token из Панели управления Pushwoosh для вашего приложения.

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

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

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

npm install pushwoosh-capacitor-plugin

Синхронизируйте конфигурацию Capacitor:

npx cap sync

2. Инициализация Capacitor SDK

В вашем основном JavaScript-файле импортируйте и инициализируйте Pushwoosh SDK:

index.js

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

// Инициализируем SDK
Pushwoosh.onDeviceReady({
    appid: "__YOUR_APP_CODE__"
});

// Регистрируемся для получения push-уведомлений
Pushwoosh.registerDevice()
    .then(result => {
        console.log("Push token:", result.pushToken);
        // Обрабатываем успешную регистрацию
    })
    .catch(error => {
        console.error("Failed to register device:", error);
        // Обрабатываем ошибку регистрации
    });

Где:

• __YOUR_APP_CODE__ — это код приложения из Панели управления Pushwoosh.

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

3.1 Capabilities

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

В разделе Signing & Capabilities добавьте следующие capabilities:

• Push Notifications
• Background Modes. После добавления этой capability отметьте флажок 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:

info.plist

<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

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

Вы должны добавить таргет Notification Service Extension в ваш проект. Это необходимо для точного отслеживания доставки и таких функций, как Rich Media на iOS.

Следуйте шагам из руководства по нативной интеграции, чтобы добавить таргет расширения и необходимый код Pushwoosh в него.

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

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

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

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

android/build.gradle

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

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

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 внутрь тега <application>:

AndroidManifest.xml

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

Важно: Убедитесь, что токену предоставлен доступ к нужному приложению в вашей Панели управления Pushwoosh. Узнать больше

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

1. Соберите и запустите проект.
2. Перейдите в Панель управления Pushwoosh и отправьте push-уведомление.
3. Вы должны увидеть уведомление в приложении.

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

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

Слушатели событий push-уведомлений

В Pushwoosh Capacitor SDK есть два callback-метода для обработки push-уведомлений:

• pushReceivedCallback срабатывает при получении push-уведомления
• pushOpenedCallback срабатывает, когда пользователь открывает уведомление

Вам следует настроить эти колбэки сразу после инициализации SDK:

index.js

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

// Настраиваем колбэк получения push-уведомления
await Pushwoosh.pushReceivedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process received notification:", err);
    } else {
        console.log("Push received:", JSON.stringify(notification));
        // Обрабатываем полученное уведомление
    }
});

// Настраиваем колбэк открытия push-уведомления
await Pushwoosh.pushOpenedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process opened notification:", err);
    } else {
        console.log("Push opened:", JSON.stringify(notification));
        // Обрабатываем открытое уведомление
    }
});

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

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

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class Registration {
  async afterUserLogin(user) {

    // Устанавливаем User ID
    Pushwoosh.setUserId(user.getId);

    // Устанавливаем дополнительную информацию о пользователе в виде тегов для Pushwoosh
    await Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

Теги

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

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class UpdateUser {
 async afterUserUpdateProfile(user) {

    // Устанавливаем список избранных категорий
    await Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Устанавливаем платежную информацию
    await Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

События

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

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class Registration {

  // Отслеживаем событие входа
  afterUserLogin(user) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Отслеживаем событие покупки
  afterUserPurchase(product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

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

Если у вас возникнут какие-либо проблемы в процессе интеграции, обратитесь к разделу поддержки и сообщества.