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，使用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);