请使用firefox,chrome等最新浏览器浏览本站。

HTML5 Web Notifications API

html5 阿豹 503次浏览 0个评论 扫描二维码

概述

Notifications API用于在用户的桌面(而不是网页上)显示通知信息,桌面电脑和手机都适用,比如通知用户收到了一封Email。具体的实现形式由浏览器自行部署,对于手机来说,一般显示在顶部的通知栏。
如果网页代码调用这个API,浏览器会询问用户是否接受。只有在用户同意的情况下,通知信息才会显示。
查看浏览器兼容性

下面的代码用于检查浏览器是否支持这个API。

if ('Notification' in window) {
  // 支持
} else {
  // 不支持
}

获取用户同意

支持这个API的浏览器,原生提供一个构造函数Notification。这个构造函数接受两个参数,第一个参数是通知的标题,格式为字符串;第二个参数是可选的,格式为一个对象,用来设定各种设置。该对象的属性如下:

属性 描述
body 字符串,用来进一步说明通知的目的
lang 设定通知所使用的语言,比如en-US、zh-CN
dir 设定语言的阅读方法,ltr表示从左到右,rtl表示从右到左,一般是继承浏览器的设置
tag 字符串,用来设定通知的ID标签
icon 图像文件的网址,用来设定通知的图标

上面这些属性,都可以通过实例对象读取。

代码示例:

var notification = new Notification(‘您有新邮件’, {
body: ‘足球魔方app下载地址’
});

notification.title // “您有新邮件”
notification.body // “足球魔方app下载地址”

Notification函数对象有一个permission属性,用于读取用户给于的权限。它可以取三个值。

属性 描述
denied 用户不接受通知
granted 用户同意接受通知
default 用户的选择未知

Notification.requestPermission方法,用于获取用户的同意。它可以接受一个回调函数,用于处理用户的选择。

//如果用户允许
if (Notification.permission === "granted") {
    var notification = new Notification("新邮件");
} else if (Notification.permission !== 'denied') {
    //获取用户的同意
    Notification.requestPermission(function (permission) {
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }
      if (permission === "granted") {
        var notification = new Notification("新邮件");
      }
    });

}

实例对象的事件

Notification实例对象有以下事件,可以用来指定回调函数。

事件 描述
click 用户点击通知时触发
close 用户或者浏览器关闭通知时触发
error 通知发生错误时触发
show 通知显示时触发

代码示例:

notification.onshow = function() {
  console.log('Notification show');
};

转载请注明HTML5 Web Notifications API
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到