html5系列:notification api升级——从webkitNotifications到Notification
最近又鼓捣起两年前做的一个chrome扩展,想要跑起来却发现报错了,看了下console,首先是indexedDB报错,说是window.webkitIndexedDB
已经被废弃了,用window.indexedDB
代替后,就没再报错了,看来我这chrome 46
的indexedDB api
只是改了个更通用的名称,还是比较厚道的,所以,这里就不详述了。
真正出问题的是桌面通知,chrome 46
给我报的错是window.webkitNotifications
不是个对象,这可坑爹了都没提示我要换成什么。马上百度谷歌一起上,排名前列的大部分都是我当年就看到的老资料,好不容易找到最新的资料,测试可用,下面介绍一下新版的window.Notifications
与老版的window.webkitNotifications
有什么区别。
从chrome 22
开始,webkitNotifications
就被取消了,只能使用标准化的Notification
。
获取权限
无论是新版还是老版的notification api
,都是需要得到用户的批准,才能获取到相应的api权限。
老版获取权限的方式是这样的:
通过checkPermission()方法检查当前是否已获得权限。
若尚未获得权限,则调用requestPermission()方法向用户请求权限。
而新版取消了checkPermission()方法,直接通过requestPermission()方法完成查询权限及获取权限这两项任务,具体代码如下:
Notification.requestPermission(function(status){ //status值有三种:default/granted/deniedif(Notification.permission !== status){Notification.permission = status;}
});
创建消息
重点来了,老版是这样的:
利用window.webkitNotifications.createNotification()或window.webkitNotifications.createHTMLNotification()方法来创建一个Notification对象。
调用刚刚创建的Notification对象的show()方法来进行显示。
新版则又精简了一点,直接new一个Notification对象,在new的时候把桌面通知的参数都传进去,这桌面通知就会马上显示,具体代码看下方:
var options={dir: "ltr", //控制方向,据说目前浏览器还不支持lang: "utf-8",icon: "http://ihuster.com/static/avatar/m_default.png",body: "你好呀,欢迎留言交流呀"};
var n = new Notification("hello word!", options);
另外新版还有一点不同的是,提供了4个事件:
onshow()
onclick()
onclose()
onerror()
参考文章:
《使用HTML5 Notification API开启浏览器桌面提醒》
《使用 Web Notifications》
html5系列:notification api升级——从webkitNotifications到Notification相关推荐
- HTML5 桌面通知:Notification API 的应用
2019独角兽企业重金招聘Python工程师标准>>> 先看效果: image.png 这是利用html5桌面通知Notification API实现的,先看看代码,再分析Notif ...
- html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版 简介 JavaScript API大众版 JavaScript API功能介绍 百度地图Jav ...
- HTML5使用Geoloacation API检测浏览器的支持性
HTML5使用Geoloacation API检测浏览器的支持性 在调用HTML5 Deolocation API函数前,需要确保浏览器支持此功能.当浏览器不支持时,可以提供一些替代文本,以提示用户升 ...
- classlist使用方法_如何通过使用HTML5的classList API在没有jQuery的情况下操作类
classlist使用方法 by Ayo Isaiah 通过Ayo Isaiah 如何通过使用HTML5的classList API在没有jQuery的情况下操作类 (How to manipulat ...
- 如何最小化云API升级造成的中断?
云提供商升级API时,开发者必须升级并重新测试自己的软件,如何为这个过程做好准备并且最小化影响? 云提供商为了扩展和改善服务进行了服务升级,通常需要进行API升级.但是伴随着利好的部分,这些应用编程接 ...
- Windows CE Notification API的使用方法
1 引言 以Windows CE 为操作系统的掌上电脑(如PocketPC或HPC),除具备PC的功能外,还具备很强的自身控制能力.Windows CE API超越微软其他操作系统的 API ...
- HTML5 Audio标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- HTML5 Audio/标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style>#volumeSlider .slider-selection {background:#bababa;} </style&g ...
- html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用 树形结构非常简单,t ...
- html标签api,html5新增标签+API介绍
新增标签 1.embed embed标签是html5新增的标签,用来嵌入内容,比如插件等,常用于视频文件的播放(为外部应用程序定义容器). 这篇文章介绍了embed的常用属性,基本都是定义播放器的一些 ...
最新文章
- Javascript匿名函数
- iOS进阶之底层原理-线程与进程、gcd
- phoenixframework自动化测试平台架构图
- python基础常用语句-Python-基础-常用术语对照表
- 6 HBase java API访问HBase数据库
- Linux 列出文件列表命令ls
- java gui 层次结构_javaGUI教学图形界面的层次结构.ppt
- python实现交并比IOU
- 2021消费者数智化运营白皮书
- knife4j导出html有误,knife4j无法生成完整的响应说明
- 机器学习基础(五十五)—— 核(Kernel Trick)
- SQL Server里的自旋锁介绍
- Java会走向晦暗吗?Kotlin会取而代之吗
- 2018我读过的那些书
- sketch 导出html,用 Sketch 设计和输出响应式网页
- 杰出人士的七种共性之5-独木求林
- 创业公司股权架构搭建原则
- linux怎么进入etc目录,Linux 系统的/etc目录
- cm4 NVIC完全解析
- Windows 下载WebStorm
热门文章
- angularJS添加form验证:自定义验证
- CLR via C# 3rd - 07 - Constants and Fields
- C#使用带参数的存储过程
- [转贴]壮观啊!实拍中国最美公路
- Java学习笔记——dubbo服务之底层通讯协议Protocol
- IOS Xcode7 http 和 https
- python 守护进程(daemon)on : 会打扮的装饰器
- 关于php编译安装扩展模块memcache的问题
- 安捷伦$8000万投资下一代测序公司
- Ninject学习(一) - Dependency Injection By Hand