Ionic 4 + FCM - 如何自定义 Firebase 云消息 (FCM) 通知图标和颜色？答案

【问题标题】：Ionic 4 + FCM - How to customize Firebase Cloud Messaging (FCM) Notification Icon and Color?Ionic 4 + FCM - 如何自定义 Firebase 云消息 (FCM) 通知图标和颜色？
【发布时间】：2019-11-06 04:26:02
【问题描述】：

在构建 Ionic 4 应用程序和 FCM plugin 时，一个非常令人沮丧的问题是无法设置带有自定义颜色的自定义通知图标。我想出了如何实现这一点，所以只想与我们美丽的 StackOverflow 社区分享解决方案:)

因此，请在下面的答案中查看自定义 Firebase 云消息 (FCM) 通知图标的解决方案及其适用于 Android 平台的颜色。

【问题讨论】：

标签： ionic-framework firebase-cloud-messaging ionic4 notification-icons

【解决方案1】：

我正在使用 Ionic 4 + FCM plugin，这对我有用（2019 年 11 月）。 请注意，此解决方案是特定于 Android 的，即此解决方案中显示的设置将有助于自定义 Android 平台上的通知图标外观。

让我们从一系列步骤开始：

1.在位于应用根文件夹的 config.xml 中： Example: (yourapp/config.xml)

将以下内容添加到末尾的<widget id=""...> 标记中：

xmlns:android="http://schemas.android.com/apk/res/android"

现在应该是这样的：

<widget id="com.mydomain.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">

或简单地说，复制上面的行，将小部件 id 的值替换为您自己的值。

2。在同一个 config.xml 文件中：

在标签中：<platform name="android"> 和 </platform>，添加：

<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="app/src/main/res/drawable/fcm_push_icon.png" />
<resource-file src="res/drawable-hdpi/fcm_push_icon.png" target="platforms/android/res/drawable-hdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-mdpi/fcm_push_icon.png" target="platforms/android/res/drawable-mdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxxhdpi/fcm_push_icon.png" />
<resource-file src="colors.xml" target="app/src/main/res/values/colors.xml" />
<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />
    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/colorPrimary" />                      
</config-file>

3.访问以下链接： Notification Icon Generator

在透明背景上上传您的徽标的白色版本（单色）。如果你上传一个彩色版本，你会得到一个深灰色的图标，看起来很讨厌。如果您的徽标没有白色版本，请进行设计。保持其余设置不变。对于名称文本框值，输入：fcm_push_icon。然后单击蓝色圆形按钮下载 zip 文件。

4.解压 zip 文件并将内容复制到您的应用根文件夹：

解压缩您刚刚在上述步骤中下载的 zip 文件，并将其内容解压缩到一个文件夹中。您会注意到它包含一个 res 文件夹。如果您打开此文件夹，它将包含具有以下名称的其他文件夹：

drawable-hdpi
drawable-mdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

每个文件夹都将包含一个名为“fcm_push_icon.png”的 PNG 图标。这些不同文件夹中的图标之间的唯一区别是它们的大小。

5.将 res 文件夹复制到项目根目录：

将上述第 4 点中的 res 文件夹复制到应用的根文件夹中。所以它现在应该是这样的：

yourApp/res/drawable-hdpi/fcm_push_icon.png
yourApp/res/drawable-mdpi/fcm_push_icon.png
yourApp/res/drawable-xhdpifcm_push_icon.png
yourApp/res/drawable-xxhdpi/fcm_push_icon.png
yourApp/res/drawable-xxxhdpi/fcm_push_icon.png

6.在应用的根文件夹中创建 colors.xml：

现在在应用的根文件夹中创建一个名为 colors.xml 的新文件。所以它现在应该是这样的：

yourApp > colors.xml

7.将以下内容复制到 colors.xml 中：

将以下内容复制到您在上述第6步中创建的文件colors.xml中并保存。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3880ff</color>
    <color name="colorAccent">#3880ff</color>
    <color name="white">#FFFFFF</color>
    <color name="ivory">#FFFFF0</color>
    <color name="orange">#FFA500</color>
    <color name="navy">#000080</color>
    <color name="black">#000000</color>
</resources>

8.更改 colorPrimary 的值：

将标签内的值：<color name="colorPrimary"></color> 更改为您喜欢的任何颜色。例如，您可以使用：

<color name="colorPrimary">#eedd33</color>

