最近又鼓捣起两年前做的一个chrome扩展,想要跑起来却发现报错了,看了下console,首先是indexedDB报错,说是window.webkitIndexedDB已经被废弃了,用window.indexedDB代替后,就没再报错了,看来我这chrome 46indexedDB api只是改了个更通用的名称,还是比较厚道的,所以,这里就不详述了。
真正出问题的是桌面通知,chrome 46给我报的错是window.webkitNotifications不是个对象,这可坑爹了都没提示我要换成什么。马上百度谷歌一起上,排名前列的大部分都是我当年就看到的老资料,好不容易找到最新的资料,测试可用,下面介绍一下新版的window.Notifications与老版的window.webkitNotifications有什么区别。

chrome 22开始,webkitNotifications就被取消了,只能使用标准化的Notification

获取权限

无论是新版还是老版的notification api,都是需要得到用户的批准,才能获取到相应的api权限。
老版获取权限的方式是这样的:

  1. 通过checkPermission()方法检查当前是否已获得权限。

  2. 若尚未获得权限,则调用requestPermission()方法向用户请求权限。

而新版取消了checkPermission()方法,直接通过requestPermission()方法完成查询权限及获取权限这两项任务,具体代码如下:

Notification.requestPermission(function(status){  //status值有三种:default/granted/deniedif(Notification.permission !== status){Notification.permission = status;}
});

创建消息

重点来了,老版是这样的:

  1. 利用window.webkitNotifications.createNotification()或window.webkitNotifications.createHTMLNotification()方法来创建一个Notification对象。

  2. 调用刚刚创建的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相关推荐

  1. HTML5 桌面通知:Notification API 的应用

    2019独角兽企业重金招聘Python工程师标准>>> 先看效果: image.png 这是利用html5桌面通知Notification API实现的,先看看代码,再分析Notif ...

  2. html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc

    开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版 简介 JavaScript API大众版 JavaScript API功能介绍 百度地图Jav ...

  3. HTML5使用Geoloacation API检测浏览器的支持性

    HTML5使用Geoloacation API检测浏览器的支持性 在调用HTML5 Deolocation API函数前,需要确保浏览器支持此功能.当浏览器不支持时,可以提供一些替代文本,以提示用户升 ...

  4. classlist使用方法_如何通过使用HTML5的classList API在没有jQuery的情况下操作类

    classlist使用方法 by Ayo Isaiah 通过Ayo Isaiah 如何通过使用HTML5的classList API在没有jQuery的情况下操作类 (How to manipulat ...

  5. 如何最小化云API升级造成的中断?

    云提供商升级API时,开发者必须升级并重新测试自己的软件,如何为这个过程做好准备并且最小化影响? 云提供商为了扩展和改善服务进行了服务升级,通常需要进行API升级.但是伴随着利好的部分,这些应用编程接 ...

  6. Windows CE Notification API的使用方法

    1 引言      以Windows CE 为操作系统的掌上电脑(如PocketPC或HPC),除具备PC的功能外,还具备很强的自身控制能力.Windows CE API超越微软其他操作系统的 API ...

  7. HTML5 Audio标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  8. HTML5 Audio/标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style>#volumeSlider .slider-selection {background:#bababa;} </style&g ...

  9. html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件

    因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用 树形结构非常简单,t ...

  10. html标签api,html5新增标签+API介绍

    新增标签 1.embed embed标签是html5新增的标签,用来嵌入内容,比如插件等,常用于视频文件的播放(为外部应用程序定义容器). 这篇文章介绍了embed的常用属性,基本都是定义播放器的一些 ...

最新文章

  1. Javascript匿名函数
  2. iOS进阶之底层原理-线程与进程、gcd
  3. phoenixframework自动化测试平台架构图
  4. python基础常用语句-Python-基础-常用术语对照表
  5. 6 HBase java API访问HBase数据库
  6. Linux 列出文件列表命令ls
  7. java gui 层次结构_javaGUI教学图形界面的层次结构.ppt
  8. python实现交并比IOU
  9. 2021消费者数智化运营白皮书
  10. knife4j导出html有误,knife4j无法生成完整的响应说明
  11. 机器学习基础(五十五)—— 核(Kernel Trick)
  12. SQL Server里的自旋锁介绍
  13. Java会走向晦暗吗?Kotlin会取而代之吗
  14. 2018我读过的那些书
  15. sketch 导出html,用 Sketch 设计和输出响应式网页
  16. 杰出人士的七种共性之5-独木求林
  17. 创业公司股权架构搭建原则
  18. linux怎么进入etc目录,Linux 系统的/etc目录
  19. cm4 NVIC完全解析
  20. Windows 下载WebStorm

热门文章

  1. angularJS添加form验证:自定义验证
  2. CLR via C# 3rd - 07 - Constants and Fields
  3. C#使用带参数的存储过程
  4. [转贴]壮观啊!实拍中国最美公路
  5. Java学习笔记——dubbo服务之底层通讯协议Protocol
  6. IOS Xcode7 http 和 https
  7. python 守护进程(daemon)on : 会打扮的装饰器
  8. 关于php编译安装扩展模块memcache的问题
  9. 安捷伦$8000万投资下一代测序公司
  10. Ninject学习(一) - Dependency Injection By Hand