React Native SDK 基本集成指南

本节包含有关如何将 Pushwoosh React Native SDK 集成到您的应用程序中的信息。

前提条件

要将 Pushwoosh React Native SDK 集成到您的应用程序中，您需要以下内容：

要求

• 一个 Pushwoosh 账户。
• 在您的账户中设置一个 Pushwoosh 项目。
• 对于 iOS 集成：
  • 一个配置为发送推送通知的 iOS 平台。我们建议使用 基于令牌的身份验证配置 作为最简单的方法。
  • 将 Gateway 设置为 Sandbox 以向模拟器发送推送。
• 对于 Android 集成：
  • 一个 已配置的 Android 平台
  • 您的 Firebase 项目中的 project number（也称为 Sender ID）、google-services.json 文件和 package name。
  • 一个连接到您的 Android 应用程序的 Firebase 项目。如果需要，请遵循 Firebase 设置指南。
• 您的应用程序的 Pushwoosh 控制面板中的 Pushwoosh Application Code 和 Pushwoosh Device API Token。

集成步骤

1. 添加 Pushwoosh React Native SDK 依赖

将 Pushwoosh React Native SDK 依赖项添加到您的项目中：

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

2. React Native SDK 初始化

在您的 index.js 文件的根组件中：

• 导入 pushwoosh-react-native-plugin。
• 初始化 Pushwoosh SDK。
• 在您的初始化逻辑中调用 register() 以注册推送通知。

index.js

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

AppRegistry.registerComponent(appName, () => App);

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 项目编号。

3. iOS 原生设置

3.1 功能 (Capabilities)

要在您的项目中启用推送通知，您需要添加某些功能。

在 Signing & Capabilities 部分，添加以下功能：

• Push Notifications
• Background Modes。添加此功能后，勾选 Remote notifications 复选框。

如果您打算使用 Time Sensitive Notifications (iOS 15+)，也请添加 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 目标。这对于准确的送达跟踪和 iOS 上的 Rich Media 等功能至关重要。

遵循 原生指南的步骤 来添加扩展目标和其中必要的 Pushwoosh 代码。

3.4 为 iOS React Native 项目安装依赖项

要为 iOS React Native 项目安装依赖项，请在终端中导航到 ios 文件夹并运行：

pod install --repo-update

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 中，在 <application> 标签内添加 Pushwoosh Device API Token：

AndroidManifest.xml

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

重要提示： 确保在您的 Pushwoosh 控制面板中授予令牌访问正确应用程序的权限。了解更多

5. 运行项目

1. 构建并运行项目。
2. 转到 Pushwoosh 控制面板并 发送推送通知。
3. 您应该会在应用程序中看到通知。

扩展集成

在此阶段，您已经集成了 SDK，可以发送和接收推送通知。现在，让我们探索核心功能。

推送通知事件监听器

在 Pushwoosh SDK 中，有两个事件监听器，用于处理推送通知：

• 当收到推送通知时，会触发 pushReceived 事件
• 当用户打开通知时，会触发 pushOpened 事件

您应该在应用程序启动时，在 SDK 初始化之后立即设置这些事件监听器：

import {DeviceEventEmitter} from 'react-native'
import Pushwoosh from 'pushwoosh-react-native-plugin';

class PushwooshNotificationHandler {
  setupPushListeners() {

    DeviceEventEmitter.addListener('pushReceived', (e) => {
      console.warn("Push received: " + JSON.stringify(e));
    });

    DeviceEventEmitter.addListener('pushOpened', (e) => {
      console.warn("Push accepted: " + JSON.stringify(e));
    });

  }
}

用户配置

通过关注个人用户行为和偏好，您可以提供个性化内容，从而提高用户满意度和忠诚度。

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

class Registration {
  afterUserLogin(user: User) {

    // Set user ID
    Pushwoosh.setUserId(user.getId());

    // Set user email
    Pushwoosh.setEmails(user.getEmailList());

    // Set user SMS number
    Pushwoosh.registerSMSNumber(user.getPhoneNumber());

    // Set user WhatsApp number
    Pushwoosh.registerWhatsappNumber(user.getWhatsAppNumber());

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

标签 (Tags)

标签是分配给用户或设备的键值对，允许根据偏好或行为等属性进行细分，从而实现有针对性的消息传递。

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

class UpdateUser {
  afterUserUpdateProfile(user: 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()
    });
  }
}

事件 (Events)

事件是应用程序中可以跟踪的特定用户操作或发生，用于分析行为并触发相应的消息或操作。

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

class Registration {

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

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

故障排除

如果您在集成过程中遇到任何问题，请参阅 支持和社区 部分。