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：确认“添加到主屏”后订阅与展示正常。应用场景交易提醒、评论/消息通知、任务截止提醒、库存/价格变动推送。