【问题标题】:Phonegap Build , using Firebase, notification icon is just white/grey squarePhonegap Build ,使用 Firebase,通知图标只是白色/灰色方块
【发布时间】:2019-11-20 16:00:25
【问题描述】:

很多人一直在询问这个问题,但现在所有的解决方案似乎都已经过时了。我尝试了所有解决方案,但仍然无法使用 Phongap Build CLI9.0.0、Firebase Cloud 推送通知和 phonegap-plugin-push 2.1.3。

我可以毫无问题地将图标添加到我的应用程序中。安装和加载应用程序时,会按预期显示正确的徽标。但是,当我收到推送通知时,托盘区域中的图标只是一个白色/灰色方块。

到目前为止,这是我尝试过的:

我的图标是一个带有透明背景的白色圆圈。 它被称为 notification_icon.png。 我制作了 6 个不同大小的版本来满足 ldpi、hdpi 等要求。 我已经像这样将图标名称添加到推送通知初始化中......

    var push = PushNotification.init({
        android: {
          senderID: senderId,  
          iconColor: "#e73439",
          alert: true,
          badge: true,
          icon: 'notification_icon',
          sound: true,
          vibrate: true,
        },
        ios: {
          senderID: senderId,  
          iconColor: '#e73439',
          alert: true,
          badge: true,
          icon: 'notification_icon',
          sound: true,
          vibration: true,
        },
        windows: {}
      });

我已将图标的所有变体添加到我的 config.xml 中(前 6 个是我的徽标图标,而不是通知图标)...

<platform name="android">           
    <icon density="ldpi" src="icons/android/icon36x36.png" />
    <icon density="mdpi" src="icons/android/icon48x48.png" />
    <icon density="hdpi" src="icons/android/icon72x72.png" />
    <icon density="xhdpi" src="icons/android/icon96x96.png" />
    <icon density="xxhdpi" src="icons/android/icon144x144.png" />
    <icon density="xxxhdpi" src="icons/android/icon192x192.png" />
    <icon src="icons/notification_icon96x96.png" target="res/drawable/notification_icon.png" />
    <icon density="ldpi" src="icons/notification_icon36x36.png" target="res/drawable-ldpi/notification_icon.png" />
    <icon density="mdpi" src="icons/notification_icon48x48.png" target="res/drawable-mdpi/notification_icon.png" />
    <icon density="hdpi" src="icons/notification_icon72x72.png" target="res/drawable-hdpi/notification_icon.png" />
    <icon density="xhdpi" src="icons/notification_icon96x96.png" target="res/drawable-xhdpi/notification_icon.png" />
    <icon density="xxhdpi" src="icons/notification_icon144x144.png" target="res/drawable-xxhdpi/notification_icon.png" />
    <icon density="xxxhdpi" src="icons/notification_icon192x192.png" target="res/drawable-xxxhdpi/notification_icon.png" />
</platform>   

我什至尝试像这样将图标添加到 FCM 负载中......

        $notification = array
            (
                'body'   => $message,
                'title'     => $titlenotification,
                "icon" =>  'notification_icon',
                "content_available" => "1",         
                "image"            => "push_notification"  ,
                "icon"            => "push_notification"  ,
                "color"            => "#e73439"  ,

            );
        $data = array
            (
                "title"             => $titlenotification,  
                "message"           => $message, 
                "content_available" => "1",
            );
        $fields = array
            (
                'registration_ids'  => $registrationtokens,
                'notification'      => $notification,            
                'data'                => $data,                         
                "priority"            => "high",
                "content_available"   => true,
            );
        ....etc

我正在使用 Phponegap build 进行编译,所以我无法编辑任何其他 xml 部分,只能编辑 config.xml。

到目前为止,我让它工作的唯一方法是删除其他徽标图标并仅使用通知图标 - 但随后通知图标也显示为 图标。 p>

我认为也许只有较小的图标会用作通知图标,所以我尝试使用 ldpi、mdpi 和 hdpi 的通知图标以及 xhdpi、xxhdpi 和 xxxhdpi 的主徽标,但无论我尝试什么结果要么是 notification_icon 有效,但在加载应用程序时它也用作徽标,或者通知图标被忽略,徽标用作加载图标,白色/灰色方块用于通知图标。

谁能帮忙?

【问题讨论】:

  • 我读过 phonegap-plugin-push 2+ 上的 PushNotification.init 函数不再处理图标和颜色。我已将此信息移至我的有效负载区域。这允许我更改图标背景颜色,但图像仍显示为空方块。

标签: push-notification phonegap-build notification-icons


【解决方案1】:

我想通了。解决方案花了很长时间才找到,但本质上它真的很简单。为了帮助遇到同样问题的其他人(2019 年,Android 目标 SDK 为 28),使用 Phonegap Build 2、Phonegap cli-9.0.0 并使用 Firebase (FCM) 推送通知:

1) 从 PushNotification.init javascript 中删除您的自定义通知图标。您应该只在那里添加您的发件人ID。其余的现在由您的推送有效负载处理

2) 在您的有效负载中(我使用自己的 PHP 通知发送器,遵循 Firebase API 信息),在“通知”参数下添加您的自定义图标名称:

            $notification = array
            (
                'body'   => $message,
                'title'     => $titlenotification,
                "icon"              =>  'notification_icon',
                "content_available" => "1",         
                "iconColor"        => "#e73439",
            );

3) 确保您的图标是具有透明背景的白色形状。另存为.png。确保名称与您的“图标”值完全匹配。在这种情况下:notification_icon.png

4) 创建图标的所有密度版本。你可以通过这里来做到这一点:https://romannurik.github.io/AndroidAssetStudio/index.html ....这将创建所有必要的大小。

5) 将您的图标保存在各自的文件夹中(例如 /drawable-mdpi/notification_icon.png)。将这些文件夹放在本地以下位置:

/你的项目文件夹/www/locales

6) 在您的 config.xml 中添加以下行(假设 notification_icon.png 是您的图片名称)

  <platform name="android">          

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


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

</platform>   

...注意目标值和末尾的额外配置文件位。非常重要的部分。

这适用于 Android 6、7、8 和 9。Ios 通知图标对我来说是个谜,我认为 Phonegap 目前不支持此功能,但无论如何,它适用于 Android。

更多信息可以在这里找到:https://arnesson.github.io/cordova-plugin-firebase/docs/NOTIFICATIONS.html

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2022-01-07
    • 1970-01-01
    • 2014-01-02
    • 2019-06-01
    • 2019-06-09
    • 2018-05-26
    • 2017-08-22
    • 1970-01-01
    相关资源
    最近更新 更多