目录
  1. 1. 桌面弹窗
  2. 2. 标签闪烁提醒
  3. 3. 声音通知
  4. 4. 应用实例
浏览器通知之弹窗通知、自定义铃声、标签标题闪烁 - 前端随笔

桌面弹窗

请求通知权限

桌面弹窗效果

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

构造方法:

1
let notification = new Notification(title, options)

参数:

title 标题;

options 设置属性对象(常见几个属性):

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

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


标签闪烁提醒

标签闪烁提醒效果

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 控制播放音频实现声音通知。

设置隐藏音频标签:

1
2
3
4
5
6
7
<audio
id="notificationAudio"
style="visibility: hidden;position: absolute;bottom: 0;"
controls="controls"
hidden="true"
src="../../assets/notice.wav"
></audio>

JS 控制播放:

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

应用实例

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

注意:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<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>

文章作者: Vincent F0ng
文章链接: https://vincef0ng.cn/post/web-notification/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Vincent F0ng

评论(支持Markdown)