iOS端PWA中Service Worker通知点击及Firebase onMessage事件失效问题

一、notificationclick事件未触发问题 #

核心原因与解决步骤 #

1. 必须以独立模式运行PWA
   iOS仅支持添加到主屏幕并以独立模式（非Safari内打开）运行的PWA触发Service Worker的notificationclick事件。先确认你的PWA已添加到主屏幕，且manifest.json中设置了：

"display": "standalone"

2. 适配iOS的FCM数据格式
   iOS上FCM推送的data字段结构与安卓存在差异，原代码中依赖event.notification.data['FCM_MSG']可能无法正确获取数据。调整事件处理逻辑：

self.addEventListener('notificationclick', (event) => {
  console.log('Notification clicked:', event);
  event.notification.close();

  // 兼容iOS的FCM数据格式
  const payload = event.notification.data.FCM_MSG?.data || event.notification.data;
  
  event.waitUntil(
    // 包含未受控的客户端，避免遗漏已打开的PWA窗口
    clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then(clientList => {
        // 优先激活已有窗口，再打开新窗口
        for (const client of clientList) {
          if (client.url === '/' && 'focus' in client) {
            return client.focus();
          }
        }
        if (clients.openWindow) {
          return clients.openWindow(onNotificationAction(payload));
        }
      })
  );
});

3. 检查Service Worker生命周期与路径

• 确保Service Worker注册路径与页面同域，无路径错误；
• 在Safari开发者工具的「Application」标签下，确认Service Worker处于activated状态，无install/activate阶段的报错。

4. 避免冲突的click_action字段
   FCM推送时若指定了click_action，可能会绕过Service Worker直接跳转，建议移除该字段，或确保其值与PWA的scope匹配。

二、前台时onMessage无输出问题 #

核心原因与解决步骤 #

1. 确认iOS版本与权限

• iOS 15.4及以上才支持PWA前台接收推送通知，先验证系统版本；
• 必须获取用户的**「始终允许」通知权限**，「仅在使用应用时」权限无法触发前台消息回调。

2. 使用纯data类型的FCM推送 payload
   iOS前台时，包含notification字段的推送会被系统直接拦截展示，不会触发onMessage。推送时需使用纯data结构：

{
  "data": {
    "title": "前台通知标题",
    "body": "前台通知内容",
    "url": "/target-page"
  },
  "to": "DEVICE_TOKEN"
}

3. Angular中手动处理前台通知
   iOS前台收到data类型消息后不会自动弹出通知，需手动调用Notification API展示：

import { Component, OnInit } from '@angular/core';
import { Messaging } from '@angular/fire/messaging';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private messaging: Messaging) {}

  ngOnInit(): void {
    this.messaging.onMessage(payload => {
      console.log('Foreground message received:', payload);
      // 手动创建前台通知
      if (Notification.permission === 'granted') {
        new Notification(payload.data.title, {
          body: payload.data.body,
          data: payload.data
        });
      }
    });
  }
}

额外检查点 #

• 确保Firebase SDK为最新版本，旧版本可能存在iOS兼容性问题；
• 验证manifest.json中的scope字段与Service Worker注册路径匹配；
• 在Safari开发者工具的「Console」标签下，查看Service Worker的实时日志，排查隐藏报错。

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