Notification 桌面通知

JavaScript,前端 2017-11-12

前几天,我们做了个小项目,然后去答辩。老师说能不能在Web端加一个通知信息的东西,比方说,我上传了新的文件上去,你们就能及时收到通知,知道班里有人上传新的文件了。我就想起facebook的桌面通知,所以就尝试着写起了demo

Notification 是什么?

简单的说就是浏览器上的桌面通知。如下图:

Notification就长这样!

怎么用 Notification

  • 语法

let notification = new Notification(title, [options])

title: 必要的通知标题

options: {
    body: 通知的主要内容
    icon: 通知的中图标
    dir: 文字的方向
    tag: 给予通知一个 id
    data: 返回一个数据对象
    ...
}

事件:onclick, onerror, onclose, onshow
  • 权限询问
  if (!("Notification" in window)) {
    console.log("你的浏览器不支持桌面通知");
  } else if (Notification.permission === "granted") {
      console.log('用户允许桌面通知')
      var notification = new Notification('这是个新通知');
  } else if (Notification.permission !== "denied") {
    Notification.requestPermission(function (permission) {
      if (permission === "granted") {
        var notification = new Notification('这是个新通知');
      }
    });

上面这段代码的逻辑大概就是这样:

  • 首先判断浏览器是不是支持通知
  • 然后判断用户是不是允许桌面通知:granted(允许) denied(拒绝)
  • 如果用户既没有允许,也没有拒绝,那么我们就进行权限询问

Notification demo

参考资料


本文由 阿涛 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论