Web Notification 让浏览器实现系统级消息通知

德顺

发布于 2024-05-16 16:42:38

6020

发布于 2024-05-16 16:42:38

文章被收录于专栏：前端资源

前段时间有个需求，系统有即时消息的功能，要求在收到消息后能有一个比较明显的提示，即使是在浏览器最小化的时候也能看到提醒。

目前像 alert 、confirm 包括一些 JavaScript 控制的提示都是页面级的，只有在当前页签聚焦的情况像才能看到，更别说浏览器最小化了。

于是就了解到 Web Notification。

Notification 简介

Notifications API 的 Notification 接口用于向用户配置和显示桌面通知。

这些通知的外观和功能因平台而异，但通常它们提供了一种异步向用户提供信息的方式。

Notification 的使用

一个简单的示例：

function notifyMe() {
    new Notification("通知标题：", {
      body: '通知内容',
      icon: 'https://www.w3h5.com/static/images/logo-180.png'
    })
}

if (!("Notification" in window)) {
    // 检查浏览器是否支持通知
    alert("当前浏览器不支持桌面通知");
  } else if (Notification.permission === "granted") {
    // 检查是否已授予通知权限；如果是的话，发送通知
    notifyMe();
  } else if (Notification.permission !== "denied") {
    // 我们需要征求用户的许可
    Notification.requestPermission().then((permission) => {
      // 如果用户接受，我们就发送通知
      if (permission === "granted") {
        notifyMe();
      }
    });
  }

如果没有弹出弹窗，有两种可能

浏览器不支持 Notifications API
需要获得通知授权。

是否支持 Notification 可以通过 window.Notification 是否存在来判断，如果支持的情况下没有弹出就需要获得授权。通过调用 Notification.requestPermission(callback) 来获取用户授权，授权后可正常弹出。

用户需要点击“允许此网站显示通知”，就可以正常收到消息提醒了。

主动关闭通知

可以通过调用 Notification.close() 方法，主动关闭关闭通知。

Notification 常用参数

new Notification(title, options) 通过 new 构造，调用通知方法。其中 title 是必选参数，表示通知的标题内容，options 是可选参数，详见下表：

属性	含义	类型
body	内容主体	字符串
icon	通知图标	字符串
silent	是否需要声音	布尔值
sound	声音地址，可以播放提示声音	字符串
data	任意类型和通知相关联的数据	对象
vibrate	震动模式	数组
tag	通知标识	字符串
renotify	通知是否使用叠加效果，默认true，fasle则为替换	布尔值
noscreen	是否不在屏幕上显示通知，用于移动端，默认false	布尔值

通知堆叠效果 false 仅显示最新的一个。

其中 vibrate 是个很有意思的属性，在 Notification 使用 vibrate 属性可以使设备震动，填入 [300, 100, 300] , 表示设备振动 300毫秒，然后停止100毫秒，再振动300毫秒。

使用该效果虽然更能引起用户的注意，但是也会有过分打扰用户。有些浏览器也没有实现该效果，慎重使用。

Notification 的相关事件

事件名	含义
Notification.onclick	通知被点击时
Notification.onerror	通知显示异常时，躲在用户没有给通知时触发
Notification.onclose	通知被关闭时
Notification.onshow	通知显示时