javascript基础学习系列四百九十一：Notifications API

最新推荐文章于 2025-06-25 18:39:17 发布

完美句号

最新推荐文章于 2025-06-25 18:39:17 发布

阅读量911

点赞数 16

CC 4.0 BY-SA版权

文章标签： javascript 学习开发语言数据结构算法软件工程架构

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/136269014

本文详细阐述了NotificationsAPI在JavaScript中的作用，包括其与alert对话框的区别，通知的显示与隐藏、权限请求，以及如何利用PageVisibilityAPI监测页面可见性。此外，还介绍了通知的生命周期回调机制，有助于开发者创建交互式通知应用。

Notifications API 用于向用户显示通知。无论从哪个角度看，这里的通知都很类似 alert()对话框: 都使用 JavaScript API 触发页面外部的浏览器行为，而且都允许页面处理用户与对话框或通知弹层的交互。不过，通知提供更灵活的自定义能力。
Notifications API 在 Service Worker 中非常有用。渐进 Web 应用(PWA，Progressive Web Application) 通过触发通知可以在页面不活跃时向用户显示消息，看起来就像原生应用。

通知权限

Notifications API

Notifications API 有被滥用的可能，因此默认会开启两项安全措施: 20  通知只能在运行在安全上下文的代码中被触发;
 通知必须按照每个源的原则明确得到用户允许。

用户授权显示通知是通过浏览器内部的一个对话框完成的。除非用户没有明确给出允许或拒绝的答复，否则这个权限请求对每个域只会出现一次。浏览器会记住用户的选择，如果被拒绝则无法重来。
页面可以使用全局对象 Notification 向用户请求通知权限。这个对象有一个 requestPemission() 方法，该方法返回一个期约，用户在授权对话框上执行操作后这个期约会解决。

   Notification.requestPermission()
        .then((permission) => {
console.log('User responded to permission request:', permission); });

“granted"值意味着用户明确授权了显示通知的权限。除此之外的其他值意味着显示通知会静默失败。如果用户拒绝授权，这个值就是"denied”。一旦拒绝，就无法通过编程方式挽回，因为不可能再触发授权提示。

显示和隐藏通知

Notification 构造函数用于创建和显示通知。最简单的通知形式是只显示一个标题，这个标题内容可以作为第一个参数传给 Notification 构造函数。以下面这种方式调用 Notification，应该会立即显示通知:
new Notification(‘Title text!’);
可以通过 options 参数对通知进行自定义，包括设置通知的主体、图片和振动等:

new Notification('Title text!', { body: 'Body text!',
image: 'path/to/image.png', vibrate: true
});

调用这个构造函数返回的 Notification 对象的 close()方法可以关闭显示的通知。下面的例子展示了显示通知后 1000 毫秒再关闭它:

const n = new Notification('I will close in 1000ms'); setTimeout(() => n.close(), 1000);

通知生命周期回调

通知并非只用于显示文本字符串，也可用于实现交互。Notifications API 提供了 4 个用于添加回调的生命周期方法:
 onshow 在通知显示时触发;
 onclick 在通知被点击时触发;
 onclose 在通知消失或通过 close()关闭时触发;
 onerror 在发生错误阻止通知显示时触发。下面的代码将每个生命周期事件都通过日志打印了出来:

const n = new Notification('foo');
n.onshow = () => console.log('Notification was shown!');
n.onclick = () => console.log('Notification was clicked!'); n.onclose = () => console.log('Notification was closed!');
n.onerror = () => console.log('Notification experienced an error!');

Page Visibility API

Web 开发中一个常见的问题是开发者不知道用户什么时候真正在使用页面。如果页面被最小化或隐藏在其他标签页后面，那么轮询服务器或更新动画等功能可能就没有必要了。Page Visibility API 旨在为开发者提供页面对用户是否可见的信息。
这个 API 本身非常简单，由 3 部分构成。
 document.visibilityState 值，表示下面 4 种状态之一。
 页面在后台标签页或浏览器中最小化了。
 页面在前台标签页中。
 实际页面隐藏了，但对页面的预览是可见的(例如在 Windows 7 上，用户鼠标移到任务栏图标
上会显示网页预览)。
 页面在屏外预渲染。
 visibilitychange 事件，该事件会在文档从隐藏变可见(或反之)时触发。
 document.hidden 布尔值，表示页面是否隐藏。这可能意味着页面在后台标签页或浏览器中被最小化了。这个值是为了向后兼容才继续被浏览器支持的，应该优先使用 document.visibilityState
检测页面可见性。
要想在页面从可见变为隐藏或从隐藏变为可见时得到通知，需要监听 visibilitychange 事件。
document.visibilityState 的值是以下三个字符串之一:  “hidden”
 “visible”
 “prerender”