如何在 React Native (Android) 中实现推送通知

有没有想过我们从安装的应用程序收到的通知？或者 Swiggy 或 Zomato 如何通过其创意通知激发我们在凌晨 3 点点餐？ ？

让我们深入了解通知的概念！

什么是通知？

通知是应用程序发送的消息或警报，用于通知用户有关更新、事件或操作的信息，通常在应用程序界面之外传递。

现在可以有两种类型的通知，如下所示 -

推送通知

推送通知是当应用程序未在前台主动运行时从服务器发送到应用程序的消息或警报。它们主要用于通过发送更新、提醒或个性化内容来保持用户的参与度。推送通知是通过操作系统服务传递的，例如适用于 iOS 的 Apple 推送通知服务 (APN) 或适用于 Android 的 Firebase 云消息传递 (FCM)。

推送通知的工作原理：

1. 注册：安装或首次打开应用程序时，应用程序会从操作系统的推送通知服务（APN 或 FCM）请求唯一的设备令牌。
2. 服务器通信：应用程序将此令牌发送到应用程序的后端服务器，该服务器存储它以供将来使用。
3. 发送通知：服务器使用设备令牌将通知有效负载（包含标题、消息、操作按钮等）发送到推送通知服务（APNs/FCM）。
4. 传递：推送通知服务将消息传递到相应的设备，即使应用程序未运行。

应用内通知

应用内通知是在用户主动使用应用程序时向用户显示的消息或警报。与推送通知不同，这些通知不需要服务器干预，而是在应用程序本身内触发，通常是用户操作或应用程序事件的结果。

应用内通知的工作原理：

1. 事件触发器：当应用内发生特定事件（例如用户达到里程碑或需要注意的功能）时，应用可以触发应用内通知。
2. 显示：通知在应用程序的 UI 中显示为横幅、模式或弹出窗口，指导用户或告知他们有关事件的信息。
3. 自定义逻辑：应用内通知由应用程序的代码直接处理，并且可以根据应用程序的内部状态或逻辑动态显示。

---

React Native android 应用程序中的实现：

现在我们了解了通知及其类型，是时候在您自己的 React Native 应用程序中实现该功能了。本指南仅用于在 React 原生 Android 应用程序中实现推送通知，如果您想要 iOS 或应用程序内通知，请写下评论，我肯定会发布！

首先，我们将使用名为 OneSignal 的第三方服务。我最近发现了这个平台，并对他们提供的服务感到震惊。

关于OneSignal：

OneSignal 是一种推送通知服务，使应用程序开发人员能够跨各种平台（包括移动应用程序、网站和电子邮件）向用户发送有针对性的通知。它支持推送、应用内和 Web 通知，提供分段、自动化、A/B 测试和实时分析等功能。 OneSignal 广泛用于通过提供易于集成的发送个性化消息的解决方案来提高用户参与度和保留率。他们的免费套餐包括每月 10,000 次免费电子邮件发送、无限移动推送发送、旅程工作流程、GDPR 合规性、A/B 测试

---

回到指南，因为我们已经知道推送通知需要通过 FCM（Firebase 云消息传递）进行服务器端处理，因此需要遵循以下几个步骤：

1. 设置 Firebase 项目（如果您已有 Firebase 项目，请忽略前两个步骤）：

   • 转到 firebase 控制台并登录您的帐户。
   • 从这里创建一个项目并按照步骤操作
   • 创建项目后，从侧边栏转到项目设置
   • 从栏中导航到服务帐户，它应该如下所示
   • 单击生成新的私钥，这将下载一个 json 文件，小心地将其存储在安全的地方，我们在设置 OneSignal 时将需要它。

2. 设置 OneSignal

   • 前往 OneSignal 并创建一个帐户。
   • 创建帐户后，完成设置步骤并创建组织，现在，您将看到用于添加应用程序的页面。
   • 在此页面中提供您的应用程序名称，并为我们的案例选择 Google Android (FCM)。 然后点击配置您的平台
   • 现在您将被重定向到此页面，我们将在其中使用在 Firebase 配置期间下载的服务帐户 json 文件 上传 json，然后保存并继续
   • 在下一页选择 React Native/Expo 作为目标 SDK，然后再次保存并继续
   • 在下一个屏幕中，您将获得应用程序 ID，这是一个机密 ID，使用此 ID 任何人都可以在您的应用程序中触发通知，因此请小心这个秘密。

我们已经完成了 firebase 和 OneSignal 中的设置，现在剩下的唯一任务是一些代码咖啡

将 OneSignal 添加到您的应用程序并进行配置

• 第 1 步：首先运行此命令将 OneSignal 添加到您的应用程序

                       npm i react-native-onesignal

• 第 2 步：在您的 index.js 或 App.tsx 或 App.js（以项目根目录为准）中，导入 OneSignal

             import { OneSignal } from 'react-native-onesignal';

并且您已添加此代码片段来初始化 OneSignal

                    OneSignal.initialize('YOUR_APP_ID');

您可以将其包装在 useEffect 挂钩中，以便与 OneSignal 无缝集成和连接。

这将使用 OneSignal 的唯一 ID 来初始化设备，您可以在侧边栏的订阅中进行检查。每个初始化的设备都将使用这个唯一的 OneSignal ID 进行标识，如果您已经有用户拥有自己的唯一 ID，您也可以使用以下代码片段手动设置它：

                         OneSignal.login(userId)

用户成功订阅后，会在仪表板中显示如下

现在您可能会遇到一些 OneSignal 未正确使用的问题或一些严重错误，因此您可以按照以下部分来帮助我解决这些问题。

• 第 3 步：在 androidappbuild.gradle 中添加以下代码片段

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

• 第4步：在android中为推送通知提供必要的权限，在androidappsrcmainAndroidManifest.xml中添加

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

就在应用程序标签之前。互联网权限是可选的，但因为它可能默认启用。

繁荣？涵盖了实现推送通知的所有步骤，您可以从 OneSignal 仪表板本身发送测试通知。

自己尝试一下，如果有任何疑问，可以在下面评论。关注获取更多详细攻略！

参考文献：
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

编码愉快！?‍?

以上是如何在 React Native (Android) 中实现推送通知的详细内容。更多信息请关注PHP中文网其他相关文章！