【高频考点精讲】前端消息推送方案：Web Push通知的实现原理_vue web-push

前端消息推送方案：Web Push通知的实现原理

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 7 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

今天咱们聊聊一个能让用户\"欲罢不能\"的功能——Web Push通知。不知道你们有没有遇到过这种情况：刚关掉某个网站，突然浏览器右下角弹出\"亲，你忘了一件重要的事！\"（全栈老李温馨提示：这种套路用多了容易被用户屏蔽，慎用啊）

为什么需要Web Push？

先讲个真实案例。去年我帮一个电商客户做优化，他们抱怨说移动端用户跳出率高达70%。后来上了Web Push，关键促销时段用户召回率直接提升了40%！这就是推送的魅力——即使用户关闭了网页，你依然能\"隔空喊话\"。

传统的前端消息方案有这些局限：

• 轮询：像追女朋友一样不停问\"在吗\"，费流量还招人烦
• WebSocket：需要保持连接，手机一锁屏就GG
• LocalStorage：只能在自己网站里自嗨

而Web Push的杀手锏在于：

1. 用户关闭浏览器也能收到
2. 不依赖特定域名（跨站推送）
3. 支持点击跳转指定URL

底层原理揭秘

想象Web Push就像外卖服务：

• Service Worker 是你的专属外卖柜（后台常驻）
• Push Service 是美团骑手（浏览器厂商提供的推送服务）
• Notification 是放在柜子里的外卖（最终展示的内容）

具体流程是这样的：

sequenceDiagram 前端->>后端: 1. 订阅推送(subscribe) 后端->>前端: 2. 返回订阅信息(endpoint+keys) 后端->>Push Service: 3. 发送加密消息(使用endpoint) Push Service->>Service Worker: 4. 推送事件触发 Service Worker->>用户: 5. 显示通知

（全栈老李小贴士：Chrome和Firefox的Push Service是不同厂商提供的，所以endpoint地址也不同）

手把手代码教学

来点实在的！下面是最简实现方案：

// 注册Service Workernavigator.serviceWorker.register(\'/sw.js\').then(registration => {  // 老李提示：这里最好加个用户权限判断 return registration.pushManager.subscribe({  userVisibleOnly: true, // 必须为true，否则Chrome会拒绝 applicationServerKey: urlBase64ToUint8Array(