Web Push 与 VAPID 推送通知：订阅、送达与权限治理实践

背景与价值推送通知是提高留存与转化的重要能力；PWA 在主屏安装后可获得系统级通知体验。采用 VAPID 可在自建后端环境发送跨浏览器推送，无需平台专属 SDK。关键前置与兼容需 HTTPS、已注册 Service Worker 且用户允许通知权限。iOS Safari（16.4+）支持 PWA 推送：必须“添加到主屏幕”。桌面端 Chrome/Edge/Firefox 支持 Web Push；权限策略与参与度影响送达。前台：权限与订阅const vapidPublicKey = 'BExxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; async function ensureNotificationPermission() { const p = await Notification.requestPermission(); return p === 'granted'; } async function subscribePush() { const ok = await ensureNotificationPermission(); if (!ok) return { ok: false, reason: 'denied' }; const reg = await navigator.serviceWorker.ready; const sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(vapidPublicKey) }); // 将订阅信息发送到后端保存 await fetch('/api/push/subscribe', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(sub) }); return { ok: true }; } function urlBase64ToUint8Array(base64String: string) { const padding = '='.repeat((4 - (base64String.length % 4)) % 4); const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/'); const raw = atob(base64); const output = new Uint8Array(raw.length); for (let i = 0; i < raw.length; ++i) output[i] = raw.charCodeAt(i); return output; } 后端：发送推送（Node 示例）import webpush from 'web-push'; webpush.setVapidDetails('mailto:[email protected]', process.env.VAPID_PUBLIC!, process.env.VAPID_PRIVATE!); async function sendTo(sub: webpush.PushSubscription, payload: any) { const data = JSON.stringify(payload); await webpush.sendNotification(sub, data); } Service Worker：接收与展示self.addEventListener('push', (event: PushEvent) => { const data = event.data ? event.data.json() : { title: '更新', body: '你有新的消息' }; event.waitUntil(self.registration.showNotification(data.title, { body: data.body, icon: '/icons/192.png', data: { url: data.url || '/' }, tag: data.tag || 'general' })); }); self.addEventListener('notificationclick', (event: NotificationEvent) => { event.notification.close(); const url = (event.notification.data && event.notification.data.url) || '/'; event.waitUntil(self.clients.matchAll({ type: 'window' }).then(clients => { for (const client of clients) { if ((client as any).url.includes(url) && 'focus' in client) return (client as any).focus(); } return self.clients.openWindow(url); })); }); 隐私与权限治理明确告知用途与频率，提供设置入口关闭推送或调整频道。仅在用户主动选择场景开启订阅；避免强制打扰与权限疲劳。不在 payload 中放置敏感信息；以点击跳转到安全页面获取详情。验证指标（Chrome 128/Edge 130/iOS 17 PWA）订阅成功率：≥ 95%（明确文案与按钮）。送达成功率（24h 抽样）：≥ 98%（有效订阅且未被系统限制）。点击转化率：≥ 8%（事务性提醒）；退订率 ≤ 3%。能耗影响：每天 ≤ 3 条通知对电量影响可忽略（抽样设备）。回退策略不支持或权限拒绝：以邮件、站内消息与轮询为替代渠道。桌面浏览器后台：避免高频噪音，采用摘要型聚合通知。测试清单订阅→后端发送→SW 展示→点击跳转全链路打通。订阅失效（例如密钥更换）：服务端清理并重建订阅。iOS PWA：确认“添加到主屏”后订阅与展示正常。应用场景交易提醒、评论/消息通知、任务截止提醒、库存/价格变动推送。