javascript如何实现推送通知_浏览器通知的API怎么用？_技术教程

JavaScript实现浏览器推送通知主要依赖Notification API（页面内本地通知）和Push API+Service Worker（关页后服务器推送），需HTTPS环境；先检查并请求用户授权，再用new Notification()显示通知，支持图标、tag、data等配置，并可监听onclick等交互事件；进阶离线推送需注册Service Worker、使用VAPID加密通信。

JavaScript 实现浏览器推送通知，主要靠 Notification API（用于页面内触发本地通知）和 Push API + Service Worker（用于关闭页面后也能收到服务器推送）。两者常配合使用，但基础通知只需 Notification API。

一、检查并请求通知权限

用户必须主动授权，才能显示通知。不能默认开启，也不能静默申请。

用 Notification.permission 查看当前状态："granted"（已允许）、"denied"（已拒绝）、"default"（未决定）
调用 Notification.requestPermission() 弹出授权框（必须由用户手势触发，比如点击按钮）

示例：

document.getElementById('notifyBtn').onclick = () => {
  if (Notification.permission === 'granted') {
    showNotification();
  } else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(status => {
      if (status === 'granted') showNotification();
    });
  }
};

二、创建并显示通知

权限获得后，直接用 new Notification(title, options) 创建通知。

title：通知标题（必填）
options 可选对象，常用字段：
- body：正文内容
- icon：图标 URL（建议 192×192 或 512×512 PNG）
- badge：小角标图标（Android/桌面 PWA 常用）
- tag：唯一标识，相同 tag 的新通知会替换旧通知
- data：自定义数据（如跳转链接），在 click 事件中读取

示例：

function showNotification() {
  new Notification('新消息', {
    body: '你有一条未读提醒',
    icon: '/icon.png',
    tag: 'msg-123',
    data: { url: '/chat' }
  });
}

三、监听通知交互事件

用户点击通知时可做跳转或执行逻辑，需在通知实例上绑定事件（注意：事件必须在构造后立即绑定）。

onclick：点击通知时触发（自动关闭通知）
onclose：用户手动关闭或超时关闭后触发
onerror：通知显示失败时触发（如资源加载失败）

示例：

const n = new Notification('提示', { body: '点击查看' });
n.onclick = () => {
  window.focus(); // 激活浏览器窗口
  if (n.data?.url) location.href = n.data.url;
};

四、进阶：后台推送（需 Service Worker）

如果要实现“关掉网页还能收通知”，必须启用 Push API，它依赖 Service Worker 持久运行。

先注册 Service Worker：navigator.serviceWorker.register('/sw.js')
在 sw.js 中监听 push 事件，调用 self.registration.showNotification()
前端通过 serviceWorker.ready 获取 PushManager，调用 getSubscription() 和 subscribe() 管理推送凭证（endpoint）
后端需用 VAPID 协议向浏览器推送服务（如 Firebase Cloud Messaging 或 web-push 库）发送加密消息