iOS 16.4 Safari中PWA推送通知无法按Tag分组替换求助

核心问题分析 #

你的代码逻辑在Android上正常，但iOS 16.4 Safari中同Tag通知无法替换，重复显示，本质是iOS对PWA通知的Tag匹配、通知替换逻辑存在特殊处理，和Android/标准规范有差异。

针对性修复方案 #

1. 避免手动关闭旧通知再创建新通知 #

iOS Safari中，手动关闭旧通知后立即创建同Tag通知，系统可能无法触发替换逻辑。建议直接调用showNotification并传入相同Tag，依赖系统自动完成替换：

// 替换原关闭旧通知再创建的逻辑
const amount = notifications.length > 0 
  ? (notifications[0].data?.amount ? notifications[0].data.amount + 1 : 2) 
  : 1;

let title = '';
if (tag === 'REPLY') {
  title = amount === 1 ? "You have a new reply" : `You have ${amount} new replies`;
} else if (tag === 'MENTION') {
  title = amount === 1 ? "You were mentioned once" : `You were mentioned ${amount} times`;
}

// 直接调用showNotification，保留原通知的关键参数，传入相同Tag
return self.registration.showNotification(title, {
  ...payload.options, // 复用原通知的body、timestamp、icon等
  tag,
  data: {
    ...payload.options.data,
    url: '/notifications',
    amount
  }
});

2. 兼容iOS的Tag过滤逻辑 #

iOS上getNotifications({tag})可能无法正确过滤同Tag通知，改为获取所有通知后手动过滤：

// 替换原getNotifications({tag})调用
const allNotifications = await self.registration.getNotifications();
const notifications = allNotifications.filter(n => n.tag === tag);

3. 强制关闭多余同Tag通知 #

如果发现多条同Tag通知，先统一关闭再创建新通知，避免iOS累积显示：

if (notifications.length > 1) {
  console.error(`more than one notification with tag ${tag} found`);
  notifications.forEach(n => n.close());
}

修改后的完整Service Worker代码 #

self.addEventListener('push', async function (event) {
  const payload = event.data?.json();
  if (!payload) return;
  const { tag } = payload.options;

  event.waitUntil((async () => {
    if (!['REPLY', 'MENTION'].includes(tag)) {
      return self.registration.showNotification(payload.title, payload.options);
    }

    // 兼容iOS：获取所有通知后过滤同Tag项
    const allNotifications = await self.registration.getNotifications();
    const notifications = allNotifications.filter(n => n.tag === tag);

    // 清理多余同Tag通知
    if (notifications.length > 1) {
      console.error(`more than one notification with tag ${tag} found`);
      notifications.forEach(n => n.close());
    }

    const amount = notifications.length > 0 
      ? (notifications[0].data?.amount ? notifications[0].data.amount + 1 : 2) 
      : 1;

    let title = '';
    if (tag === 'REPLY') {
      title = amount === 1 ? "You have a new reply" : `You have ${amount} new replies`;
    } else if (tag === 'MENTION') {
      title = amount === 1 ? "You were mentioned once" : `You were mentioned ${amount} times`;
    }

    // 依赖系统自动替换同Tag通知，不手动关闭旧通知
    return self.registration.showNotification(title, {
      ...payload.options,
      tag,
      data: {
        ...payload.options.data,
        url: '/notifications',
        amount
      }
    });
  })());
});

额外注意事项 #

• 确保PWA已添加到iOS主屏幕：只有主屏幕的PWA才能正常处理推送通知的Tag替换逻辑。
• 验证Tag一致性：推送Payload中的Tag和后续创建通知时的Tag必须完全一致（包括大小写、字符串内容）。
• iOS 16.4的notification.data持久化可能不稳定，建议推送时尽量携带amount参数，减少对旧通知数据的依赖。

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