如何在 ReactJS 中添加推送通知功能？

在我们的 React 应用程序中添加 推送通知功能 可以显著提高用户参与度，即使用户没有积极使用您的应用，也能及时向其传递更新、警报或消息。推送通知 通常用于发送关于新内容、促销优惠或状态变化的更新。

在本文中，我们将学习如何使用 npm 包 React-push-notification 在 React 应用程序中添加推送通知功能。

推送通知的基本流程

在深入实现之前，了解 推送通知 的工作原理非常重要：

• Service Worker（服务工作线程）：Web 应用程序中推送通知的骨干。它在后台运行，即使应用程序未打开也能处理通知。
• Push Subscription（推送订阅）：用户需要订阅推送通知，这会生成一个 PushSubscription 对象。
• Push API：允许您向用户的浏览器发送推送消息。
• Notification API：在收到推送消息后向用户显示通知。

添加推送通知功能的步骤

步骤 1： 使用以下命令创建 React 应用程序：

npx create-react-app project
cd project

步骤 2： 安装所需的依赖项。

npm i react-push-notification

项目结构

!imageFolder Structure

依赖项

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

方法 1： 我们将创建一个名为 push notification 的简单按钮，该按钮触发 onclick 函数 buttonOnClick，它调用 addNotification 方法。在这里，我将标题添加为 ‘Warning‘ 并将 native 设置为 true。
示例： 在 App.js 文件中编写以下代码

JavaScript


CODEBLOCK_42fda25a

要启动应用程序，请运行以下命令。

npm start

输出结果

!imageAdd Push Notification Feature In ReactJS

方法 2： 我们可以进一步创建具有不同颜色和样式的自定义通知。
示例： 在 App.js 文件中编写以下代码

JavaScript


CODEBLOCK_197c9a21

输出结果：

!imageAdd Push Notification Feature In ReactJS