ES9 中的通知 API 是一个能够帮助前端开发者在页面上添加通知功能的工具。在实际的应用中，通知功能能够给用户带来更好的体验。本文将分享 ES9 中通知 API 的使用方法以及如何增加页面通知功能。
通知 API 简介
通知 API 是一种 Web API，被设计用于在页面中提供弹出窗口、通知条以及类似的消息提示功能。该功能的实现主要依赖 Web Notification API。
通知 API 能够通过浏览器进行发送通知，开发者需要向 API 提供一些必要的信息，如通知标题、内容、图标等。API 在接受到这些信息后，就可以将其形成通知并进行发送。
如何使用通知 API
首先，我们需要检查浏览器是否支持通知 API。代码如下：
-- ----------------- -- -------- - ---------------- ------- -
接下来，我们需要获取用户的许可。用户在接收到通知前，需要在浏览器中授权允许通知。代码如下：
---------------------------------------------------------- -
-- ----------- --- ---------- -
-- -------
--- ------------ - --- -----------------------
- ---- -- ----------- --- --------- -
-- -------
- ---- -
-- ------------
-
---如果用户同意了通知，则可以使用以下代码创建一个通知：
--- ------------ - --- ------------------ - ----- ----- ----- --- ---- ---
通知创建成功后，用户将在桌面上收到通知。在桌面通知栏中，用户可以看到标题和内容，并且可以通过点击通知来聚焦到页面。
如何增加页面通知功能
如果在页面中使用通知 API，通知会在页面内部弹出。此方法可以方便地展示类似于弹窗等消息提示功能。具体实现方法如下：
首先，我们需要替换之前的 Notification 对象。代码如下：
--- ------------ - ------------------- -- ---------------------- -- --------------------------
接下来，我们需要定义一个函数来创建通知。在该函数中，我们需要判断浏览器是否支持通知：如果支持，则创建一个通知；如果不支持，则给出相应提示。代码如下：
-------- ------------------------- -------- -
-- ------------- -- ------------ -- ------------ -- ----------------------- --- ---------- -
--- ----- - --- ------------------- ---------
- ---- -- ------------- -- ------------ -- ------------ -- ----------------------- --- --------- -
--------------------------------------- ------------ -
-- ----------- --- ---------- -
--- ----- - --- ------------------- ---------
-
---
- ---- -- -------------- -
-------------------
-
-最后，我们可以使用以下代码调用函数来创建通知：
------------------------ -------- ----- ------- --- -------
总结
通知 API 提供了一个方便易用的通知工具，用于在页面中添加通知功能。在实际的应用中，通知功能能够提高用户的体验感。本文介绍了通知 API 的使用方法，并给出了一个页面通知功能的例子，希望本文能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652d33307d4982a6ebe9ce07