简易实用的Web Notification桌面通知

最新推荐文章于 2025-05-21 15:13:17 发布

原创最新推荐文章于 2025-05-21 15:13:17 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#notification桌面提醒

js系列专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用WebNotification API实现桌面消息提醒功能。通过简单的代码示例展示了如何创建通知、请求权限、设置通知内容及图标，并实现了点击通知返回浏览器并关闭通知的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web Notification桌面通知

项目需要，要利用google的notification实现新消息桌面提醒功能，之前研究了一下H5的Web Notification发现很简单，项目上线好久忘截图，直接上核心代码：

if (window.Notification) {
                document.getElementById('audio').play(); //音频
                Notification.requestPermission(function (permission) {
                    var notify = new Notification('您有新的担保咨询信息哦~', {
                        body: '姓名：'+nickname+',手机号：'+phone,            //内容      
                        icon: 'https://static.yudada.com/bankend/app-icon.png'  //图片
                    });
                    //下面实现点击提示回到浏览器并关闭提示
                    notify.onclick = function() {   
                        window.focus();                
                        notify.close();    
                    };
                });
   }