1. Web Push 通知基础概念
web push 通知允许网站向用户发送消息，即使他们当前没有打开该网站。这依赖于几个核心组件：
- Service Worker: 一个在浏览器后台运行的脚本，负责拦截网络请求、管理缓存，并接收推送消息。
- Push API: 允许网站订阅推送服务，并接收来自服务器的推送消息。
- Notifications API: 用于在用户设备上显示通知。
- VAPID (Voluntary Application Server Identification): 一种用于识别应用程序服务器的密钥对，确保只有授权的服务器才能发送推送通知。
2. 前端实现：订阅与权限管理
在前端，实现Web Push通知主要包括以下步骤：注册Service Worker、请求通知权限以及将用户订阅信息发送至后端。
2.1 Service Worker 注册
Service Worker 是 Web Push 通知的基础。它必须在一个单独的文件中，并在主页面加载时进行注册。
// app.js (或您的主应用脚本)
import convertVapidKey from 'convert-vapid-public-key'; // 假设您使用此库转换VAPID公钥
window.addEventListener('load', async () => {
// 检查浏览器是否支持Service Worker
if (!('serviceWorker' in navigator)) {
console.warn('[Service Worker] 您的设备或环境不支持Service Worker！');
return;
}
let registration;
try {
// 注册Service Worker，指定其作用域
registration = await navigator.serviceWorker.register(window.serviceWorkerPath, {
scope: '/' // Service Worker 的作用域，通常是根路径
});
console.info('[Service Worker] 注册成功:', registration);
} catch (error) {
console.warn('[Service Worker] 注册失败:', error);
return;
}
// 2. 订阅通知
// 检查Web Push相关API是否可用
if (
!window.webpushServerKey || // VAPID公钥
!('Notification' in window) ||
!('PushManager' in window)
) {
console.warn('[WebPush Client] 您的设备或环境不支持Web Push！');
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) // 您的VAPID公钥
});
// 将订阅信息发送到后端存储
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);
}
}
});2.2 Service Worker 中的 push 事件监听
Service Worker 负责接收来自后端推送服务的消息。当后端发送推送通知时，Service Worker 中的 push 事件监听器会被触发。
// 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);
// 使用waitUntil确保通知在Service Worker关闭前显示
event.waitUntil(self.registration.showNotification(title, options));
} catch (error) {
console.warn('[Service Worker] 推送通知处理失败:', error);
}
});3. 后端实现：发送推送通知
后端负责存储用户订阅信息，并使用 VAPID 密钥对通过推送服务向用户发送通知。具体的实现会依赖于您选择的后端语言和库。
// 示例（PHP，使用BenTools\WebPushBundle） /** @var \BenTools\WebPushBundle\Sender\PushMessageSender $sender */ protected $sender; // ... // 构建推送消息内容 $message = new \BenTools\WebPushBundle\Model\Message\PushNotification($title, [ PushNotification::BODY => $notification->getBody(), // ... 其他通知选项，如图标、点击行为等 ]); // 向所有订阅者发送消息 $this->sender->push($notification->createMessage(), $subscriptions);
在后端发送推送通知时，您需要：
- 存储订阅信息: 前端发送的 PushSubscription 对象需要存储在数据库中，包括 endpoint、p256dh 和 auth 密钥。
- 使用 VAPID 私钥: 后端使用 VAPID 私钥对推送请求进行签名，以验证其身份。
- 选择合适的库: 许多编程语言都有成熟的库来处理Web Push协议，例如 PHP 的 web-push-php 或 BenTools\WebPushBundle，Node.js 的 web-push 等。
4. iOS Safari 的特殊要求与解决方案
尽管前端和服务工作者代码在其他浏览器（如macOS Chrome, Android Chrome, Samsung Internet）上工作正常，但在iOS Safari上，从后端发送的推送通知可能无法接收。这并非代码错误，而是iOS Safari对Web Push通知的特定限制。
核心问题： 根据WebKit官方博客和caniuse.com的资料，iOS Safari (16.4及更高版本) 上的Web Push通知有一个关键限制：网站必须首先被用户添加到主屏幕（Add to Home Screen）才能接收来自后端的推送通知。
这意味着，如果用户只是在Safari浏览器中访问您的网站，即使他们授予了通知权限，Service Worker 的 push 事件监听器也不会被触发来接收后端推送。只有当您的网站作为一个“Web App”被添加到主屏幕后，它才具备接收后端推送通知的能力。
解决方案：
- 引导用户添加到主屏幕: 在您的网站上，尤其是当您希望用户接收推送通知时，应明确引导iOS用户将网站添加到主屏幕。这通常通过Safari的“共享”菜单中的“添加到主屏幕”选项完成。
- 测试验证: 在iOS设备上测试后端推送时，务必确保您的网站已经通过“添加到主屏幕”功能成为了一个独立的应用图标。
5. 注意事项与调试技巧
- iOS 版本: 确保您的iOS设备运行的是16.4或更高版本，这是Web Push在iOS Safari上首次支持的版本。
- 实验性功能: 尽管在Safari的“实验性功能”中启用“Notifications”、“Push API”和“Service Workers”是必要的，但这并不能替代“添加到主屏幕”的要求。
- 调试:
总结
在iOS Safari上实现Web Push通知，除了常规的Service Worker注册、权限请求和订阅流程外，最关键的一点是要求用户将网站“添加到主屏幕”。这一独特的限制是iOS生态系统为了提供更类似于原生应用体验而设定的。理解并妥善处理这一要求，是确保您的Web Push功能在iOS设备上全面生效的关键。开发者应在产品设计和用户引导中充分考虑这一特性，以提供无缝的通知体验。
