资讯专栏INFORMATION COLUMN

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

Jrain / 1277人阅读

摘要:从开始,就被取消了,只能使用标准化的。获取权限无论是新版还是老版的,都是需要得到用户的批准,才能获取到相应的权限。老版获取权限的方式是这样的通过方法检查当前是否已获得权限。调用刚刚创建的对象的方法来进行显示。

最近又鼓捣起两年前做的一个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权限。
老版获取权限的方式是这样的:

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

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

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

Notification.requestPermission(function(status){  //status值有三种:default/granted/denied
  if(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》

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91564.html

相关文章

  • 【译】杂谈:HTML 5的消息通知机制

    摘要:原文译文的消息通知机制译者已经被应用到开发中。所以先要征求用户的许可而不是直接显示通知。然后,获取用户许可之后,我们可以显示两种类型的信息最后执行通知代码。 原文:HTML 5 Notification 译文:HTML 5 的消息通知机制 译者:dwqs showImg(https://segmentfault.com/img/bVks7a); HTML 5 已经被应用到Web...

    付伦 评论0 收藏0

发表评论

0条评论

Jrain

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<