9.构建您的应用：

就是这样！现在只需构建您的应用程序。当构建运行时，它将所有文件从src 目录复制到target 目录，应用程序将从target 目录中读取内容。

因此，从现在开始，每当您在基于 Ionic 的 Android 应用上发送通知时，接收者都会在通知中看到您的彩色应用图标。

10.享受！！！

【讨论】：

IOS怎么样？我们是否还需要为 IOS 进行任何设置？请提前回复谢谢。
@Ram 是的，我相信 iOS 需要遵循不同的步骤。我认为步骤 1 和 2 会有所不同。您需要检查有关此的文档。我当时的要求是确保问题在 Android 中得到解决，因此我的 Android 解决方案。如果您在 iOS 平台上工作，也许可以考虑与我们分享解决方案？

【解决方案2】：

AndroidManifest.xml 重复行问题已解决！

我通过在 package.json 文件中添加一个变量解决了这个问题。

第 1 步：访问以下链接：Notification Icon Generator 以生成您的通知徽标。

第 2 步：如果您打开 zip 文件，您将获得一个“res”文件夹。将文件夹放入根目录

第 3 步： "ANDROID_DEFAULT_NOTIFICATION_ICON": "@drawable/fcm_push_icon" - 在您的 package.json 文件中添加这一行。

例如：

"cordova-plugin-fcm-with-dependecy-updated": {
        "ANDROID_DEFAULT_NOTIFICATION_ICON": "@drawable/fcm_push_icon",
        "ANDROID_FIREBASE_BOM_VERSION": "26.0.0",
        "ANDROID_GOOGLE_SERVICES_VERSION": "4.3.4",
        "ANDROID_GRADLE_TOOLS_VERSION": "4.1.0"
      }

第 4 步：

在你的 config.xml 里面添加这些行 platform name="android"

<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="app/src/main/res/drawable/fcm_push_icon.png" />
    <resource-file src="res/drawable-hdpi/fcm_push_icon.png" target="platforms/android/res/drawable-hdpi/fcm_push_icon.png" />
    <resource-file src="res/drawable-mdpi/fcm_push_icon.png" target="platforms/android/res/drawable-mdpi/fcm_push_icon.png" />
    <resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xhdpi/fcm_push_icon.png" />
    <resource-file src="res/drawable-xxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxhdpi/fcm_push_icon.png" />
    <resource-file src="res/drawable-xxxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxxhdpi/fcm_push_icon.png" />

就是这样！

【讨论】：

【解决方案3】：

我也遵循了丹佛的解决方案，但在构建应用程序时，我在 AndroidManifest 中不断收到重复错误，因此我从 config.xml 中删除了这一行

<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />
    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/colorPrimary" />                      
</config-file>

替换为

<config-file parent="./application" target="AndroidManifest.xml">
     <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />
</config-file>

应用程序构建并且通知图标正常工作。

【讨论】：

【解决方案4】：

Denver's solution 对我很有帮助，但在编译时它给了AndroidManifest.xml 重复行问题。如果有人像我一样面临同样的问题：直接删除

<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />
</config-file>

在第 2 步中：就我而言，我不关心颜色。将此添加到config.xml：

<plugin name="cordova-plugin-fcm-with-dependecy-updated" spec="^7.3.1">
    <variable name="ANDROID_DEFAULT_NOTIFICATION_ICON" value="@drawable/fcm_push_icon" />
</plugin>

【讨论】：

【解决方案5】：

我知道这很旧，但以防万一有人遇到同样的错误，使用最新版本的 IONIC（我使用的是 6.12.2），我继续遇到同样的问题并查看文件（AndroidManifest）位于 PathToYourProject\platforms\android\app\src\main\AndroidManifest.xml 我发现“构建”创建了 2 个具有相同值的元

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />

&&

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@someOtherName" />

所以，你要做的是：

添加到您的 AndroidManifest，在 2 个元数据上方：
删除其他 2 个元数据
使用 VSCode 打开 AndroidManifest，并在构建项目时密切关注构建过程。当您看到“cordova.cmd build android”时，将您的 VSCode 放在前面并等待您再次看到添加的 2 个元数据。
看到它们后，立即删除名称与“@drawable/fcm_push_icon”不同的那个。
等到该过程完成并进行测试。如@Devner 所述，您将获得具有所需颜色的颜色推送通知图标。

【讨论】：