Я использую плагин Ionic 4 + FCM , и вот что у меня сработало (ноябрь 2019). Обратите внимание, что это решение предназначено для 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">
Или просто , скопируйте вышезамените значение идентификатора виджета своим собственным.
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 . Затем нажмите синюю кнопку круглой формы, чтобы загрузить файл почтового индекса.
4. Разархивируйте zip-файл и скопируйте содержимое в корневую папку вашего приложения:
Распакуйте zip-файл, который вы только что загрузили в предыдущем шаге, и извлеките его содержимое в папку. Вы заметите, что он содержит папку res . Если вы откроете эту папку, она будет содержать другие папки со следующими именами:
- drawable-hdpi
- drawable-mdpi
- drawable-xhdpi
- drawable-xxhdpi
- drawable-xxxhdpi
Каждая из этих папок будет содержать значок PNG с именем "fcm_push_icon.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. Скопируйте следующий контент в 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.
Так что теперь, когда выотправив уведомление на ваше Android-приложение на базе Ionic, получатель увидит ваш цветной значок приложения в уведомлениях.
10. Наслаждайтесь !!!