高级编程JavaScript。Notifications消息通知

发布时间:2024年01月15日

- Notifications?

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

- 通知权限

Notifications API 有被滥用的可能,因此默认会开启两项安全措施:
? 通知只能在运行在安全上下文的代码中被触发;
? 通知必须按照每个源的原则明确得到用户允许。
????????用户授权显示通知是通过浏览器内部的一个对话框完成的。除非用户没有明确给出允许或拒绝的答 复,否则这个权限请求对每个域只会出现一次。浏览器会记住用户的选择,如果被拒绝则无法重来。 页面可以使用全局对象 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!');
文章来源:https://blog.csdn.net/m0_73358221/article/details/135570679
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。