html5系列:notification api升级——从webkitNotifications到Notification

最近又鼓捣起两年前做的一个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/denied
      if(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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值