Ionic 4 + FCM - 如何自定义 Firebase Cloud Messaging (FCM) 通知图标和颜色？

Question

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

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

Answer 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">

或者简单地，复制上面的行，用你自己的替换widget 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。访问以下link: 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。享受吧！！！

Answer 2

对我很有用，但在编译时它给出了 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>

Answer 3

我也遵循了 Denver 的解决方案，但在构建应用程序时我在 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>

应用程序构建成功，通知图标正常工作。

Answer 4

我知道这是旧的，但以防万一有人遇到同样的错误，使用最新版本的 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 构建 android”时，将您的 VSCode 置于最前面，等待您再次看到添加的 2 个元数据。
一看到它们，就删除名称不同于“@drawable/fcm_push_icon”的那个。
等到进程结束再测试。正如@Devner 所解释的那样，您将获得具有所需颜色的颜色推送通知图标。

Answer 5

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

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

第 1 步：访问以下 link：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 内部平台名称="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" />

到此为止！

Ionic 4 + FCM - 如何自定义 Firebase Cloud Messaging (FCM) 通知图标和颜色？

Ionic 4 + FCM - How to customize Firebase Cloud Messaging (FCM) Notification Icon and Color?

ionic-framework

notification-icons

firebase-cloud-messaging

ionic4