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

时间：2019-11-06 04:26:02

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

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

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

5 个答案:

答案 0 :(得分：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文件夹复制到项目根目录：

将上方的Point 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应用程序上发送通知时，接收者都会在通知中看到您的 Colored App图标。

10。享受吧！

答案 1 :(得分：1)

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

该应用会生成，并且通知图标会起作用。

答案 2 :(得分：0)

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>

答案 3 :(得分：0)

我知道这是旧的，但以防万一有人遇到同样的错误，使用最新版本的 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" />

那么，你要做的是：

  1. 添加到您的 AndroidManifest，在 2 个元数据上方：

  2. 删除其他 2 个元数据

  3. 使用 VSCode 打开 AndroidManifest，并在构建项目时密切关注构建过程。当您看到“cordova.cmd build android”时，将您的 VSCode 放在最前面，等待您再次看到添加的 2 个元数据。

  4. 一看到它们，就删除名称不同于“@drawable/fcm_push_icon”的那个。

  5. 等待进程完成并进行测试。如@Devner 所述，您将拥有带有所需颜色的彩色推送通知图标。

答案 4 :(得分：0)

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

就是这样！

相关问题
最新问题