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

2024年3月30日 138次阅读 来源: array_huang

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

  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()

参考文章：

    原文作者：array_huang
    原文地址: https://segmentfault.com/a/1190000004085128
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