Skip to main content

如何在使用Sendbird Chat的React Native应用中实现推送通知

Taha
Taha Saghir
Solutions Engineer
  • Tutorial Type: Basics
  • Reading Time: 10 min
  • Building Time: 90 min
Chat SDK v4 2x

Swift, Kotlin, and TypeScript SDKs

Build in-app chat, calls, and live streaming

引言:什么是推送通知,为什么它们很重要?

推送通知是应用程序向其用户发送的自动、可点击的弹出消息。当设备空闲或在后台运行应用程序时,消息会立即传递到设备。推送通知很重要,因为它们:

  • 提供与用户活动或兴趣相关的重要信息、提醒和新闻
  • 提升移动应用互动度指标
  • 展示特色内容
  • 推动有针对性的相关流量,从而提高转化率
  • 通过个性化、适时且相关的内容打造无缝的用户体验

我们的移动推送通知指南移动推送通知包含您需要了解的有关推送通知、其优点以及如何使用它们的所有信息。< /span>

值得注意的是,美国智能手机用户平均每天收到45 条推送通知RubyGarage 表示,与未实施推送通知的企业相比,实施推送通知的组织的客户保留率高出 3 倍,参与度高出 88%。虽然推送通知选择加入和点击率因行业、位置、类型而存在变化 > 以及许多其他因素,很明显,实施推送通知的理由很充分。

本教程提供了实现 React Native 推送通知的分步说明。但首先,让我们看一下一些先决条件。

前提条件

  1. 创建Sendbird 帐户
  2. 确保Sendbird Chat在您的 React Native 应用中正常运行。

请记住,当消息从应用程序发送到 Sendbird 服务器时(通过 JavaScript 聊天 SDK),服务器会与流式细胞仪。然后,FCM 向 Android 设备发送推送通知,或者与 APN 通信以向 iOS 设备发送推送通知。

React Native应用的推送通知

可以使用 Sendbird Chat SDK for JavaScript 将推送通知发送给混合移动应用程序用户(Android 和 iOS)。目前,JavaScript SDK 的推送通知功能仅与 React Native 兼容。本教程详细介绍了如何使用 Firebase Cloud Messaging (FCM) 和 Sendbird Chat SDK 在 React Native 应用中启用推送通知。

在深入了解实现细节之前,我们先讨论一下FCM 消息。 FCM消息有两种类型:通知消息和数据消息。根据 Firebase 文档,“通知消息具有一组预定义的用户可见键和自定义键值对的可选数据负载。”数据消息仅包含用户定义的键值对。 Sendbird 使用数据消息,允许客户端应用创建由这些自定义键值对组成的自定义消息负载。

Web 应用程序不支持推送通知。如果您需要为Web应用程序实现推送通知,我们建议使用Webhook事件为Web应用程序实现推送通知。

开始之前,请确保您有权访问Firebase 控制台。让我们深入了解一下! 💻

第1步:在Sendbird控制面板注册FCM凭证和APNs证书

Sendbird 服务器需要 Android 的 FCM 服务器密钥和 iOS 的 APNs 证书来传递推送通知。

按照本教程的步骤 1 和 2教程注册 FCM 凭据,并按照 docs 将 APNs 证书注册到 Sendbird 仪表板。

第2步:安装React Native Firebase模块并添加配置文件

React Native Firebase 是官方推荐的软件包集合,它为 Android 和 iOS 应用上的所有 Firebase 服务提供了 React Native 支持。按照官方文档中的说明在 React Native 项目中配置适用于 Android 的 FCM 和适用于 iOS 的 APN。在此步骤结束时,您应该已将 Android 和 iOS 应用添加到 Firebase 项目,并将相应的配置文件添加到 React Native 项目。

请参阅 React Native Firebase通知页面,详细了解如何显示和处理来自 FCM 的通知。

第3步:向Sendbird服务器注册推送令牌

要将通知消息发送到特定客户端应用程序,FCM 需要由客户端应用程序实例颁发的 Android 设备的 FCM 注册令牌和 iOS 设备的 APNs 设备令牌。因此,Sendbird 服务器还需要每个客户端应用程序实例的注册令牌才能代表您向 FCM 发送通知请求。 Chat SDK 提供了一个接口来向 Sendbird 服务器注册和取消注册这两种类型的令牌。

下面的代码片段显示了设备令牌注册。

注册的推送令牌显示在仪表板中的“用户 > ”下。用户 ID >聊天':

聊天
聊天

第4步:接收推送通知消息

注册设备令牌后,无论 iOS 或 Android 平台如何,客户端应用程序实例都可以接收和处理 FCM 通知消息。请参阅 React Native Firebase 文档的用法页面,了解有关实现的更多信息。

适用于 JavaScript 的 Sendbird Chat SDK 不会自动检测您的应用程序的状态,因此 setForegroundState() 和 需要显式调用Sendbird SDK提供的setBackgroundState()方法。

查看 React Native Firebase 文档,了解可用于接收消息的事件处理程序。下面的代码片段显示了接收到的 FCM 消息的解析。

注意:频道是仅适用于 Android 的概念,用于分类并允许用户控制如何在其设备上处理通知。

从FCM数据消息中解析出的数据对象包含一组键值项,如下面的JSON代码所示。

推送通知故障排除技巧

排除推送通知的故障可能很复杂;以下是执行此操作的一些技巧。

  1. 为了让开发人员更轻松地调试推送通知并排除故障,我们构建了一个您可能会觉得有用的测试工具。请参阅此教程了解如何使用该工具,您可以通过Sendbird 仪表板访问该工具
  2. 查看这份全面的指南,以解决 Android 聊天推送通知问题。
  3. 如果您想调试故障情况,请参阅FCM 错误代码。

结论

就这样结束了!您现在知道如何使用 Sendbird Chat 发送 React Native 应用程序的推送通知。根据本教程和文档的指导,您将立即能够发送及时、相关且引人入胜的推送通知!

我们随时为您提供帮助; 如果您有任何问题、意见或疑虑,请联系我们

快乐的推送通知建设! 💻