使

使用 OneSignal 在 ReactJS 中推送通知

2025-06-04

使用 OneSignal 在 ReactJS 中推送通知

在本教程中，您将学习如何通过使用 OneSignal 将推送通知和订阅集成到您的 ReactJS 应用程序中来与应用程序的用户进行通信。

本教程涵盖的主题

  • ReactJS
  • 推送通知
  • OneSignal 段
  • 观众
  • 订阅
  • One Signal 的 SDK

在我们开始之前，定义推送通知是什么很重要。

什么是推送通知？

推送通知是可点击的弹出消息，无论用户使用哪种设备或浏览器，都会出现在用户的浏览器中。订阅者无论身处浏览器的哪个位置，即使网站或应用未运行，仍会收到这些消息。

浏览器推送通知与应用内通知不同，因为应用内通知仅在移动设备上的现有应用程序触发时才会显示；而浏览器推送通知则可以通过任何设备上的浏览器触发，只要用户订阅了通知接收功能。它是一种网站与其最终用户之间即时、自动、直接沟通的模式。

是时候让我们亲自动手了！！！🎊

在本教程中，我们将使用 OneSignal 发送推送通知并处理订阅。

OneSignal 是客户参与领域的市场领导者，为移动 + 网络推送、电子邮件、短信和应用内消息提供支持。

我们要做的第一件事是在OneSignal中创建一个帐户

1）创建帐户后，您将创建一个新的应用程序

OneSignal 反应

2) 创建应用程序时，您可以随意命名。请确保在组织下拉菜单中选择了“无组织”选项。最后，点击“Web Push”，然后点击“下一步”。

OneSignal 反应

3) 通过输入网站名称和网站 URL 来配置您的 Web Push，然后单击“保存”。

笔记

-请记住，您的应用程序必须托管在服务器上才能使用推送通知。如果您想快速轻松地部署您的网站，请遵循这个2 分钟教程。

-您可以输入默认的 URL 图标，但这是一个选项，不是强制性的。

OneSignal

4）下载 SDK 文件并将其保存在您计算机中能记住的位置，因为我们稍后会使用它们。

您正在下载的 .zip 文件包含 2 个文件。这些是 OneSignal 提供的 Service Worker。要了解有关 Service Worker 的更多信息，请阅读本文。

请勿关闭配置页面。我们很快就会返回。

将 OneSignal 集成到你的 ReactJS 应用中

请随意克隆具有 React 应用程序基本结构的 repo，我们将在其中集成 OneSignal，或者按照本教程中给出的步骤将 OneSignal 集成到您自己的 React 应用程序中。

Github 仓库

https://github.com/devpato/onesignal-demo

-初始状态分支（INIT）
-最终代码分支（MAIN）

5) 在 React 项目内部，您要做的第一件事是将下载的服务工作者文件添加到您的PUBLIC文件夹中。

您应该添加 2 个文件：

  • OneSignalSDKUpdaterWorker.js
  • OneSignalSDKWorker.js

OneSignal 反应

6) 在同一个文件夹 (PUBLIC) 中，您有一个名为Index.html的文件。转到该文件并将以下代码行粘贴到您的<head></head>标签内。



<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
Enter fullscreen mode Exit fullscreen mode

您的文件看起来应该是这样的：



<head>
.
.
.
  <title>One Signal - React</title>
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
</head>
Enter fullscreen mode Exit fullscreen mode

7）打开位于SRC文件夹内的 App.js 文件并粘贴代码



  window.OneSignal = window.OneSignal || [];
  const OneSignal = window.OneSignal;
Enter fullscreen mode Exit fullscreen mode

感谢我们在index.html文件中添加的 SDK，此代码将允许我们访问注入到应用程序中的 OneSignal 对象。

8）在同一个文件中，useEffect添加以下代码：



OneSignal.push(()=> {
      OneSignal.init(
        {
          appId: "1a9bbed2-9294-4192-a736-01b461cb389a", //STEP 9
          promptOptions: {
            slidedown: {
              enabled: true,
              actionMessage: "We'd like to show you notifications for the latest news and updates about the following categories.",
              acceptButtonText: "OMG YEEEEESS!",
              cancelButtonText: "NAHHH",
              categories: {
                  tags: [
                      {
                          tag: "react",
                          label: "ReactJS",
                      },
                      {
                        tag: "angular",
                        label: "Angular",
                      },
                      {
                        tag: "vue",
                        label: "VueJS",
                      },
                      {
                        tag: "js",
                        label: "JavaScript",
                      }
                  ]
              }     
          } 
        },
        welcomeNotification: {
          "title": "One Signal",
          "message": "Thanks for subscribing!",
        } 
      },
        //Automatically subscribe to the new_app_version tag
        OneSignal.sendTag("new_app_version", "new_app_version", tagsSent => {
          // Callback called when tag has finished sending
          console.log('new_app_version TAG SENT', tagsSent);
        })
      );
    });
