使用Firebase的Phonegap Build，通知图标只是白色/灰色正方形 [英] Phonegap Build , using Firebase, notification icon is just white/grey square
问题描述
很多人都在问这个问题，但是现在所有的解决方案似乎都已经过时了.我尝试了所有解决方案，但使用Phongap Build CLI9.0.0，用于推送通知的Firebase Cloud和phonegap-plugin-push 2.1.3仍然无法使用.
我可以毫无问题地将图标添加到我的应用程序中.在安装和加载应用程序时，正确的徽标将按预期显示.但是，当我收到推送通知时，托盘区域中的图标只是一个白色/灰色正方形.
到目前为止，这是我尝试过的:
我的图标是带有透明背景的白色圆圈. 它被称为notification_icon.png. 我制作了6种不同尺寸的版本，以满足ldpi，hdpi等要求. 我已经将图标名称添加到了推送通知init中，就像这样...
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构建进行编译，因此我无法编辑任何其他xml部分，只能编辑config.xml.
到目前为止，唯一可行的方法是删除其他徽标图标并仅使用通知图标-但是通知图标也显示为主要图标.
>我认为也许只是较小的图标将用作通知图标，所以我尝试将通知图标用于ldpi，mdpi和hdpi，并将主徽标用于xhdpi，xxhdpi和xxxhdpi，但是无论我尝试什么，结果是notification_icon有效，但在加载应用程序时它也用作徽标，或者忽略了通知图标，徽标用作加载图标，而白色/灰色方块用于通知图标. /p>
任何人都可以帮忙吗?
我知道了.找到该解决方案花了太长时间，但从本质上讲，它确实很简单.为帮助其他遇到相同问题的人(2019年，Android目标SDK为28)，请使用Phonegap Build 2，Phonegap cli-9.0.0和Firebase(FCM)推送通知:
1)从PushNotification.init javascript中删除自定义通知图标.您只应在此添加您的senderID.其余的现在由您的推送有效载荷处理
2)在您的有效负载中(按照Firebase API信息，我正在使用自己的PHP通知发送器)，在"notification"参数下添加自定义图标名称:
$notification = array
(
'body' => $message,
'title' => $titlenotification,
"icon" => 'notification_icon',
"content_available" => "1",
"iconColor" => "#e73439",
);
3)确保您的图标是带有透明背景的白色形状.另存为png.确保名称与您的"icon"值完全匹配.在这种情况下: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
Lots of people have been asking about this issue but all the solutions now seem to be outdated. I tried all the solutions but it's still not working for me using Phongap Build CLI9.0.0, Firebase Cloud for push notifications and phonegap-plugin-push 2.1.3.
I can add icons to my app with no problem. The correct logo is shown as expected when installing and loading the app up. However when I receive a push notification the icon in the tray area is just a white/grey square.
So far here's what I've tried:
My icon is a white circle with a transparent background. It is called notification_icon.png. I have made 6 different sized versions to meet the ldpi, hdpi etc requirements. I have added the icon name to the push notification init like so...
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: {}
});
I have added all variants of the icon to my config.xml like so (the first 6 are my logo icons, not the notification icon)...
<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>
I even tried adding the icon to the FCM payload like so...
$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
I am using Phponegap build to compile so I can't edit any other xml parts, just config.xml.
the only way I have had it work so far is if I removed my other logo icons and just use the notification icon - but then the notification icon is displayed as the main icon too.
I thought that perhaps just the smaller icons would be used as the notification icons so I tried using the notification icon for the ldpi, mdpi and hdpi and the main logo for the xhdpi, xxhdpi and xxxhdpi but no matter what I try the result is either the notification_icon works but it is also used as the logo when loading up the App, or the notification icon is ignored, the logo is used as the loading up icon and the white/grey square is used for the notification icon.
Can anyone help?
I've figured it out. The solution took far too long to find, but in essence it is really simple. To help anybody else with the same issue (it's 2019, Android target SDK is 28), using Phonegap Build 2, Phonegap cli-9.0.0, and using Firebase (FCM) push notification:
1) Remove your custom notification icon from the PushNotification.init javascript. You should only be adding your senderID there. The rest is now handled by your push payload
2) In your payload (I'm using my own PHP notification sender, following the Firebase API info), under the "notification" parameter add your custom icon name:
$notification = array
(
'body' => $message,
'title' => $titlenotification,
"icon" => 'notification_icon',
"content_available" => "1",
"iconColor" => "#e73439",
);
3) Ensure your icon is a white shape with a transparent background. Save as png. Make sure the name exactly matches your "icon" value. In this case: notification_icon.png
4) Create all density versions of your icon. You can do this by going here: https://romannurik.github.io/AndroidAssetStudio/index.html ....this will create all necessary sizes.
5) Save your icons in their respective folders (eg. /drawable-mdpi/notification_icon.png). Put these folders in the following place locally:
/your-project-folder/www/locales
6) in your config.xml add the following lines (assuming notification_icon.png is the name of your image)
<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>
...note the target values, and the extra config-file bit at the end. Very important parts.
This works for me on Android 6,7,8 and 9. Ios notifcation icons are a mystery to me, I don't think Phonegap currently supports this but, whatever, it works on Android.
More info can be found here: https://arnesson.github.io/cordova-plugin-firebase/docs/NOTIFICATIONS.html
这篇关于使用Firebase的Phonegap Build，通知图标只是白色/灰色正方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
