使用分两步:先 Notification.requestPermission() 请求授权(default / granted / denied 三种结果,用户拒绝后再次请求也不会弹窗),授权后 new Notification(标题, { body, icon, tag }) 弹出系统通知,tag 用作同类型通知的合并标识。
通知出现在操作系统通知中心,点击后通过 onclick 事件可以把窗口拉回前台。它常与 Service Worker 的 push 事件配合实现 Web Push——页面关掉也能收到推送。移动端浏览器普遍对通知权限更严格,重要消息建议同时保留应用内兜底提示。
function notify() { if (!('Notification' in window)) { console.log('不支持通知'); return; } if (Notification.permission === 'granted') { show(); } else if (Notification.permission !== 'denied') { Notification.requestPermission().then(function (perm) { if (perm === 'granted') { show(); } }); } } function show() { var n = new Notification('收到新消息', { body: '点击查看这条来自网页的提醒', icon: 'https://picsum.photos/64', tag: 'msg' }); n.onclick = function () { window.focus(); n.close(); }; } // 绑定到按钮点击:notify();