Enter fullscreen mode Exit fullscreen mode

让我们讨论一下前面的代码。OneSignal 对象只能初始化一次.init()。在这个例子中，我们在 App 组件加载后立即触发初始化。

该属性将保存与我们向用户显示的提示消息promptOptions相关的所有信息。

slidedown 属性是指从页面顶部向下滑动的提示类型。此类提示有多个属性可供您自定义。我们来看看其中一些属性：

-actionMessage：这是提示中显示的主要消息。

-acceptButtonText：提示内的接受按钮的文本。

-cancelButtonText：提示内的取消按钮的文本。

OneSignal 反应

categories：该属性接受一个标签数组。“类别下拉列表”的工作方式与常规“幻灯片提示”类似，但它还允许订阅者选择加入或退出设置为数据标签的通知类别。

替代文本

WelcomeNotification：在我们点击提示内的接受按钮后，以及用户允许应用程序中的通知后，显示应用程序内通知。

最后，在上面提供的代码的底部，您将看到以下代码：



OneSignal.sendTag("new_app_version", "new_app_version", tagsSent => {
   console.log('new_app_version TAG SENT', tagsSent);
})
Enter fullscreen mode Exit fullscreen mode

sendTags会向 OneSignal 发送一个标签，指定用户所属的标签。我们可以使用这些标签来定位用户，例如为营销活动创建细分。sendTag 的妙处在于，您可以在应用的其他部分使用此方法，而无需任何提示。例如，您只需点击按钮即可使用。

9) 现在，让我们回到 OneSignal 网站的配置页面。进入后，你需要复制“将代码添加到网站”部分中的 appId。你的 app ID 对于每个应用都是唯一的。如果你尝试使用我的 app ID，则无法正常工作。

OneSignal

复制 appId 后，返回 ReactJS 应用程序内的 App.js 文件，并在 OneSignal 对象内部将复制的 appId 分配给 appId 属性。

10）现在构建您的应用程序并将其部署到您的服务器。

好耶！代码部分已经完成了！

11) 导航到您的应用网站。您应该会看到以下内容：

OneSignal

-单击 OneSignal 提示上的“允许”

在 OneSignal 提示上单击“允许”后，我们将看到此浏览器消息

OneSignal

单击“允许”，您将看到应用内（welcomeNotification）

OneSignal 反应

OneSignal平台

12）让我们回到 OneSignal 网站。我们将创建一个新的细分受众群，以针对特定用户开展营销活动。

在网站顶部导航栏上，点击“受众”部分。进入该部分后，点击蓝色的“新建细分”按钮。

OneSignal

将出现如下的模态框

OneSignal

输入您想要的细分名称，然后单击“用户标签”。

OneSignal 反应

创建用户细分规则。完成后，点击蓝色按钮“创建细分”。

好耶！您已经正式创建了您的第一个细分。

是时候测试我们的应用程序了！

13) 我们将使用 OneSignal 创建第一个推送通知。导航到“消息”，然后点击蓝色按钮“新推送”。

OneSignal 反应

在“受众”部分，选择“发送到特定细分”。删除“订阅用户”细分，并添加您刚刚创建的细分。

OneSignal 反应

对于“消息”部分，输入您希望推送通知具有的标题、消息和图标。

OneSignal 反应

最后，在“计划”部分选择“立即开始发送”和“立即发送”，然后单击蓝色按钮“确认”

OneSignal 反应

发送之前请检查您的消息，然后单击“发送消息”，然后看看奇迹发生：）

OneSignal 反应

您将收到来自 OneSignal 的第一个推送通知！

OneSignal

结论

OneSignal 是一款出色的工具，可与应用程序用户互动。OneSignal 是一款出色的沟通工具。它不仅允许您发送推送通知，还能定位您想要互动的特定用户群。OneSignal 拥有一个强大的仪表盘，您可以在其中跟踪用户如何与推送通知或 OneSignal 内部用于与用户沟通的任何其他工具（例如短信、电子邮件等）进行互动。我曾使用过其他技术发送推送通知，但在我看来，OneSignal 是最容易集成到您网站中的。您几乎无需任何编程经验，即可将其集成到常规的 HTML/CSS/JS 网站中。

资源

https://vwo.com/push-notifications/
https://documentation.onesignal.com/docs

文章来源：https://dev.to/devpato/push-notifications-in-reactjs-with-onesignal-5bon
Devto 翻译
PREV
如何使用 Vanilla JS 创建拖放界面
NEXT
用表情符号解释 JavaScript 数组方法