Ionic 4+FCM-如何自定义Firebase Cloud Messaging(FCM)通知图标和颜色？ [英] Ionic 4 + FCM - How to customize Firebase Cloud Messaging (FCM) Notification Icon and Color?

问题描述

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

因此，请查看下面我的答案中的"自定义Firebase Cloud Messaging(FCM)通知图标及其颜色"解决方案。

推荐答案

我使用的是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。然后点击蓝色圆形按钮下载压缩文件。

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

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

• 可绘制-hdpi
• 可绘制-MDPI
• 可绘制-xhdpi
• 可绘制-xxhdpi
• 可绘制-xxxhdpi

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

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

将res文件夹从上面的第4点复制到您的应用的根文件夹。因此，它现在应该如下所示：

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.将以下内容复制到color s.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.构建您的App：

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

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

10.享受！

这篇关于Ionic 4+FCM-如何自定义Firebase Cloud Messaging(FCM)通知图标和颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！