前端实现推送功能，核心是让用户即使没打开网页 / APP，也能收到你的消息提醒。我会用新手能听懂的方式，拆解前端推送的核心方案，并给出可直接运行的代码示例。

一、前端推送的 3 种核心方案（按使用场景分）

表格

二、最常用的「Web Push 网页推送」实现（完整流程 + 代码）

Web Push 是前端推送的核心，需要 前端 + 后端 + 推送服务 配合，核心依赖浏览器的 Push API + Service Worker（服务工作线程）。

前置条件

1. 网站必须是 HTTPS（本地开发 localhost 可忽略）
2. 浏览器支持（Chrome/Firefox/Edge 都支持，Safari 需 16.4+）

步骤 1：前端申请用户推送权限 + 订阅推送

javascript

运行

// 1. 注册 Service Worker（推送的核心，必须）async function registerServiceWorker() {  if (!('serviceWorker' in navigator) || !('PushManager' in window)) {    alert('你的浏览器不支持推送功能');    return null;  }    // 注册 sw.js 文件（必须放在项目根目录）  const registration = await navigator.serviceWorker.register('/sw.js');  console.log('Service Worker 注册成功');  return registration;}// 2. 申请推送权限 + 订阅async function subscribePush() {  const registration = await registerServiceWorker();  if (!registration) return;  // 申请用户权限  const permission = await Notification.requestPermission();  if (permission !== 'granted') {    alert('你拒绝了推送权限，无法接收消息');    return;  }  // 推送服务器的公钥（后端生成，下面会说）  const publicKey = '你的VAPID公钥';    // 订阅推送，获取用户的唯一订阅ID  const subscription = await registration.pushManager.subscribe({    userVisibleOnly: true, // 所有推送都必须显示给用户    applicationServerKey: urlBase64ToUint8Array(publicKey) // 格式转换  });  // 3. 将订阅信息发送给后端保存（用于后续推送）  await fetch('/api/save-subscription', {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify(subscription)  });  alert('已成功开启推送通知！');}// 辅助函数：将VAPID公钥转换为Uint8Array格式function urlBase64ToUint8Array(base64String) {  const padding = '='.repeat((4 - base64String.length % 4) % 4);  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');  const rawData = window.atob(base64);  const outputArray = new Uint8Array(rawData.length);  for (let i = 0; i < rawData.length; ++i) {    outputArray[i] = rawData.charCodeAt(i);  }  return outputArray;}// 调用订阅函数（比如绑定到按钮点击）document.getElementById('subscribe-btn').addEventListener('click', subscribePush);

步骤 2：创建 Service Worker 文件（sw.js，必须放根目录）

这个文件是后台运行的脚本，负责接收推送消息并展示通知：

javascript

运行

// sw.js// 1. 监听推送事件（收到后端推送时触发）self.addEventListener('push', function(event) {  // 推送的消息内容  const data = event.data?.json() || { title: '默认消息', body: '你有新消息' };    // 通知的配置  const options = {    body: data.body,    icon: '/favicon.ico', // 通知图标（自己替换）    data: { url: data.url }, // 点击通知跳转的链接    vibrate: [200, 100, 200], // 震动（移动端）    tag: 'push-notification' // 防止重复通知  };  // 展示通知  event.waitUntil(    self.registration.showNotification(data.title, options)  );});// 2. 监听通知点击事件self.addEventListener('notificationclick', function(event) {  event.notification.close(); // 关闭通知  // 跳转到指定页面  event.waitUntil(    clients.openWindow(event.notification.data.url || '/')  );});

步骤 3：后端实现（Node.js 示例）

后端需要生成 VAPID 密钥、保存用户订阅信息、调用推送接口：

javascript

运行

// 后端 Node.js 示例（需安装 web-push 包）const webpush = require('web-push');const express = require('express');const app = express();app.use(express.json());// 1. 生成 VAPID 密钥（只需生成一次，保存下来）const vapidKeys = webpush.generateVAPIDKeys();// 公钥给前端，私钥后端保存console.log('公钥：', vapidKeys.publicKey);console.log('私钥：', vapidKeys.privateKey);// 2. 配置 web-pushwebpush.setVapidDetails(  'mailto:你的邮箱@xxx.com', // 联系邮箱  vapidKeys.publicKey,  vapidKeys.privateKey);// 3. 保存用户订阅信息（实际项目用数据库）let subscriptions = [];app.post('/api/save-subscription', (req, res) => {  subscriptions.push(req.body);  res.status(201).json({ success: true });});// 4. 推送消息接口（后端调用或前端触发）app.post('/api/send-push', (req, res) => {  const { title, body, url } = req.body;  const payload = JSON.stringify({ title, body, url });  // 给所有订阅用户推送  subscriptions.forEach(subscription => {    webpush.sendNotification(subscription, payload)      .catch(error => console.error('推送失败：', error));  });  res.json({ success: true, message: '推送已发送' });});app.listen(3000, () => console.log('后端运行在 3000 端口'));

步骤 4：安装依赖 + 运行

bash

运行

# 后端安装依赖npm install express web-push# 运行后端node server.js# 前端启动静态服务（比如用 live-server）live-server

三、简单版「浏览器通知」（无需后端，仅限网页打开时）

如果只需要在网页打开时推送（比如操作成功提醒），用 Notification API 即可，无需 Service Worker：

javascript

运行

// 简单版浏览器通知function showSimpleNotification() {  // 检查权限  if (Notification.permission !== 'granted') {    Notification.requestPermission().then(perm => {      if (perm === 'granted') {        showNotification();      }    });    return;  }  // 展示通知  const notification = new Notification('操作成功', {    body: '你的订单已提交，请注意查收',    icon: '/favicon.ico'  });  // 点击通知  notification.onclick = () => {    window.focus();    notification.close();  };}// 调用showSimpleNotification();

四、关键注意事项

1. HTTPS 要求：除了 localhost，生产环境必须用 HTTPS，否则 Service Worker 无法注册。
2. 权限管理：用户可以随时在浏览器设置里关闭推送权限，前端要做兼容。
3. 兼容性：Safari 对 Web Push 支持较差，移动端微信浏览器不支持（需用微信公众号模板消息）。
4. 推送频率：不要频繁推送，容易被用户拉黑，建议给用户提供关闭推送的选项。

总结

1. Web Push 是前端推送的核心方案，支持离线推送，需配合 Service Worker + 后端实现，核心是「用户订阅 → 后端保存 → 后端触发推送」。
2. 简单通知 用 Notification API，仅限网页活跃时，无需后端，适合轻量提醒。
3. 生产环境需注意 HTTPS、兼容性（微信浏览器除外）、推送频率控制。