Web 推送通知工作原理概述
Web 推送通知允许网站向用户发送即时消息，即使浏览器处于关闭状态。其基本流程涉及以下几个关键组件：
- Service Worker 注册： 网站在客户端注册一个 Service Worker，它是一个在后台运行的脚本，独立于网页生命周期。
- 权限请求与订阅： 用户访问网站时，浏览器会请求发送通知的权限。一旦授权，Service Worker 会通过 PushManager API 生成一个订阅对象（PushSubscription），其中包含用于发送通知的端点 URL 和加密密钥。
- 订阅信息存储： 客户端将此订阅对象发送到后端服务器，由服务器存储起来，以便后续发送通知时使用。
- 后端发送通知： 当需要发送通知时，后端服务器使用存储的订阅信息，通过 Web Push 协议向推送服务（如 Google FCM、Apple APNs 或 Mozilla Autopush）发送请求。
- 推送服务转发： 推送服务接收到请求后，将通知转发到用户的设备。
- Service Worker 接收： 用户设备上的浏览器接收到通知，激活 Service Worker 的 push 事件监听器。
- 显示通知： Service Worker 在 push 事件中处理通知内容，并调用 self.registration.showNotification() 方法在设备上显示通知。
iOS Safari Web 推送的特殊性
尽管上述工作流程在 Chrome、Firefox、Android 浏览器等平台上通用，但 iOS Safari 对 Web 推送功能施加了一个重要的限制：Web 推送通知仅适用于已添加到主屏幕的 Web 应用程序（PWA）。这意味着，如果用户只是在 Safari 浏览器中访问您的网站，即使他们授予了通知权限，后端发送的推送通知也无法被 Service Worker 接收并显示。
这一限制是由 Apple 的设计哲学决定的，旨在将 Web 推送能力与原生应用体验更紧密地结合，鼓励用户将网站作为“应用”来使用。
前端实现：Service Worker 注册与订阅
前端代码是 Web 推送的基础，负责 Service Worker 的注册、权限请求以及将订阅信息发送到后端。
// service-worker-registration.js (在主页面中加载)
import convertVapidKey from 'convert-vapid-public-key';
window.addEventListener('load', async () => {
// 1. 注册 Service Worker
if (!('serviceWorker' in navigator)) {
console.warn('[Service Worker] Service Worker 在当前设备或环境中不可用！');
return;
}
let registration;
try {
registration = await navigator.serviceWorker.register(window.serviceWorkerPath, {
scope: '/'
});
console.info('[Service Worker] 注册成功:', registration);
} catch (error) {
console.warn('[Service Worker] 注册失败:', error);
return;
}
// 2. 订阅通知
if (
!window.webpushServerKey || // VAPID 公钥
!('Notification' in window) ||
!('PushManager' in window)
) {
console.warn('[WebPush Client] Web 推送在当前设备或环境中不可用！');
return;
}
try {
if (await Notification.requestPermission() === 'granted') {
await subscribe();
// 成功订阅后，可以立即发送一个前端通知进行确认
await registration.showNotification('恭喜！?', {
body: '您已成功订阅通知！?'
});
}
} catch (error) {
console.warn('[WebPush Client] 订阅失败:', error);
}
async function subscribe() {
try {
// 客户端订阅
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: convertVapidKey(window.webpushServerKey)
});
// 将订阅信息发送到后端存储
await fetch('/webpush/', {
method: 'POST',
mode: 'cors',
credentials: 'include',
cache: 'default',
headers: new Headers({
'Accept': 'application/json',
'Content-Type': 'application/json'
}),
body: JSON.stringify({ subscription })
});
console.info('[WebPush Client] 订阅成功:', subscription);
} catch (error) {
console.warn('[WebPush Client] 订阅失败:', error);
}
}
});上述代码展示了标准的 Service Worker 注册和推送订阅流程。其中，window.webpushServerKey 是您的 VAPID 公钥，用于验证推送请求的合法性。前端成功订阅后，会向后端发送 PushSubscription 对象，后端应将其存储在数据库中。
Service Worker 中的 push 事件监听器
Service Worker 负责在接收到推送通知时进行处理和显示。
// sw.js (Service Worker 文件)
self.addEventListener('push', event => {
try {
const json = event.data.json(); // 解析推送数据
const title = json.title || '';
const options = json.options || {};
console.info('[Service Worker] 收到推送事件:', json);
// 使用 event.waitUntil 确保通知在 Service Worker 终止前显示
event.waitUntil(self.registration.showNotification(title, options));
} catch (error) {
console.warn('[Service Worker] 推送通知处理失败:', error);
}
});这个 push 事件监听器是所有 Web 推送通知的核心。当推送服务将通知发送到设备时，它会触发此事件。Service Worker 解析收到的数据（通常是 JSON 格式），然后调用 showNotification 方法显示通知。
后端发送通知
后端使用存储的订阅信息和 VAPID 密钥来构建并发送推送请求。许多语言都有成熟的 Web Push 库可以使用。例如，在 PHP 中，可以使用 bentools/webpush-bundle 这样的库：
<?php use BenTools\WebPushBundle\Model\Message\PushNotification; use BenTools\WebPushBundle\Sender\PushMessageSender; /** @var PushMessageSender $sender */ protected $sender; // ... // 假设 $notification 是一个包含通知标题和内容的自定义对象 // $subscriptions 是从数据库中获取的用户订阅对象数组 $message = new PushNotification($notification->getTitle(), [ PushNotification::BODY => $notification->getBody(), // 可以添加更多选项，如 icon, image, badge, actions, data 等 // PushNotification::ICON => 'path/to/icon.png', // PushNotification::DATA => ['url' => 'https://your-app.com/path'], ]); // 发送通知 $this->sender->push($message, $subscriptions); ?>
后端负责构建符合 Web Push 协议的消息体，并将其发送到推送服务。VAPID 密钥用于对请求进行签名，确保其合法性。
解决 iOS Safari 不接收后端推送的问题
如前所述，iOS Safari 上的 Web 推送通知必须在网站被用户添加到主屏幕后才能正常工作。如果您的网站没有被添加到主屏幕，即使 Service Worker 注册成功，权限也已授予，后端发送的通知也无法触发 Service Worker 中的 push 事件。
解决方案的核心在于引导用户将您的网站添加到主屏幕。
- 明确的用户引导： 在您的网站上，特别是在提示用户订阅通知时，提供清晰的说明，指导 iOS 用户如何将网站添加到主屏幕。这通常涉及点击 Safari 浏览器底部的“分享”按钮，然后选择“添加到主屏幕”。
- 检测是否为 PWA： 您可以通过检测 window.matchMedia('(display-mode: standalone)').matches 来判断当前页面是否以 PWA 模式（即添加到主屏幕后）打开。如果是，您可以显示不同的 UI 或确认通知功能已完全启用。
- iOS 版本要求： 确保用户的 iOS 设备版本至少为 16.4 或更高，因为 Web 推送功能是在这个版本中首次引入的。
注意事项与总结
- 实验性功能： 在 iOS 16.4 之前，Web 推送相关功能可能需要在 Safari 的“实验性功能”中手动开启。但对于 16.4 及更高版本，一旦添加到主屏幕，这些功能通常是默认启用的。
- 调试挑战： 在 iOS 设备上调试 Service Worker 和推送通知可能比在桌面浏览器上更具挑战性。您可以使用 Safari 的 Web Inspector 连接到 iOS 设备进行调试。
- 用户体验： 考虑到 iOS 的特殊性，设计您的通知策略时应充分考虑这一点。对于未添加到主屏幕的 iOS 用户，您可能需要提供替代的通知方式（如邮件、短信）或更积极地引导他们将网站添加到主屏幕。
- VAPID 密钥： 确保您的 VAPID 公钥和私钥配置正确，并且在前端和后端都使用正确的密钥。
- 订阅有效性： 定期清理无效的订阅（例如，用户已取消订阅或设备已离线很长时间），以避免向无效端点发送通知。
总之，要在 iOS Safari 上成功实现后端发送的 Web 推送通知，关键在于理解并满足其“添加到主屏幕”的先决条件。通过清晰的用户引导和正确的实现，您可以为 iOS 用户提供与原生应用相似的通知体验。
