前言
Web 通知是一种通过浏览器向用户展示推送消息的方式。对于一些需要及时提醒用户的 Web 应用，尤其是 PWA 应用来说，Web 通知非常实用。但是，要手动实现 Web 通知功能的代码会比较冗长繁琐，使用现成的 npm 包可以让我们更快速地完成该功能。
本文介绍的是一个可以在前端使用的 npm 包——boundless-utils-web-notification 的使用方法。
什么是 boundless-utils-web-notification
boundless-utils-web-notification 是一个用于帮助前端实现 Web 通知的 npm 包。该包提供了一些方法，并使用了 Web Notification API。使用该 npm 包可以让我们在前端更加便捷地实现 Web 通知功能。
如何使用 boundless-utils-web-notification
安装 boundless-utils-web-notification：
--- ------- --------------------------------
使用前，需要检查当前浏览器是否支持 Web Notification API。可以使用如下代码进行检测：
-- ----------------- -- -------- - ----------- ------- ---- --- ------- ------- --------------- -
创建通知
------ ------------ ---- ----------------------------------- ----- ------- - - ------ ------- ----- ------- ----- ------ --- ------ ---- ------ ------ - ----- ------------ - --- ---------------------- --------------------
以上代码用来创建并弹出一个 Web 通知。其中 title 和 body 属性为必选字段，分别代表通知的标题和内容。icon 和 tag 属性为可选字段，分别代表通知的图标和标记。
创建提示点击按钮：
----- ------ - ---------------------------------
------------------ - ----- --------------
-------------------------------- -------- -- -
----- ------------ - --- --------------
------ -------
----- -------
---
--------------------
---以上代码创建了一个按钮，并在按钮点击时创建并展示一个 Web 通知。
事件监听
boundless-utils-web-notification 抛出了两个事件，在创建通知时可以监听这两个事件：
show: 当通知展示时触发close: 当通知被关闭时触发
具体用法如下：
----- ------- - - ------ ------- ----- ------- - ----- ------------ - --- ---------------------- ----------------------- -------- -- - ------------------------- --- ---- --------- --- ------------------------ -------- -- - ------------------------- --- ---- ---------- --- --------------------
以上代码在创建通知时监听了 show 和 close 事件，并输出了相应的日志。
取消通知
要取消一个显示中的 Web 通知，可以使用 close 方法：
---------------------
该方法会将正在显示的 Web 通知关闭。
示例代码
------ ------------ ---- -----------------------------------
-- ----------------- -- -------- -
----------- ------- ---- --- ------- ------- ---------------
-
----- ------ - ---------------------------------
------------------ - ----- --------------
-------------------------------- -------- -- -
----- ------- - -
------ -------
----- -------
----- ---
---- ---
-
----- ------------ - --- ----------------------
----------------------- -------- -- -
------------------------- --- ---- ---------
---
------------------------ -------- -- -
------------------------- --- ---- ----------
---
--------------------
---
----------------------------------结语
boundless-utils-web-notification 能够帮助我们更加便捷地实现 Web 通知功能。但是，Web 通知功能在某些情况下可能会被用户感知为骚扰，需要在使用时慎重考虑。最后，还是希望读者在将 Web 通知应用到实际项目中时，能够更加细致地考虑用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fc881e8991b448dd445