使用Ionic3+Firebase Cloud Messaging时通知栏无法显示图标及图片问题

我之前在Ionic 3项目里集成FCM时，也碰到过通知栏图标和图片不显示的坑，结合你的payload和场景，给你几个实用的排查和解决方向：

一、通知图标不显示的问题 #

• 检查图标文件的放置规范：
  Android对通知图标有严格要求——必须是透明背景的PNG图，并且要按不同dpi尺寸放在platforms/android/res/对应的drawable-mdpi、drawable-hdpi、drawable-xhdpi等文件夹里。你payload里写的"icon": "icon"，要确保这些文件夹里都有同名的icon.png，而且文件名大小写完全匹配（Android系统区分文件名大小写）。
• 配置插件默认通知图标：
  在项目的config.xml里添加偏好设置，指定FCM插件默认使用的通知图标：

  <preference name="AndroidNotificationIcon" value="@drawable/icon" />
  

  这样插件会自动调用对应目录下的图标，避免payload里的配置失效。

二、通知主图（大图片）不显示的问题 #

• 确认图片URL的可用性：
  你payload里的image链接必须是公开可访问的，不能有防盗链、权限限制，而且图片格式要为PNG/JPG，文件大小尽量控制在2MB以内，否则FCM可能无法加载。
• 前台通知需手动处理：
  当APP处于前台时，FCM插件默认的通知可能不会自动渲染大图片。这种情况下，建议把图片URL放到data字段里，然后在客户端通过本地通知插件手动创建通知：
  首先修改你的payload：

  {
    "notification":{
      "title":"Notification Title!",
      "body" : "Custom Dummy message comes here",
      "sound":"default",
      "vibrate" : true,
      "click_action":"FCM_PLUGIN_ACTIVITY"
    },
    "data" : {
      "id": 5462,
      "image" : "https://image.png",
      "icon" : "icon"
    },
    "to":"/topics/all"
  }
  

  然后在Ionic代码里监听通知，并用cordova-plugin-local-notifications创建自定义通知：

  import { FCM } from '@ionic-native/fcm';
  import { LocalNotifications } from '@ionic-native/local-notifications';
  
  constructor(private fcm: FCM, private localNotifications: LocalNotifications) {}
  
  // 在初始化方法里添加监听
  initFCM() {
    this.fcm.onNotification().subscribe(data => {
      if (data.wasTapped) {
        // 处理后台点击通知的逻辑
        console.log('Notification tapped:', data);
      } else {
        // 前台收到通知，手动创建带图片的本地通知
        this.localNotifications.schedule({
          title: data.title,
          text: data.body,
          icon: `res://${data.icon}`, // 指向Android资源目录的图标
          image: data.image,
          sound: 'default',
          vibrate: true,
          foreground: true // 确保前台显示
        });
      }
    });
  }
  

  记得先安装本地通知插件：

  cordova plugin add cordova-plugin-local-notifications
  npm install @ionic-native/local-notifications
  

三、其他注意事项 #

• 检查click_action配置：
  确保click_action指向的Activity在AndroidManifest.xml里存在，通常可以直接用你的主Activity（比如com.yourapppackage.MainActivity），避免因Activity不存在导致通知显示异常。
• 测试不同状态：
  分别测试APP前台、后台、完全关闭三种状态下的通知显示，有些配置只在特定状态下生效，比如后台通知可能直接由系统处理，前台则需要客户端自定义。

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