随着 web 技术的不断进步，越来越多的应用开始转向浏览器端进行开发。而浏览器提供了很多的 API，可以在浏览器内部实现很多的功能，其中浏览器通知是一种非常便捷的功能，可以用来向用户展示必要的信息，如新邮件的通知、提醒用户完成任务等。
React 是一个非常流行的前端框架，提供了很多的组件以方便我们进行开发。在本教程中，我们将介绍一个 npm 包 react-browser-notifications，它可以帮助我们快速地在浏览器中实现通知功能。本文将从安装 npm 包开始，一步步介绍如何使用 react-browser-notifications。
安装
我们通过 npm 来安装 react-browser-notifications：
npm install react-browser-notifications
使用
在使用 react-browser-notifications 前，我们需要在浏览器中获得通知的权限。在 react 的生命周期函数中，我们可以通过 Notification API 来获取用户的权限。代码如下：
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------- -
-- ------------------------ --- ---------- -
------------------------------------------------ -- -
-- ----------- --- ---------- -
-----------------------
- ---- -
-----------------------
-
---
- ---- -
-----------------------
-
-
-------- -
------ ---------- ------------
-
-接下来，我们就可以使用 react-browser-notifications 包来实现通知功能。代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------------- ---- ------------------------------
----- --- ------- --------------- -
------------------- -
-- ------------------- -- -------------------- -
-------------------------------------
-------
-
-- --------------------- -
--------------
- ---- -
---------------------------
-
-
-------- -
------ -
-----
---------------------
------------ ------- ------------- -----
-------- -- ------- - ---
--
------- --------------------------------------------
------
---------
------
--
-
-上述代码中，我们在既有组件的基础上，添加了 BrowserNotifications 组件，并在组件的 onRef 属性上保存了实例。在显示通知时，我们调用组件实例的 show 方法即可。
配置项
react-browser-notifications 提供了一些可配置的选项来修改通知的标题、图标等。代码如下：
-- -------------------- ---- ------- --------------------- ------------ ------- ------------- ----- ------------------------ ------------ -------------- ----------- -- ---------------------- ----------------------- -- ---------------------- ---------- -- --------------------- ----------- -- ---------------------- ----------- -- -------------------- -------- -- ------- - --- --
上述代码中，我们可以通过 icon 属性设置通知图标，通过 tag 属性设置通知标签，通过 timeout 属性设置通知消失的时间（单位为毫秒），通过 onClick、onRequestPermission、onShow 等属性设置回调函数，在通知被点击、请求通知权限、展示通知时触发。我们也可以通过 onRef 属性来保存组件实例，以便其他组件可以调用它的方法。
总结
在本文中，我们介绍了如何使用 npm 包 react-browser-notifications 来实现在浏览器中展示通知的功能。在使用前，我们需要在浏览器中申请通知权限，并通过组件提供的方法来控制通知显示。如果你已将 web 应用转向浏览器端，那么这个功能对你来说是必不可少的。
完整示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------------- ---- ------------------------------
----- --- ------- --------------- -
------------------- -
-- ------------------------ --- ---------- -
------------------------------------------------ -- -
-- ----------- --- ---------- -
-----------------------
- ---- -
-----------------------
-
---
- ---- -
-----------------------
-
-
------------------- -
-- ------------------- -- -------------------- -
-------------------------------------
-------
-
-- --------------------- -
--------------
- ---- -
---------------------------
-
-
-------- -
------ -
-----
---------------------
------------ ------- ------------- -----
------------------------
------------
--------------
----------- -- ----------------------
----------------------- -- ----------------------
---------- -- ---------------------
----------- -- ----------------------
----------- -- --------------------
-------- -- ------- - ---
--
------- --------------------------------------------
------
---------
------
--
-
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731581e8991b448e9414