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

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

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

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

Требования

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

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

1. Установите плагин

Установите плагин Pushwoosh Expo с помощью Expo CLI

expo install pushwoosh-expo-plugin

Установите Pushwoosh React Native SDK

npm install pushwoosh-react-native-plugin --save

2. Установите свойства плагина

Добавьте плагин в начало массива плагинов с необходимыми свойствами:

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.

3. Инициализируйте Pushwoosh

В корневом компоненте вашего приложения:

• Импортируйте плагин pushwoosh-react-native-plugin.
• Инициализируйте Pushwoosh SDK.
• Вызовите register() в вашей логике инициализации для регистрации push-уведомлений.

index.tsx

import Pushwoosh from 'pushwoosh-react-native-plugin';

Pushwoosh.init({
    "pw_appid": "__YOUR_APP_ID__" ,
    "project_number": "__YOUR_FCM_SENDER_ID__"
});

Pushwoosh.register();

Где:

• __YOUR_APP_ID__ — это код приложения из Панели управления Pushwoosh.
• __YOUR_FCM_SENDER_ID__ — это номер проекта Firebase из консоли Firebase.

4. Настройка Android Native

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

1. Скопируйте файл google-services.json в корневой каталог проекта.
2. Установите свойство googleServicesFile на путь к вашему google-services.json и укажите свойство package:

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 Native

Установите свойство bundleIdentifier для объекта ios:

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:

npx expo prebuild

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

1. Соберите и запустите проект:

Android

npx expo run:android

iOS

npx expo run:ios

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

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

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

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

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

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

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

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));
    });

  }
}

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

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

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

Теги

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

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

События

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

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.

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

Дополнительные свойства плагина

Property	Default	Description
Свойства 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

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

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

Ошибка регистрации FCM: Не удалось получить токен. Правильно ли настроен Firebase?

Убедитесь, что свойство googleServicesFile вашего Firebase настроено в файле конфигурации Expo, а файл google-services.json добавлен в корневой каталог вашего проекта:

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: Невозможно прочитать свойство ‘init’ из null

Вы можете столкнуться с этой ошибкой при попытке запустить приложение на устройстве. Чтобы решить эту проблему, убедитесь, что вы выполнили шаг предварительной сборки (prebuild). Он генерирует нативный код и настраивает зависимости для каждой платформы.

npx expo prebuild