iOS Safari 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);     }   } });

// 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);   } });

// 示例（PHP，使用BenToolsWebPushBundle） /** @var BenToolsWebPushBundleSenderPushMessageSender $sender */ protected $sender;  // ...  // 构建推送消息内容 $message = new BenToolsWebPushBundleModelMessagePushNotification($title, [   PushNotification::BODY => $notification->getBody(),   // ... 其他通知选项，如图标、点击行为等 ]);  // 向所有订阅者发送消息 $this->sender->push($notification->createMessage(), $subscriptions);