HTML5 词条目录
前端Wiki/词条/消息通知 Notification

消息通知 Notification

定义在页面之外向用户展示系统级桌面通知,即使页面在后台也能触达

使用分两步:先 Notification.requestPermission() 请求授权(default / granted / denied 三种结果,用户拒绝后再次请求也不会弹窗),授权后 new Notification(标题, { body, icon, tag }) 弹出系统通知,tag 用作同类型通知的合并标识。

通知出现在操作系统通知中心,点击后通过 onclick 事件可以把窗口拉回前台。它常与 Service Worker 的 push 事件配合实现 Web Push——页面关掉也能收到推送。移动端浏览器普遍对通知权限更严格,重要消息建议同时保留应用内兜底提示。

JavaScript
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();
⚠ 常见误区
🔗 相关词条浏览器组件
← 返回来源章节浏览器