Un problème très frustrant lors de la création d'une application Ionic 4 avec le plugin FCM est l'impossibilité de définir une icône de notification personnalisée, avec une couleur personnalisée. J'ai trouvé comment y parvenir, alors je voulais juste partager la solution avec notre belle communauté StackOverflow :)
Découvrez donc la solution pour personnaliser l'icône de notification Firebase Cloud Messaging (FCM) et sa couleur pour la plate-forme Android, dans ma réponse ci-dessous.
3 Réponses :
J'utilise le plugin Ionic 4 + FCM et voici ce qui a fonctionné pour moi (novembre 2019). Veuillez noter que cette solution est spécifique à Android, c'est-à-dire que les paramètres affichés dans cette solution aideront à personnaliser l'apparence de l'icône de notification sur la plate-forme Android.
Commençons donc par une série d'étapes:
1. Dans config.xml situé dans le dossier racine de votre application: Example: (yourapp/config.xml)
Ajoutez ce qui suit à la <widget id=""...> à la fin:
xmlns:android="http://schemas.android.com/apk/res/android"
Cela devrait ressembler à quelque chose comme ça maintenant:
<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">
Ou simplement, copiez la ligne ci-dessus, remplacez la valeur de widget id par la vôtre.
2. Dans le même fichier config.xml:
Dans les balises: <platform name="android"> et </platform> , ajoutez ceci:
<color name="colorPrimary">#eedd33</color>
3. Visitez le lien suivant: Générateur d'icônes de notification
Téléchargez une version blanche (une couleur) de votre logo sur un fond transparent . Si vous téléchargez une version colorée, vous obtiendrez une icône gris foncé, qui aurait l'air désagréable. Si vous n'avez pas de version blanche de votre logo, faites-la concevoir. Laissez le reste des paramètres tels quels. Pour la valeur de la zone de texte Nom, entrez: fcm_push_icon . Cliquez ensuite sur le bouton rond de couleur bleue pour télécharger le fichier zip.
4. Décompressez le fichier zip et copiez le contenu dans le dossier racine de votre application:
Décompressez le fichier zip que vous venez de télécharger à l'étape ci-dessus et extrayez son contenu dans un dossier. Vous remarquerez qu'il contient un dossier res . Si vous ouvrez ce dossier, il contiendra d'autres dossiers avec les noms suivants:
Chacun de ces dossiers contiendra une icône PNG du nom "fcm_push_icon.png". La seule différence entre les icônes de ces différents dossiers est leur taille.
5. Copiez le dossier res à la racine du projet:
Copiez le dossier res du point 4 ci-dessus, dans le dossier racine de votre application. Cela devrait donc ressembler à ceci maintenant:
<?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>
6. Créez colors.xml dans le dossier racine de votre application:
Créez maintenant un nouveau fichier appelé colors.xml dans le dossier racine de votre application. Cela devrait donc ressembler à ceci maintenant:
yourApp > colors.xml
7. Copiez le contenu suivant dans colors.xml:
Copiez le contenu suivant dans le fichier colors.xml que vous avez créé à l' étape 6 ci-dessus et enregistrez-le.
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
8. Modifiez la valeur de colorPrimary:
Changez la valeur à l'intérieur des balises: <color name="colorPrimary"></color> en n'importe quelle couleur que vous aimez. Par exemple, vous pouvez utiliser:
<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>
9. Créez votre application:
C'est ça! Maintenant, créez simplement votre application. Lorsque la construction s'exécute, elle copiera tous les fichiers du répertoire src vers le répertoire target et l'application lira le contenu du répertoire target .
Ainsi, à partir de maintenant, chaque fois que vous envoyez une notification sur votre application Android basée sur Ionic, le récepteur verra l' icône de votre application colorée dans les notifications.
10. Profitez !!!
La solution de Denver a beaucoup fonctionné pour moi, mais au moment de la compilation, elle a AndroidManifest.xml des problèmes de ligne en double à AndroidManifest.xml . Si quelqu'un est confronté au même problème que moi: supprimez simplement
<plugin name="cordova-plugin-fcm-with-dependecy-updated" spec="^7.3.1">
<variable name="ANDROID_DEFAULT_NOTIFICATION_ICON" value="@drawable/fcm_push_icon" />
</plugin>
À l'étape 2: Dans mon cas, je ne me soucie pas des couleurs. Ajoutez ceci dans 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" />
</config-file>
J'ai également suivi la solution de Denver, mais j'ai continué à recevoir une erreur en double dans AndroidManifest lors de la création de l'application, j'ai donc supprimé cette ligne de config.xml
<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>
et l'a remplacé par
<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>
L'application se construit et l'icône de notification fonctionne.