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

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

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

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

expo install pushwoosh-expo-plugin

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

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

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

{
  "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.

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

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

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 Console.

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

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

  "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__"
        }
      }
    ]
  ]
}

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

  "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__"
        }
      }
    ]
  ]
}

Сгенерируйте нативный код и настройте зависимости для каждой платформы, выполнив prebuild:

npx expo prebuild

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

npx expo run:android

npx expo run:ios

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

На этом этапе вы уже интегрировали SDK и можете отправлять и получать 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()
    });
  }
}

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

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

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

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

"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__"
        }
      }
    ]
  ]
}

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

npx expo prebuild