深入理解 iOS Safari Web 推送通知：从后端发送的限制与解决方案

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

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

<?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);

?>