浏览器通知之弹窗通知、自定义铃声、标签标题闪烁 - 前端随笔

桌面弹窗

可点击此按钮尝试一下

利用 Notifications API 接口实现浏览器桌面通知。即使浏览器最小化，不停留在页面内也能弹窗通知。

构造方法：

let notification = new Notification(title, options)

参数：

title 标题；

options 设置属性对象（常见几个属性）：

• body: 通知内容。
• silent: 是否静音（如使用自定义通知铃声，可静音掉浏览器本身通知声）。
• requireInteraction: 是否自动关闭。
• tag: 通知 ID，相同 ID 通知会被替换，避免同类通知显示多个，影响用户体验。
• icon: 通知图标，图片 URL。

注意事项：桌面弹窗通知需要先调用 Notification.requestPermission() 请求用户弹窗通知权限，而且电脑浏览器通知设置也可能影响通知效果。详细用法参考下方应用实例。

---

标签闪烁提醒

利用定时器更换标签页标题实现闪烁提醒，通过 document.hidden 判断是否不在当前标签页。

const defaultTitle = document.title // 获取当前标签页默认标题
const timer = setInterval(function () {
  // 设置定时器
  const title = document.title
  if (document.hidden) {
    // 用户是否停留在当前标签，不在则切换标题
    if (title !== '【你有新消息】') {
      document.title = '【你有新消息】'
    } else {
      document.title = defaultTitle
    }
  } else {
    // 在当前页则停止定时器，恢复默认标题
    clearInterval(timer)
    document.title = defaultTitle
  }
}, 500)

---

声音通知

利用 audio HTML 音频标签，js 控制播放音频实现声音通知。

设置隐藏音频标签：

<audio
  id="notificationAudio"
  style="visibility: hidden;position: absolute;bottom: 0;"
  controls="controls"
  hidden="true"
  src="../../assets/notice.wav"
></audio>

JS 控制播放：

const audio = document.querySelector('#notificationAudio')
audio.currentTime = 0 // 设置播放进度条从0开始
audio.play() // 播放

---

应用实例

在 Vue 中的后台管理系统应用实例，实现弹窗通知、声音通知、标签闪烁提醒：

注意：

​ 下例中获取弹窗权限在页面创建就直接请求，避免用户离开页面时收到通知无法弹窗。

由于这个是后台管理系统中每个用户都需要通知，可这样使用，如果是 2C 产品，一进入页面就弹授权，可能会影响用户体验。可根据实际业务进行调整，比如用户设置中添加通知设置按钮、操作订阅时等。

<template>
  <!-- 设置隐藏 audio 音频标签 -->
  <audio
    ref="notificationAudio"
    style="visibility: hidden;position: absolute;bottom: 0;"
    controls="controls"
    hidden="true"
    src="../../assets/notice.wav"
  ></audio>
</template>

<script>
  export default {
    name: 'Index',
    created() {
      // 这里进入页面就直接请求通知权限，。已授权的是不会再弹授权提醒的。
      Notification.requestPermission()
    },
    methods: {
      // ...其他业务

      // 接收后端数据
      handleMsg() {
        // ...数据可能来自socket、请求等

        // 调用通知
        this.handleNotification()
        this.handleNotificationTag()
        this.handleNotificationAudio()
      },

      // 弹窗通知
      handleNotification() {
        const options = {
          body: '您有新的未读消息，请及时处理', // 消息内容
          silent: true, //	静音浏览器通知声，本例使用了自定义通知声。
          requireInteraction: true, // 设置手动关闭
          tag: 'Vincent Notification', // 通知ID，同类通知建议设置相同ID，避免通知过多遮挡桌面
          icon: 'https://vincef0ng.cn/img/favicon.ico' // 通知图标
        }

        // 检查用户是否同意接受通知
        if (Notification.permission === 'granted') {
          var notification = new Notification('消息通知', options)
        } else if (Notification.permission !== 'denied') {
          Notification.requestPermission().then(function (permission) {
            if (permission === 'granted') {
              var notification = new Notification('消息通知', options)
            }
          })
        } else {
          // 用户拒绝通知权限
        }

        // 通知弹窗被点击后的回调
        notification.onclick = () => {
          window.focus() // 显示当前标签页
          notification.close() // 关闭通知，适用于设置了手动关闭的通知

          // 其他业务逻辑，比如进入通知详情页、通知中心等。
        }
      },

      // 标签页标题闪烁
      handleNotificationTag() {
        const defaultTitle = document.title // 获取当前标签页默认标题
        const timer = setInterval(function () {
          // 设置定时器
          const title = document.title
          if (document.hidden) {
            // 用户是否停留在当前标签，不在则切换标题
            if (title !== '【你有新消息】') {
              document.title = '【你有新消息】'
            } else {
              document.title = defaultTitle
            }
          } else {
            // 回到当前页则停止定时器，恢复默认标题
            clearInterval(timer)
            document.title = defaultTitle
          }
        }, 500)
      },

      // 播放声音
      handleNotificationAudio() {
        this.$refs.audio.currentTime = 0
        this.$refs.audio.play()
      }
    }
  }
</script>

---