如何为cordova-plugin-background-mode设置自定义图标？

我之前也碰到过这个一模一样的坑，白方块图标确实让人头疼，咱们一步步来把它搞定：

1. 按Android密度规范准备图标并配置资源 #

Android通知图标需要对应不同屏幕密度的版本，只放一个drawable目录的图标会导致高分辨率设备加载异常，甚至插件无法识别。

首先准备以下尺寸的透明背景单色图标（划重点：必须透明背景，前景为白色/黑色，系统会自动适配通知栏主题）：

• mdpi: 48×48px
• hdpi: 72×72px
• xhdpi: 96×96px
• xxhdpi: 144×144px
• xxxhdpi: 192×192px

然后在config.xml的<platform name="android">节点下添加所有密度的资源映射：

<platform name="android">
  <!-- 对应不同密度的通知图标 -->
  <resource-file src="img_res/icons/android/mdpi/icon_noti.png" target="res/drawable-mdpi/iconnoti.png" />
  <resource-file src="img_res/icons/android/hdpi/icon_noti.png" target="res/drawable-hdpi/iconnoti.png" />
  <resource-file src="img_res/icons/android/xhdpi/icon_noti.png" target="res/drawable-xhdpi/iconnoti.png" />
  <resource-file src="img_res/icons/android/xxhdpi/icon_noti.png" target="res/drawable-xxhdpi/iconnoti.png" />
  <resource-file src="img_res/icons/android/xxxhdpi/icon_noti.png" target="res/drawable-xxxhdpi/iconnoti.png" />
</platform>

2. 确保插件配置在deviceready后执行 #

Cordova插件必须等deviceready事件触发后才能正常初始化，你的配置代码一定要放在这个事件回调里：

document.addEventListener('deviceready', function() {
  // 先启用后台模式
  cordova.plugins.backgroundMode.enable();
  
  // 设置自定义图标等默认配置
  cordova.plugins.backgroundMode.setDefaults({
    resume: true,
    hidden: false,
    bigText: false,
    icon: 'iconnoti' // 只写文件名，不要加.png或路径
  });

  // 如果需要在运行时更新图标，用update方法
  // cordova.plugins.backgroundMode.update({ icon: 'iconnoti' });
}, false);

3. 关键：遵守Android通知图标样式规则 #

这是最容易被忽略的点：Android通知图标必须是透明背景的单色图形。如果你的图标是彩色的，系统会自动将其处理成白方块——这是Android系统的强制要求，不是插件的问题。

你可以用图标生成工具制作符合规范的通知图标，确保背景完全透明，前景只有一种颜色。

4. 清理项目缓存并重建 #

有时候旧的资源缓存会导致新图标不生效，执行以下步骤彻底重建：

1. 移除Android平台：

   cordova platform remove android
   

2. 重新添加Android平台：

   cordova platform add android
   

3. 重新构建项目：

   cordova build android
   

5. 更新插件到最新版本 #

旧版本的cordova-plugin-background-mode可能存在图标配置的bug，建议更新到最新版：

cordova plugin update cordova-plugin-background-mode

做完这些步骤后，重新运行APP，进入后台模式应该就能看到自定义的通知图标了。

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