iOS端桌面PWA如何实现Web推送通知的图标角标计数？

针对iOS端PWA无法自动同步通知角标、无法感知通知清除、service worker受限等问题，以下是可行的落地方案：

1. 后端维护未读计数（核心折中方案） #

由于iOS限制无法追踪通知中心的清除操作，只能通过后端统一维护用户的未读通知计数，尽可能缩小偏差：

• 推送触发时：后端给当前用户的未读计数+1，并将该计数写入推送payload（注意payload大小限制，通常不超过4KB）
• service worker处理推送：收到推送事件后，直接从payload中提取计数，调用Notification.setAppBadge(count)设置角标
• 用户交互时：
  • 用户点击通知：前端发送请求告知后端标记该通知为已读，同时调用Notification.clearAppBadge()
  • 用户打开APP：无论从主屏幕还是通知进入，前端主动拉取后端最新计数，同步角标或直接清除

2. 前端激活时强制同步角标 #

利用页面加载和可见性变化事件，确保用户打开APP时角标状态准确：

// 页面加载或从后台切回时同步角标
async function syncAppBadge() {
  if (!('Notification' in window) || !Notification.setAppBadge) return;
  
  try {
    // 优先拉取后端真实计数（需带用户认证，比如credentials: 'include'）
    const response = await fetch('/api/user/unread-notifications', { credentials: 'include' });
    const count = await response.json();
    
    if (count > 0) {
      Notification.setAppBadge(count);
    } else {
      Notification.clearAppBadge();
    }
  } catch (error) {
    // 拉取失败时直接清除角标，避免显示过期计数
    Notification.clearAppBadge();
  }
}

// 绑定事件
window.addEventListener('load', syncAppBadge);
window.addEventListener('visibilitychange', () => {
  if (!document.hidden) syncAppBadge();
});

3. 无数字圆点的替代实现 #

iOS不支持Notification.setAppBadge()无参数显示圆点，可通过以下方式模拟：

• 当后端未读计数≥1时，统一调用Notification.setAppBadge(1)，视觉上接近无数字红点
• 用户打开APP后，立即调用Notification.clearAppBadge()清除标记

4. 规避service worker认证请求限制 #

如果service worker无法发起带用户认证的请求，可尝试：

• 在推送payload中携带一次性临时token，后端通过该token验证用户身份并返回计数
• 当用户打开APP时，将认证信息同步到service worker可访问的CacheStorage，后续service worker可从中读取认证信息发起请求（局限性：依赖页面曾被打开）

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