网站在线客服系统新消息提醒功能，支持浏览器桌面通知提醒，网页新消息声音，标题闪动效果功能实现...

最新推荐文章于 2025-06-27 16:18:52 发布

原创

最新推荐文章于 2025-06-27 16:18:52 发布 · 1.1k 阅读

标签

#前端 #javascript #开发语言 #ecmascript

收录于

该代码段展示了如何在浏览器中实现新消息通知，包括在桌面右下角显示通知以及播放声音提醒。当接收到新消息时，会触发这两个功能，通知用户。通知功能依赖于浏览器的支持，并且会处理用户的权限设置。此外，还包含了一个闪烁标题的简单实现，以进一步吸引用户注意力。

当我们的网站收到一条新消息的时候，需要能通知给正在访问网页的人员

浏览器打开的情况下，可以展示在电脑桌面右下角

//浏览器桌面通知
function notify(title, options, callback) {

    // 先检查浏览器是否支持
    if (!window.Notification) {
        console.log("浏览器不支持notify");
        return;
    }
    options.body=replaceHtml(options.body);
    console.log("浏览器notify权限:", Notification.permission);
    // 检查用户曾经是否同意接受通知
    if (Notification.permission === 'granted') {
        var notification = new Notification(title, options); // 显示通知
        if (notification && callback) {
            notification.onclick = function(event) {
                callback(notification, event);
            }
            setTimeout(function () {
                notification.close();
            },3000);
        }
    } else {
        Notification.requestPermission().then( (permission) =>function(){