FCM推送通知无法接收，iPhone Safari控制台报错求助

针对你遇到的push event ended without showing any notification may trigger removal of the push subscription.错误，核心原因是Service Worker的push事件触发后，没有成功调用showNotification()显示通知，导致Safari判定订阅无效，同时用户收不到通知。以下是具体排查和修复步骤：

1. 检查并修正Service Worker的push事件处理逻辑 #

必须确保在push事件回调中调用self.registration.showNotification()，且用event.waitUntil()包裹，保证异步操作完成，避免事件提前结束。同时要处理可能的异常：

self.addEventListener('push', (event) => {
  // 打印日志确认消息是否接收
  console.log('Push事件触发，接收数据:', event.data?.text());
  
  // 解析FCM推送的payload
  const payload = event.data?.json() || {};
  const notificationData = payload.notification || {};
  
  // 构造通知选项（Safari要求icon为本地资源，尺寸≥192x192）
  const notificationOptions = {
    body: notificationData.body || '新通知',
    icon: '/icons/icon-192x192.png', // 确保路径正确，资源存在
    badge: '/icons/badge-72x72.png',
    data: payload.data || {} // 可选，携带额外数据
  };

  // 用waitUntil包裹，保证通知显示完成前事件不结束
  event.waitUntil(
    self.registration.showNotification(notificationData.title || '通知', notificationOptions)
      .catch(err => {
        console.error('显示通知失败:', err);
        // 可在此添加重试逻辑或错误上报
      })
  );
});

2. 调整FCM消息格式适配APNs（苹果推送服务） #

FCM向Safari推送时需通过APNs转发，必须确保消息包含APNs兼容的格式：

• 使用Firebase Admin SDK发送时，需添加apns字段指定APNs专属配置：

  const message = {
    token: '用户的推送订阅Token',
    notification: {
      title: '测试标题',
      body: '测试内容'
    },
    apns: {
      payload: {
        aps: {
          alert: {
            title: '测试标题',
            body: '测试内容'
          },
          sound: 'default' // 可选，添加通知声音
        }
      }
    }
  };
  // 发送消息
  admin.messaging().send(message);
  

• 若直接调用FCM HTTP API，需在请求体中包含apns节点，否则Safari无法正确解析消息。

3. 验证Service Worker和订阅状态 #

• 在Safari开发者工具的「Service Workers」面板，确认Service Worker处于**激活（Activated）**状态，无报错信息。
• 在控制台执行以下代码，检查推送订阅是否有效：

  navigator.serviceWorker.ready.then(reg => reg.pushManager.getSubscription())
    .then(sub => {
      console.log('当前订阅信息:', sub);
      // 有效订阅的endpoint应为苹果APNs地址：https://web.push.apple.com/...
    });
  

4. 确认Safari通知权限设置 #

• 打开Safari偏好设置 → 网站 → 通知，找到你的网站，确保权限设置为「允许」。
• 若用户曾拒绝权限，需引导用户手动重新授权，代码中需处理权限请求结果：

  Notification.requestPermission().then(perm => {
    if (perm !== 'granted') {
      console.error('未获取通知权限，无法接收推送');
      // 可在此提示用户开启权限
    }
  });
  

5. 捕获Service Worker异常 #

添加全局错误监听，排查是否有未捕获的异常导致通知无法显示：

self.addEventListener('error', (err) => {
  console.error('Service Worker全局错误:', err);
});

self.addEventListener('unhandledrejection', (event) => {
  console.error('未处理的Promise拒绝:', event.reason);
});

内容的提问来源于stack exchange，提问作者kayu