JavaScript 中的消息通知库让 Web 应用中开发消息通知、提示功能变得更加简单。

然而技术选型却是一个具有挑战性的事情，因为每个库都有自己独特的功能和效果体验。

在本文中，我将给大家详细介绍8个流行的 JS通知库，开发者可以使用它们来改善用户体验，及时收到应用程序的消息通知。

希望这些库方便大家的选择，让消息通知开发变得更加容易。我们现在就开始！

1. SweeAlert

SweetAlert（https://sweetalert.js.org/）是一个华丽的消息通知库，可用于替换 JavaScript 应用程序中的内置警报功能。您可以包括按钮和图标，改变文本的颜色，甚至添加响应用户点击而调整的警报。SweetAlert 使用setTimeout函数来设置警报的持续时间。

SweetAlert 拥有超过 15,000 个GitHub星数和每周超过 50 万的NPM下载量。

特性

• 设置和集成非常简单

• 高度可定制

• 很优秀的文档

• 没有依赖关系

安装

可以从 NPM 或 Yarn 轻松安装 SweetAlert，如下命令所示：

// 使用 NPMnpm i sweetalert2
// 使用 Yarn yarn add sweetalert2

我们还可以在StackBlitz(https://stackblitz.com/edit/angular-ivy-hgertf?file=src/app/app.component.ts)上找到 SweetAlert with Angular 的演示版本。

2. React-Toastify

React-Toastify（https://github.com/fkhadra/react-toastify#readme）是目前最好的 React toast 通知库之一。你可以使用它在 10 秒内将 toasts 添加到应用程序中。另外，它还有一些吸引许多开发人员的惊人功能，包括 RTL 支持、自定义的滑动方向、内置动画类型等。

React-Toastify 有超过 10,500 个GitHub星数和超过 130 万的每周NPM下载量。

特性

• RTL 支持

• 动画支持

• 在 toast 中显示一个 React 组件。

• 滑动关闭

• 可编程方式删除toast

• 可限制同时显示的 toast 数量。

安装方法

我们可以使用 NPM 或 Yarn 轻松安装 React-Toastify，如下所示：

// 使用 NPM npm i react - toastify
// 使用 Yarn yarn add react - toastify

可以在StackBlitz（https://stackblitz.com/edit/js-8qgwga?file=index.js）上找到 React-Toastify 的演示。

3.Toastr

Toastr(https://codeseven.github.io/toastr/)是一个小型 JavaScript toast 通知库，用于非阻塞 Gnome/Growl 通知类。它可移植、易于使用且可扩展，并允许使用 JavaScript 和 HTML5 创建简单的 toasts。

Toastr 拥有超过 11,500 个GitHub星数和超过 185,000 周的NPM下载量。

特征

• 易于使用，且非常轻便。

• 四种内置的 Toast 类型：成功、信息、警告和错误。

• 允许防止重复。

• 可以放在网页的任意位置。

安装

我们可以使用 NPM 或 Yarn 轻松安装 Toastr，如下所示：

// 使用 NPMnpm i toastr
// 使用 Yarn yarn add toastr

可以在StackBlitz（https://stackblitz.com/edit/angular-ivy-ir7rwg?file=src/app/app.component.ts）上找到 Toastr with Angular 的工作演示。

4. Notie

Notie是另一个广泛使用的无依赖性 JavaScript 通知库。

我们可以用它来创建警报、确认提示、输入提示、数据选择提示等。Notie 拥有超过 6,200 个GitHub星数和每周超过 2,000 个NPM下载量。

特征

• 纯 JavaScript，无依赖，用 ES6 编写

• 易于定制

• 可更改颜色以匹配应用的风格

• 允许使用 Sass 文件 (notie.scss) 修改样式

• 字体大小根据屏幕大小自动调整

• 可以放置在网页的任意位置

安装

可以使用 NPM 或 Yarn 轻松安装 Notie，如下所示：

// 使用 NPMnpm i notie
// 使用 Yarnyarn add notie

我们可以在StackBlitz(https://stackblitz.com/edit/angular-ivy-sgqfyv?file=src/app/app.component.ts)上找到 Notie with Angular 的工作演示。

5.Essential JS 2

Essential JS 2(https://www.syncfusion.com/javascript-ui-controls)是一个功能全面的 JavaScript UI 库，它为开发者提供轻量级、模块化和响应式 UI 组件。

它提供多种类型的通知类型，包括消息、alert提示、徽章与进度条等。此外，Essential JS 2 不仅限于通知组件，还有各种其他组件，包括网格、图表、按钮、选项卡等功能。

 Essential JS 2与 Angular、React、Vue 和 Blazor 等人们广泛使用的框架兼容。Essential JS 2 提供了许多自定义选项，允许开发者快速创建原创且引人注目的Web应用程序。

Essential JS 2 目前每周的NPM下载量超过 15,000 次。

特征

• 广泛应用的 UI 组件

• 跨平台兼容性

• 定制化与可访问性良好

• 语言全球化使用方便

• 组件触控支持友好且反应灵敏。

安装

同样，使用 NPM 或 Yarn 轻松安装 Essential JS 2，如下所示：

// 使用 NPM npm i @syncfusion / ej2
// 使用 Yarn yarn add @syncfusion / ej2

我们可以在StackBlitz（https://angular-yqcshx.stackblitz.io/）上找到 Essential JS 2 与 Angular 的工作演示。

6.chakra-ui/alert

Chakra UI Alert(https://chakra-ui.com/docs/components/alert)是一个用于 React 的现代通知库，它提供可访问、可重用和可组合的 React 组件。它同时支持浅色和深色主题，并允许您自定义通知的任何部分以匹配您的应用程序的样式要求。

Chakra UI Alert 拥有超过 30,000 个GitHub星数和超过 400,000 周的NPM下载量。

特征

• 轻松组合组件

• 针对多种颜色模式进行了优化

• 活跃的用户社区

安装

我们可以使用 NPM 或 Yarn 轻松安装 Chakra UI Alert，如下所示：

// 使用 NPM npm i @chakra - ui / alert
// 使用 Yarn yarn add @chakra - ui / alert

可以在StackBlitz上找到使用 React 的 Chakra UI Alert （https://stackblitz.com/edit/react-aaeuuq?file=src/App.js）的工作演示。

7.Vue Toastification

Vue Toastification(https://vue-toastification.maronato.dev/)是一个用于 Vue 应用程序的简单且高度可定制的 JavaScript 通知库。

它允许开发者自定义多个选项，包括通知类型、位置、内容、持续时间和图标等。

Vue Toastification 拥有超过 2,300 个GitHub星数和超过 90,000 周的NPM下载量。

特征

• 内置 Nuxt 支持和 RTL 支持

• 完全用 TypeScript 编写，具有完整的数据类型支持

• 轻松使用主题和动画

• 以编程方式更新和删除 toasts

• 使用生命周期挂钩自定义 toast 过滤和队列

安装

可以使用 NPM 或 Yarn 轻松安装 Vue Toastification，如下所示：

// 使用 NPM npm i vue - toastification
// 使用 Yarn yarn add vue - toastification

可以在StackBlitz（https://stackblitz.com/edit/node-z3ceh7?file=src/App.vue）上找到 Vue Toastification with React 的工作演示。

8. push.js

Push.js是开始使用 JavaScript 桌面通知的最快方式之一。

它允许开发人员向用户发送个性化通知，并支持通过所有现代级浏览器（如 Chrome、Firefox 和 Safari）发送推送通知。当用户的浏览器不支持最新的 API 时，Push 还能通过恢复到早期的实现来充当跨浏览器的解决方案。

Push 拥有超过 8,600 个GitHub star 和每周超过 21,000 个NPM下载量。

特征

• 可以处理所有基本的推送通知

• 轻量级

• 优良的自定义选项

安装

我们可以使用 NPM 或 Yarn 轻松安装 Push.js，如下所示：

// 使用 NPM npm i push.js
// 使用 Yarn yarn add push.js

我们可以在StackBlitz（https://stackblitz.com/edit/js-rjemlf?file=index.js）上找到 Push.js 的工作演示。

请你注意，如果你未授予浏览器通知权限，上面的示例可能无法在设备上运行。

小结

在本文中，我讨论了八个 JavaScript 通知库及其独特的功能。希望这个浓缩的清单能帮助你为自己的项目选择最好的通知库。

祝各位同学编码愉快！

作者：场长