JavaScript 实现推送通知主要依赖两个核心机制：浏览器原生的 Notification API（用于显示本地通知）和 Push API + Service Worker（用于接收服务器发起的后台推送）。很多人混淆二者，这里先明确：Notification API 本身不收消息，只负责“显示”；真正实现远程推送必须配合 Push API 和后台服务。
一、启用 Notification API（用户授权与显示）
这是推送功能的第一步，必须获得用户明确授权才能显示通知：
- 调用
Notification.requestPermission()弹出浏览器权限请求框（仅在用户交互后如点击按钮中调用才有效） - 检查返回值是否为
"granted"，只有授权成功才能创建通知 - 使用
new Notification(title, options)创建并显示通知，支持图标、正文、声音（需用户设置）、重定向链接等
示例代码：
document.getElementById('notify-btn').onclick = async () => {
const permission = await Notification.requestPermission();
if (permission === 'granted') {
new Notification('你好！', {
body: '这是一条前端触发的通知',
icon: '/icon.png',
tag: 'welcome'
});
}
};
二、实现真正的远程推送（Push API + Service Worker）
要让页面关闭后也能收到通知，必须走 Push 流程：
立即学习“Java免费学习笔记（深入）”；
- 注册一个 Service Worker（必须 HTTPS 或 localhost），它能在后台持续运行
- 通过
navigator.serviceWorker.ready获取 registration 对象 - 调用
registration.pushManager.subscribe()向浏览器推送服务申请订阅，生成唯一的 PushSubscription（含 endpoint、keys 等） - 将该订阅信息（尤其是 endpoint）发送到你的后端服务器保存
- 后端通过 Web Push 协议（如使用
web-push库）向 endpoint 发送加密消息，浏览器收到后自动唤醒 Service Worker - 在 Service Worker 的
push事件监听器中调用self.registration.showNotification()显示通知
三、Service Worker 中处理推送事件
这是关键一环，纯前端无法绕过：
- Service Worker 文件（如
sw.js）需监听push事件 - 从 event.data 中解析推送载荷（注意：Chrome/Firefox 要求消息必须加密）
- 调用
showNotification()并传入标题、选项（可含 data、actions、badge 等） - 还可监听
notificationclick事件，实现点击跳转逻辑
简例（sw.js）：
self.addEventListener('push', event => {
const data = event.data?.json() || { title: '新消息' };
const options = {
body: data.body || '',
icon: data.icon || '/icon-192.png',
badge: '/badge.png',
data: { url: data.url || '/' }
};
event.waitUntil(self.registration.showNotification(data.title, options));
});
self.addEventListener('notificationclick', event => {
event.notification.close();
event.waitUntil(
clients.openWindow(event.notification.data.url)
);
});
四、注意事项与常见问题
- 所有涉及 Push API 的操作必须在 HTTPS 下进行（开发可用 localhost）
- 移动端 Chrome / Firefox 支持完整流程；Safari 仅支持 Notification API（无 Push API）
- 用户可在浏览器设置中随时禁用通知，需定期检查
Notification.permission - 推送消息体大小受限（通常 ≤ 4KB），敏感内容建议只传 ID，前端再拉取详情
- 订阅过期或失效时（如用户清除浏览数据），需重新订阅并更新服务端记录
