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

Question

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

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

Answer 1

我正在使用 Ionic 4 + FCM 插件，这对我有用（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. 访问以下链接： 通知图标生成器

在透明背景上上传您的徽标的白色版本（单色）。如果您上传彩色版本，您会看到一个深灰色图标，看起来很恶心。如果您的徽标没有白色版本，请自行设计。保留其余设置不变。对于名称文本框值，输入：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中：

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

<?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. 享受！！！