如何在Angular项目中通过Firebase云函数为FCM推送通知添加图标/徽章

FCM的通知配置存在安卓、iOS双端规则差异，你当前的写法不符合平台规范所以配置不生效，具体配置规则和修正方案如下： #

1. 基础错误说明 #

• 云函数运行在服务端，无法读取你的前端项目本地assets路径，所以直接传项目内资源路径必然失效
• 两端的badge字段均不支持传入图片路径，你的写法本身不符合字段定义要求

2. 徽章（badge）配置规则 #

• iOS端：badge字段仅支持传入数字类型值，表示应用图标右上角的角标数字，不需要也不支持自定义徽章图片，比如要显示角标1就直接填1
• 安卓端：原生FCM没有单独的徽章图片配置项，角标默认复用通知小图标，角标数量需要在安卓配置项的notificationCount字段传数字值，部分国产系统还需要额外在客户端原生层开启桌面角标权限

3. 通知图标（icon）配置规则 #

安卓端要求 #

• icon字段仅支持传入安卓原生项目res/drawable目录下的资源文件名，不能传远程URL或者前端项目路径，比如你把图标命名为ic_notification.png放到安卓项目对应资源目录，云函数里就填"ic_notification"
• 如果需要用远程图片作为通知大图标，要把URL放到notification.image字段，而不是icon字段

iOS端要求 #

• 云函数侧的icon字段不生效，通知图标默认复用应用主图标，需要自定义通知图标的场景要在iOS客户端的Notification Service Extension层配置，云函数侧不需要传值
• 要在通知内展示远程图片需要先开启mutable-content权限，再把图片URL放到自定义字段，由客户端自行下载渲染

修正后的云函数代码示例 #

const payload = {
  notification: {
    title: notificacion.titulo,
    // 安卓端小图标：对应安卓项目res/drawable下的ic_notification资源
    icon: "ic_notification",
    // 通知大图片（可选）：远程公网可访问的图片URL填在这里
    image: notificacion.photoURL
  },
  apns: {
    payload: {
      aps: {
        // iOS端角标数字，按实际需要填写
        badge: 1,
        // 开启可变通知权限，支持iOS端自定义通知内容
        "mutable-content": 1
      }
    }
  },
  android: {
    notification: {
      // 安卓端角标数量
      notificationCount: 1
    }
  }
};

额外注意事项 #

• 安卓端的通知小图标必须是带透明通道的白色矢量图，Android 5.0及以上系统会自动把图标处理为白色剪影，带颜色的非透明图标会显示为灰色方块
• 所有要用到的本地通知资源必须放到对应端的原生项目资源目录，前端项目的assets目录云函数和原生通知模块都无法直接读取
• 用到的远程图片URL必须是公网可直接访问的HTTPS地址，不能配置访问权限限制，比如Firebase存储的图片需要开启公开读权限才能正常加载

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