admin管理员组文章数量:1566665
一:介绍:Notifications API 允许网页或应用程序在系统级别发送在页面外部显示的通知;这样即使应用程序空闲或在后台,Web 应用程序也会向用户发送信息
二:使用场景:在做一些交互式页面时,如果切换到浏览器其他页面,或者是缩小了浏览器等等,都可能导致忽略了该关注的页面有新的消息或回调,所以需要有比较友好的提醒方式(例如有个消息弹窗提示),基于浏览器的弹窗提示,而不是基于打开的某个页面。
三:兼容性
此项功能仅在一些支持的浏览器的安全上下文(HTTPS)中可用。
浏览器兼容性如下:
附详细链接: "Notification" | Can I use... Support tables for HTML5, CSS3, etcNotification"Notification" | Can I use... Support tables for HTML5, CSS3, etc
具体使用:我们根据业务需求,可以监听某个事件或者消息,当收到消息时,调用如下方法:
具体使用步骤:
1、向用户发起权限请求,浏览器需要统一收到通知。
权限操作有三种状态:granted、denied、default。
2、调用 Notification API 进行推送消息,常用属性及api如下:
title: 一定会被显示的通知标题
options: 可选,一个被允许用来设置通知的对象,包含一下属性:
dir: 文字的方向,它的值可以是auto(自动),ltr(从左到右),rtl(从右到左)
lang:指定通知中所使用的文语言
body:通知中额外显示的字符串
tag:赋予通知一个ID,以便必要时对通知进行刷新,替换和移除
icon:一个图片的url,将被用于显示通知的图标
该通知有四个回调方法
onshow: 在通知展示的时候调用
onclose: 在通知关闭的时候调用
onclick: 在通知点击的时候调用
onerror: 在通知出错的时候调用
最终效果:
this.creatNotify(title,{body: content,sticky: true}) // title为标题,{}为option配置项
creatNotify(title,options) {
if (Notification.permission === "granted") { // 用户权限允许接收通知
this.notify(title,options)
} else if (Notification.permission === "default") {
Notification.requestPermission().then( res => { // 向用户发起请求接收通知
if (res === "granted") {
this.notify(title,options)
}
})
}
},
notify($title,$options) {
let notification = new Notification($title,$options)
notification.onshow = (e) => {}
notification.onclose = (e) => {}
notification.onclick = e => {
console.log(window.location);
window.focus()
notification.close()
}
}
本文标签: 浏览器桌面功能通知Notification
版权声明:本文标题:浏览器调起桌面通知功能 Notification 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1724928507a998204.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论