Web Notifcation介绍

这篇文章发表于 2023年02月08日,星期三,14:29
Web Notifcation介绍

简单的说Web Notifcation就是在浏览器中调用操作系统自身的通知,当浏览器窗口缩小,或者切换到其他页面后仍然可以提示用户。

一、传统的提示

以常见的web在线聊天为例,通常在收到新消息后定时修改document.title 以闪烁的方式来通知用户,同时使用音频播放声音(Chrome必须要与界面有交互后才能播放声音);或者在浏览器右上角弹出notifaction通知来通知用户。这些方式在浏览器缩小后都不能达到很好的效果。以前的文章js实现页面title闪烁

二、Web Notifcation

需要注意的是,该功能需要在https环境下才能使用,本地演示不了;同时需要用户同意之后才会生效,在Web Worker中也能使用了。

Notification.permission 介绍

该属性标明用户是否接受现实通知,可能的值如下:

  • denied: 用户拒绝显示通知
  • granted: 用户接受显示通知
  • default:用户选择是未知的,因此浏览器的行为类似于值是 denied

Notification.requestPermission()

上面的 Notification.permission 的值表示是否接受通知,Notification.requestPermission就是请求获取用户的通知权限。

官方示例代码,删除了注释:

<button onclick="notifyMe()">Notify me!</button>
function notifyMe() { if (!("Notification" in window)) { // Check if the browser supports notifications alert("This browser does not support desktop notification"); } else if (Notification.permission === "granted") { const notification = new Notification("Hi there!"); } else if (Notification.permission !== "denied") { Notification.requestPermission().then((permission) => { if (permission === "granted") { const notification = new Notification("Hi there!"); } }); } }

Notification.close()

手动的方式关闭通知,一般系统会在一段时间之后自动关闭通知。

事件

  • click : 当用户点击通知时触发。
  • close : 当用户关闭通知时触发。
  • error : 当通知发生错误时触发。
  • show : 当通知显示时触发。

构造函数

let myNotification = new Notification(title, options);
  • title : 通知的标题,显示在通知的顶部
  • options :可选项
    • dir : 通知显示的方式,通常跟随浏览器的语言方向,可以设置为ltr和rtl(看起来与css的direction类似)。
    • lang :通知的语言
    • badge : 一个用于表示通知的图像的URL,当没有足够的空间用于显示通知本身时。
    • body : 通知的正文,显示在标题下方。
    • tag : 通知的识别标签。
    • icon : 要在通知中显示的图标的 URL
    • image : 要在通知中显示的图像的 URL
    • data :您想要与通知相关联的任意数据。这可以是任何数据类型。
    • vibrate : 振动模式,通知时设备的振动设置。
    • renotify : 新通知替换旧通知后是否应通知用户,默认false
    • requireInteraction : 通知应保持有效,直到用户点击或关闭它,而不是自动关闭,默认false

兼容性

除了IE主流的浏览器基本都支持 在这里插入图片描述

参考文章

MDN Notification