南京网站改版,企业展厅设计网,做网站制作利润有多少,完成网站集约化建设前言 在很多场景下#xff0c;需要一种通知的交互方式来提醒用户#xff0c;传统方式下可以在页面实现一个 Dialog#xff0c;或通过修改网页的 title 来实现消息的通知。然而传统的实现存在着一定的不足#xff0c;在网页最小化的情况下#xff0c;无法查看任何通知需要一种通知的交互方式来提醒用户传统方式下可以在页面实现一个 Dialog或通过修改网页的 title 来实现消息的通知。然而传统的实现存在着一定的不足在网页最小化的情况下无法查看任何通知导致用户无法及时获取通知信息。 给力的 W3C 推出了 Notifications API专注于 WEB 的通知。 Notifications Notifications API 的 Notification 界面用于配置和显示用户的桌面通知。 这些通知的外观和特定功能因平台而异但通常它们提供了一种向用户异步提供信息的方法。 此 API 在 WebWorker 环境下也可以使用。 注意此 API 必须运行在 https 环境下非 https 环境无法授权。 流程 构造器 语法 var myNotification new Notification(title, options);参数 titleDOMString定义通知的标题该标题在触发时将显示在通知窗口的顶部。options actionsNotificationActions 数组表示在显示通知时用户可用的操作。 这些是用户可以选择的选项以便在通知本身的上下文中对该动作起作用。 操作的名称将发送到服务工作者通知处理程序以使其知道用户已选择的操作。数组的成员应该是对象文字。它可能包含以下值注意此属性只在 serviceWorker 环境下有效。click 时可以通过 event.action 来获取 actionDOMString显示在通知上的 action 标志。titleDOMString显示在通知上的 action 标题。iconUSVString显示在 action 上的 icon URL。 badge包含图像 URL 的U SVString用于在没有足够空间显示通知本身时表示通知例如 Android Notification Bar。 在 Android 设备上徽章应能容纳高达4倍分辨率的设备大约 96 x 96 像素并且图像将自动屏蔽。body表示要在通知中显示的额外内容的字符串。data希望与通知关联的任意数据。这可以是任何数据类型通event.currentTarget.data 来获取。dir显示通知的方向。 它默认为 auto它只采用浏览器的语言设置行为但你可以通过设置 ltr 和 rtl 的值来覆盖该行为尽管大多数浏览器似乎忽略这些设置。iconUSVString包含要在通知中显示的图标的URL。lang指定通知中使用的 lang。此字符串必须是有效的 BCP 47 语言标记。renotifyBoolean指定在新通知替换旧通知后是否应通知用户。 默认值为false表示不会通知他们。requirInteraction表示通知应保持活动状态直到用户单击或关闭它而不是自动关闭。 默认值为 false。必须带 tag 才有效果。silent无论设备设置如何都应该发出一个布尔值指定通知是否应该是静音即不应发出声音或振动。 默认值为 false这意味着它不会是静默的。tag给定通知的 ID允许您在必要时使用脚本查找替换或删除通知。timestampDOMTimeStamp 表示创建通知的时间。 它可用于指示通知实际的时间。 例如这可能是在过去当通知用于因设备离线而无法立即传递的消息时或将来用于即将开始的会议时间。vibrate与通知显示一起运行的振动模式。 振动模式可以是具有少至一个成员的阵列。 值是以毫秒为单位的时间其中偶数索引0,2,4等表示振动多长时间奇数索引表示暂停多长时间。 例如[300,100,400] 将振动 300ms暂停 100ms然后振动 400ms。 属性 静态属性 permissionNotification.permission 获取当前用户对通知的权限。值 granted用户已授权显示系统通知。denied用户已拒绝显示系统通知。default用户未做决定程序表现为拒绝。 实例属性含义同构造器中的 option actionsbadgebodydatadirlangtagiconimagerenotifyrequireInteractionsilenttimestampvibrate 事件 onclick 点击显示通知框时触发的事件。 Notification.onclick function(event) { ... };可以通过 preventDefault() 阻止焦点显示到 notification 打开的 tab 上。 通过 event.currentTarget 来获取属性。 onclose 通知关闭时触发此事件。 必须调用 Notification.close() 才能触发此事件。 Notification.onclose function() { ... };onerror 用作错误事件的事件处理程序。发生错误时将调用指定的函数。如果为null则没有错误处理程序生效。 Notification.onerror EventListener;onshow 通知出现的时候触发此事件。 Notification.onshow function() { ... };方法 静态方法 requestPermission()请求通知权限。返回 Promise类型为 Notification.permission。 当前 permission 为 default 时出现授权通知 注意在 PC 中当出现授权通知时如果不做任何选择而是点击右上角的关闭x连续三次这种操作后系统会自动设置为 denied。 当前 permission 为 granted 时直接返回 Promise执行 then 后的代码。后续不需要在申请权限。 当前 permission 为 denied 时直接返回 Promise执行 catch 后面的代码。后续一直是拒绝状态不再弹出授权框。此时 serviceWorker pushManager 不可用订阅会抛出错误。此状态下只能通过用户自己去修改权限。 实例方法 close()Notification 实例调用关闭通知触发 onclose 事件。 实例 点击通知 打开指定页面 Notification.requestPermission().then(() {var n new Notification(天气预报, {body: 今天天气晴朗详情请点击~,icon: https://img.alicdn.com/tfs/TB1XPvwUVzqK1RjSZFvXXcB7VXa-1024-1024.png,requireInteraction: true,data: {nav: https://baidu.com}});n.onclick event {n.close();if(event.currentTarget.data.nav) {window.open(event.currentTarget.data.nav);}}; }).catch(() {alert(通知权限已禁止请设置打开权限); })通知按钮交互 actions 必须在 serviceWorker 中使用。 navigator.serviceWorker.ready.then(swReg {Notification.requestPermission().then(() {swReg.showNotification(好友请求, {body: 美女向你打招呼~,icon: https://img.alicdn.com/tfs/TB1qyPtU3HqK1RjSZFEXXcGMXXa-640-859.png,requireInteraction: true,actions: [{action: yes,title: 加好友,}, {action: no,title: 拒绝}]});}) })sw 环境处理代码 self.addEventListener(notificationclick, function(event) {console.log(notificationclick, event);event.notification.close();if(event.action yes) {// ***} else if(event.action no) {// xxx} });兼容性 博客名称王乐平博客 CSDN博客地址http://blog.csdn.net/lecepin 本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。