高级编程JavaScript。Notifications消息通知

- 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!');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/624810.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React 18 中的并发性

并发性是我们在 React 18 发布后获得的重大成就之一。由于此功能是完全选择加入的,并且 React 18 向后兼容以前的版本,因此您甚至可能没有注意到新功能。那么并发性是什么、它是如何工作的以及它如何改进您的应用程序的呢? 什么是并发 并发…

360度评估的应用场景和评估内容

360度评估是一种多元化的评估工具,它从多个角度获取对个体绩效、能力和行为的全面反馈。这种评估方法不仅涵盖了传统的上级评价,还包括同级、下级、自我评价以及客户或外部利益相关者的反馈。 一、360度评估的应用场景 员工绩效评估:360度评…

【PostgreSQL内核学习(二十二)—— 执行器(ExecutePlan)】

执行器(InitPlan) 概述ExecutePlan 函数ExecProcNode 函数 总结 声明:本文的部分内容参考了他人的文章。在编写过程中,我们尊重他人的知识产权和学术成果,力求遵循合理使用原则,并在适用的情况下注明引用来…

超详细!4小时开发一个SpringBoot+vue前后端分离博客项目!!

超详细!4小时开发一个SpringBootvue前后端分离博客项目!! 前后端分离项目 文章总体分为2大部分,Java后端接口和vue前端页面,比较长,因为不想分开发布,真正想你4小时学会,哈哈。 先…

【自学笔记】01Java基础-07面向对象基础-04接口与内部类详解

记录学习Java基础中有关接口类和内部类的知识。 1 接口 interface 关键字用于定义接口类,接口类是一系列方法的声明,一般只有方法的特征没有方法的实现,因此可以被不同的类接入实现,而这些实现可以具有不同的行为(功…

Graham扫描凸包算法

凸包(Convex Hull)是包含给定点集合的最小凸多边形。凸包算法有多种实现方法,其中包括基于递增极角排序、Graham扫描、Jarvis步进法等。下面,我将提供一个简单的凸包算法实现,基于Graham扫描算法。 Graham扫描算法是一…

多级缓存架构(一)项目初始化

文章目录 一、项目克隆二、数据库准备三、项目工程准备 一、项目克隆 克隆此项目到本地 https://github.com/Xiamu-ssr/MultiCache 来到start目录下,分别有以下文件夹 docker:docker相关文件item-service:springboot项目 二、数据库准备 …

Ncast盈可视高清智能录播系统busiFacade RCE漏洞(CVE-2024-0305)

产品介绍 Ncast盈可视高清智能录播系统是一套新进的音视频录制和播放系统,旨在提供高质量,高清定制的录播功能。 漏洞描述 广州盈可视电子科技有限公司的高清智能录播系统存在信息泄露漏洞(CVE-2024-0305),攻击者可通过该漏洞,…

Sectigo的DV通配符https

Sectigo是近些年发展比较快速的CA认证机构,为了提升审核效率,在全国成立了审核机构,亚太审核中心的成立加快了Sectigo旗下的https证书的审核速度。Sectigo的https证书可以为网站安全提供有力支持,从而保护网站信息安全。今天就随S…

群狼调研(长沙神秘顾客公司)开展某品牌家纺神秘顾客调研

为评估某品牌家纺的产品品质、设计、服务、价格等情况。群狼调研(长沙娱乐场所神秘顾客调查)受客户委托在全国1500家门店进行神秘顾客调研。本次调研神秘顾客全部由群狼调研从累计的16年资源库中筛选出的有经验的人员,以普通消费者的身份进店…

3、深入解析Redis Cluster集群运维与核心原理

在今天的大规模分布式系统中,Redis Cluster已经成为了许多企业选择的分布式缓存方案之一。了解Redis Cluster的运维及核心原理对于确保系统的高可用性和性能至关重要。本文将深入探讨Redis Cluster集群的运维细节和核心原理,以帮助读者更好地理解和优化R…

常见的HTTP接口超时问题出现原因及解决办法

HTTP接口超时问题是指在HTTP请求发送到服务器后,由于等待服务器响应的时间超过了预设的超时时间,导致请求被中断。以下是可能导致HTTP接口超时问题的原因和解决方法: 网络延迟或不稳定:网络延迟或不稳定可能导致请求在传输过程中…

【STM32】STM32学习笔记-MPU6050简介(32)

00. 目录 文章目录 00. 目录01. MPU6050简介02. MPU6050参数03. MPU6050硬件电路04. MPU6050框图05. MPU6050常用寄存器06. 附录 01. MPU6050简介 •MPU6050是一个6轴姿态传感器,可以测量芯片自身X、Y、Z轴的加速度、角速度参数,通过数据融合&#xff0…

网站监测工具的极与极,Site24x7 与百川云

今天我们聊聊我用 Site24x7 的感受。对于有网站监测有需求的站长们来说,Site24x7 确实是个很强大的应用。但是它与百川云网站监测完全不一样,百川云网站监测是适合用中小微企业的交互极简的saas 应用,Site24x7 完全是另一个极端,适…

datax关系数据库插件设计和实现解释

背景 DataX是一个异构数据源离线同步工具,致力于实现包括关系型数据库(MySQL、Oracle等)、HDFS、Hive、ODPS、HBase、FTP等各种异构数据源之间稳定高效的数据同步功能。解决异构数据源同步问题,DataX将复杂的网状的同步链路变成了星型数据链路&#xff0…

勒索家族瞄准制造业,亚信安全发布《勒索家族和勒索事件监控报告》

本周态势快速感知 本周(2024年第二期)全球共监测到勒索事件37起,事件数量持续下降,降至近半年最低值。 lockbit3.0仍然是影响最严重的勒索家族;akira和bianlian恶意家族也是两个活动频繁的恶意家族,需要注…

红帽认证 | 红帽认证分几级?红帽认证的证书含金量高吗?

红帽认证是IT领域中备受关注的一种认证,它由红帽公司推出,旨在证明持证者在Linux操作系统方面的技能和知识。 那么,红帽认证分几级?红帽认证的证书含金量高吗?下面将详细介绍红帽认证的级别和证书含金量。 01 红帽认证…

KubeSphere 在 vsleem 的落地实践

作者:方忠,苏州威视通智能科技有限公司技术经理,开源技术爱好者,长期活跃于 dromara 开源社区并参与贡献。 公司介绍 公司简介 苏州威视通智能科技有限公司,是一家全球领先的全景 AI 平台提供商,结合极致…

1.15作业

使用计数型信号量设计:生产者和消费者模型 总结今天学习的API函数,写出函数参数和返回值的意思,并且说明函数功能 创建队列 osMessageQueueId_t osMessageQueueNew (uint32_t msg_count, uint32_t msg_si…

GBASE日期计算

在进行数据迁移的过程中(DB2–>GBASE)涉及到日期计算函数的改写: 原式子如下: SELECT TIMESTAMP(1900-01-01) INT(LEFT(MAX(DB_TIMESTAMP),3)) YEAR INT(SUBSTR(MAX(DB_TIMESTAMP),4,3)) -1) DAY INT(SUBSTR(MAX(DB_TIMEST…