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) 创建通知。
立即学习“Java免费学习笔记（深入）”；
-
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 库）发送加密消息
这一步涉及 HTTPS、密钥生成、后端集成，比 Notification API 复杂得多，适合需要离线触达的场景（如邮件提醒、聊天消息）。
不复杂但容易忽略：所有功能都要求页面运行在 HTTPS 下（localhost 除外），HTTP 站点无法使用 Notification API 的完整能力，更无法注册 Service Worker。
