html5:notification(浏览器通知)
一、notification简介
Web Notifications是HTML5 的一个特性,目前我知道的有谷歌浏览器和windows edge对它进行了支持,用于向用户配置和显示桌面通知。
二、notification方法
2.1静态方法
这些方法仅在 Notification 对象中有效。
Notification.requestPermission()
用于当前页面想用户申请显示通知的权限。这个方法只能被用户行为调用(比如:onclick 事件),并且不能被其他的方式调用。
2.2实例方法
这些方法仅在 Notification 实例或其 prototype 中有效。
1,Notification.close()
用于关闭通知。
Notification 对象继承自 EventTarget 接口。
2,EventTarget.addEventListener()
Register an event handler of a specific event type on the EventTarget.
3,EventTarget.removeEventListener()
Removes an event listener from the EventTarget.
4,EventTarget.dispatchEvent()
Dispatch an event to this EventTarget.
三、notification举例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue"></script><style>body{position: relative;}.notification {width: 200px;height: 50px;padding: 20px;line-height: 50px;text-align: center;background: #008800;border-radius: 5px;font-size: 30px;position: absolute;left: 45%;}</style></head><body><div class="notification" @click="notifyMe()">notification</div></body><script type="text/javascript">var app = new Vue({el: '.notification',data: {},methods: {notifyMe() {// 先检查浏览器是否支持if(!("Notification" in window)) {alert("This browser does not support desktop notification");}// 检查用户是否同意接受通知else if(Notification.permission === "granted") {// If it's okay let's create a notificationvar notification = new Notification("你好snowball:", { dir: "auto", //auto(自动), ltr(从左到右), or rtl(从右到左)lang: "zh", //指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。tag: "testTag", //赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG", //提示时候的图标body: "今天是个好天气" // 一个图片的URL,将被用于显示通知的图标。}); }// 否则我们需要向用户获取权限else if(Notification.permission !== 'denied') {Notification.requestPermission(function(permission) {// 如果用户同意,就可以向他们发送通知if(permission === "granted") {var notification = new Notification("你好snowball:", { dir: "auto", //auto(自动), ltr(从左到右), or rtl(从右到左)lang: "zh", //指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。tag: "testTag", //赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG", //提示时候的图标body: "今天是个好天气" // 一个图片的URL,将被用于显示通知的图标。}); }});}// 最后,如果执行到这里,说明用户已经拒绝对相关通知进行授权// 出于尊重,我们不应该再打扰他们了}}})</script></html>
四、取消允许
chrome:浏览器设置-->内容设置-->通知-->允许-->点击删除某个网站。
截图:
4.1
4.2
4.3
4.4
4.5
兼容:
五、个人体会
目前只是实现了浏览器端的notification,如果再写个接口,从接口中调取数据,在boss后台做信息管理与是否显示这样就非常棒了。
六、参考资料
Notification - Web API 接口参考 | MDN
注:本文转载自本人2018年博客 ,欢迎交流指正javascript - notification(浏览器通知) - 个人文章 - SegmentFault 思否
html5:notification(浏览器通知)相关推荐
- html5桌面通知自动关闭时间,H5 notification浏览器桌面通知
Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...
- H5 notification浏览器桌面通知
Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...
- [html] html5的Notification桌面通知如何请求权限?
[html] html5的Notification桌面通知如何请求权限? Notification.requestPermission(callback); 个人简介 我是歌谣,欢迎和大家一起交流前后 ...
- html5的消息通知
这里介绍一个HTML5的notification demo: <!DOCTYPE html> <html><head><meta charset=" ...
- html5 桌面提醒参数,[HTML5]Notification桌面提醒功能
桌面提醒的介绍 桌面通知功能能够让浏览器即使是最小化状态也能够将消息通知给用户.这和WebIM是最为天然的结合.弹出来的内容只能是文本,暂不支持HTML. Notification桌面提醒功能的好处 ...
- html5 桌面提醒 例子,HTML5 Notification(桌面提醒)功能使用实例
一.HTML5 Notification 简介HTML5 Notification ,即桌面通知.目前浏览器依然是一个严格的沙盒工作模式,这种模式把浏览器和桌面的通信隔离开.Notification可 ...
- 浏览器通知,可配合socket
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>浏览器 ...
- 简易实用的Web Notification桌面通知
Web Notification桌面通知 项目需要,要利用google的notification实现新消息桌面提醒功能,之前研究了一下H5的Web Notification发现很简单,项目上线好久忘截 ...
- Android状态栏语言,Android实现3种Notification(状态栏通知)
Android实现3种Notification(状态栏通知) 点击标题下「安卓干货铺」可快速关注 Notification,是一种具有全局效果的通知,可以在系统的通知栏中显示.当 APP 向系统发出通 ...
最新文章
- 二分类任务:确定一个人是否年收入超过5万美元
- SAP RETAIL 分配表功能的使用
- 【agc019F】Yes or No
- 二叉树的前序中序后序递归查找,深度,广度搜索C++实现(VS2017)
- java鼠标经过时变色_将鼠标悬停在标签上时,鼠标指针会变为手形
- 神器!微软发布 Python 的 JIT 编译器:Pyjion!
- 各种说明方法的答题格式_高中化学:选择题答题方法与知识点总结,让你轻松秒杀各种难题...
- 揭开SAP Customer Management for S/4HANA的神秘面纱
- 初中信息技术python教案_初中信息技术优质课教案 python程序设计开发第二课 第5课变量 教案...
- 我真out了,高端人士都这样玩儿?
- Android RecyclerView、ListView实现单选列表的优雅之路.
- SpringBoot2.1.5 (21)---使用 devtools 热部署
- 五个 SQL 查询性能测试题,只有 40% 及格率,你敢来挑战吗?| 原力计划
- Axure教程-苹果X母版制作
- 遗传算法(三)——适应度与选择
- 产品需求文档怎样编写
- 2023年天津仁爱学院专升本化学工程与工艺对口专业限制目录
- 解析HTTPS加密原理
- 查看网页原代码时遇到中文汉字乱码
- mysql 循环_MySQL实现for循环逐个遍历
热门文章
- 电商用户行为可视化分析
- Prezi实战 ------ 一款颠覆性的做presentation的软件
- Windows 10 MSDN官方原版ISO镜像(简体中文)下载
- RocksCluster上Fluka编译环境gcc/gfortran配置
- 衡量风控策略区分度的三步法
- 2010 Oct MVP Open Day
- JSFL批量导出Flash图片(Flash cs4运行没问题)
- 评估模型都有哪些_BIM模型主要分为哪几类模型?包括哪些内容?
- PPTV(pplive)_forap_1084_9993.exe 木马清除经历
- 「 LaTeX 」写论文,IEEE论文插入作者图片IEEEbiography