Notification badges are your PWA's install retention signal

为什么通知徽章对已安装 PWA 很重要

通知徽章（badge）是当空间不足以显示完整通知时（如 Android 通知栏）在应用图标上显示的小型徽章图像。对于已安装的 PWA，徽章提供了以下关键价值：

• 在空间受限时仍可见：Android 通知栏、锁屏等场景下，完整通知可能被折叠，徽章持续提醒用户
• 品牌一致性：自定义徽章可以展示应用标识，而非通用的通知图标
• 重新参与触发器：徽章作为视觉提示，引导用户点击查看详细信息
• 多通知聚合：当有多条通知时，徽章提示有未读内容

MDN 文档明确指出，在 Android 设备上，徽章应适应最高 4x 分辨率（约 96x96 像素），图像会自动遮罩。

如何实施通知徽章

基础实施

在创建通知时设置 badge 属性：

const payload = {
  body: 'New content available in your PWA',
  icon: '/icons/icon-192.png',
  badge: '/icons/badge-96.png', // 必须，即使通知栏可以显示完整内容
  vibrate: [200, 100, 200],
};

registration.showNotification('Update available', payload);

在 Service Worker 中

self.addEventListener('push', (event) => {
  const data = event.data.json();
  const options = {
    body: data.message,
    icon: '/icons/icon-192.png',
    badge: '/icons/badge-96.png', // 徽章不应省略
    vibrate: [200, 100, 200],
    data: {
      url: data.url,
    },
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

徽章资源准备清单

尺寸和格式

• [ ] 96x96 像素（推荐）：适应 Android 4x 分辨率要求
• [ ] 24x24 像素（备选）：空间极度受限时的降级方案
• [ ] PNG 或 WebP：支持透明背景，确保自动遮罩效果
• [ ] 单色或简单图案：徽章尺寸小，复杂细节在小尺寸下可能模糊

设计原则

• [ ] 核心标识：徽章应代表应用核心功能/品牌（字母、符号、简化 logo）
• [ ] 高对比度：深背景用浅色，浅背景用深色，确保可见性
• [ ] 可读性优先：不要尝试在徽章中显示数字或文字，OS 可能自动/遮罩
• [ ] 测试场景：验证在通知栏、锁屏、横幅等所有场景下的显示效果

平台差异

• [ ] Android：官方支持，自动遮罩圆形/方形，96x96 像素
• [ ] iOS：支持情况需测试，可能不显示或使用系统默认徽章
• [ ] 桌面浏览器：支持程度取决于 OS 通知系统
• [ ] Safari Desktop：可能不显示徽章，准备降级方案

与其他通知属性配合

const notificationOptions = {
  // 核心内容
  body: 'You have 3 new messages',
  icon: '/icons/icon-192.png',

  // 徽章（空间受限时显示）
  badge: '/icons/badge-96.png',

  // 视觉提示
  image: '/images/notification-hero.webp', // 大图点击展开后显示

  // 交互
  actions: [
    { action: 'view', title: 'View' },
    { action: 'dismiss', title: 'Dismiss' },
  ],

  // 标签聚合（相同 tag 的通知会聚合）
  tag: 'messages-updates',

  // 数据（点击时传递到页面）
  data: { url: '/messages' },
};

对开发者意味着什么

产品机会

• 安装后参与：徽章在非通知场景下仍提醒用户重新打开 PWA
• 品牌强化：每次通知都展示应用标识，建立长期记忆
• 多通知管理：tag 属性聚合同类通知，避免通知栏泛滥

技术债务

• 资源维护：需要准备多尺寸徽章资源，更新应用 logo 时同步更新
• 平台差异适配：不同 OS 显示行为不同，需要跨平台测试
• 兼容性检查：部分浏览器可能不支持，准备 fallback（使用系统默认）

用户体验

• 不要过度使用：只有真正的更新事件才通知，避免徽章疲劳
• 数字 vs 徽章：Android 支持 badge 数值（显示具体消息数），但 MDN 文档建议使用图像徽章以获得更好的品牌一致性
• 清除机制：用户点击通知后，徽章应自动清除（.click() 处理）

检查决策框架

| 场景 | 使用徽章 | 使用数字通知值 | 不通知 | |------|----------|----------------|--------| | 消息类应用 1 条消息 | ✅ 使用品牌徽章 | 可选，但徽章优先 | ❌ | | 消息类应用 5+ 消息 | ✅ 徽章 + 数字 | ✅ 合适 | ❌ | | 非紧急内容更新 | ✅ 品牌提醒 | ❌ 过于强烈 | ⚠️ 考虑静默更新 | | 营销促销 | ❌ 避免干扰 | ❌ 禁止 | ✅ 改用应用内横幅 | | 系统维护通知 | ⚠️ 必要时 | ⚠️ 必要时 | ⚠️ 尽量避免 |

下一步

1. 资源准备：设计 96x96 徽章图标，测试自动遮罩效果
2. 渐进实施：先在关键通知场景（消息、更新）添加徽章
3. 数据分析：跟踪有徽章通知的点击率 vs. 无徽章通知
4. A/B 测试：对比徽章 vs. 数字 vs. 无徽章对重新参与的影响

通知徽章是小而有力的 UX 细节。好的徽章让你的 PWA 在通知栏中始终可识别、可发现。