Flutter如何通过FCM动态修改通知图标？含主流场景及实践问题

一、Flutter + FCM动态修改通知图标 #

FCM默认的通知消息由系统直接展示，无法动态修改通知图标，必须通过数据消息自行接管通知展示逻辑，结合本地通知插件实现自定义图标。

Android端实现步骤 #

1. 准备图标资源：将符合Android规范的透明背景单色图标放入android/app/src/main/res/drawable或mipmap目录；若使用网络图片，需先下载到本地缓存目录。
2. 依赖本地通知插件：在pubspec.yaml中添加flutter_local_notifications，完成Android端初始化配置。
3. 处理FCM数据消息：在FCM的消息回调（onMessage、onMessageOpenedApp、onBackgroundMessage）中，调用插件的show方法，指定icon参数为本地资源名或缓存图片路径：

   await flutterLocalNotificationsPlugin.show(
     0,
     '通知标题',
     '通知内容',
     NotificationDetails(
       android: AndroidNotificationDetails(
         'your_channel_id',
         'your_channel_name',
         icon: '@mipmap/avatar_icon', // 本地资源或缓存文件路径
       ),
     ),
   );
   

iOS端实现步骤 #

iOS默认用App图标作为通知图标，动态替换需结合扩展能力：

1. 排查Notification Service Extension失败问题：
   • 确保Extension的Bundle ID与主APP关联（格式如主APP Bundle ID + .notification-service）。
   • 确认Deployment Target与主APP一致（需iOS 10+）。
   • 仅数据消息或含data字段的混合消息会触发Extension，纯通知消息直接由系统展示，无法拦截修改。
2. 自定义图标区域内容：
   • 若要替换图标位置为自定义图片（如头像），需创建UNNotificationContentExtension，自定义通知布局，将头像放在原图标位置。
   • 在UNNotificationServiceExtension中下载头像到本地，通过UNNotificationAttachment传递给Content Extension，在自定义布局中加载展示。

二、主流APP的实现方式（如微信、QQ） #

这类APP核心是完全接管通知展示流程，不依赖FCM默认通知：

• 服务器下发推送时，附带目标图片（如用户头像）的URL或本地资源标识。
• 客户端接收FCM数据消息后，先将网络图片下载到本地缓存（避免重复下载）。
• 调用本地通知API构建通知：
  • Android端直接指定通知图标为缓存图片路径或本地资源。
  • iOS端通过UNNotificationContentExtension自定义通知UI，将头像放在原图标位置，实现完全自定义的通知样式。

内容的提问来源于stack exchange，提问作者Yousef Al-Abdulhadi