Notification 桌面通知

前几天,我们做了个小项目,然后去答辩。老师说能不能在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

参考资料

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容