Ionic Push Notifications avec Firebase

Auteur(s) de l'article

Kevin
Kevin
Avant de passer au code, voyons de plus près ce que sont les Push Notifications et comment elles fonctionnent avec Google Firebase Cloud Messaging (FCM).

Les pré-requis

“ Longue est la route, semé d'embûches sera votre périple et nombreux seront les défis qui vous attendront sur le chemin, mais grande est la gloire que de recevoir sa première Push Notification. ”

Un développeur qui n'a pas froid aux yeux

Attention, Le système de Push Notifications ne fonctionne pas sur les émulateurs. Préservez-vous du temps et un mal de crâne et faites vos tests directement sur un appareil 😊

Plus sérieusement, grâce au système Firebase Cloud Messaging, c’est vraiment un jeu d’enfant que d’ajouter un système de Push Notifications dans une application Ionic 3.

Il suffit, en résumé, de quelques configurations dans l'interface Firebase, télécharger 2 fichiers d'authentification (Android/iOS) et tout le reste se fait (presque) par magie.
Voici les éléments nécessaires à une implémentation FCM:
  • Détenir une application Firebase.
  • Récupérer les fichiers de signature Firebase FCM. google-services.json pour Android et GoogleService-Info.plist pour iOS. Voir ce lien d'aide.
  • (optionnel) Savoir récupérer sa clé Firebase Service Account afin d'envoyer des Push Notifications via POST HTTP. Voir ce lien d'aide.
  • Avoir un compte développeur sur chacune des plateformes de déploiement ciblées (Android et/ou iOS).
  • (Android uniquement) Configurer FCM pour utiliser le service Android Push Notifications.
    Il faut avant tout créer votre application Firebase, puis il vous suffit de créer votre projet Firebase FCM Android et de télécharger le fichier google-services.json
    Une aide plus complète peut être trouvée en suivant ce lien Medium.
  • (iOS uniquement) Configurer FCM pour utiliser le service Apple Push Notifications.
    Il faut avant tout créer votre application Firebase, puis, en plus de récupérer votre fichier GoogleService-Info.plist, il faudra également récupérer votre clé Apple Push Notifications Authentication Key (APN Key) ainsi que son provisioning profile. Tout ceci se fait depuis l'interface d'Apple sur iTunes Connect. Voir ce lien d'aide.
Une aide plus complète peut-être trouvée en suivant ce lien Medium pour suivre toute la procédure.

À l'aventure

“ Préparez vos cordages et vos piolets et attaquons ensemble cette montagne que sont les Push Notifications ”

Un développeur pessimiste

Pour la suite de l'article, nous partons des principes suivants:
  • Vous avez lu l'introduction de cet article et avez complètement configuré vos environnements FCM grâce aux liens d'aide mis en avant plus haut.
  • Vous connaissez les bases du développement Ionic 3 et Angular 4 et savez bootstraper une application Ionic Blank. Auquel cas voir ce lien pour plus d'aide.

Cet article se base sur la version 2.1.2 (03/06/2017) de cordova-plugin-fcm en utilisant Cordova CLI 6.4.0, Cordova Android 6.0.0 and Cordova iOS 4.3.1

Intégration du plugin Cordova Push Notifications

  1. Avant d'ajouter la dépendance Cordova cordova-plugin-fcm, veillez à télécharger les fichiers de signature Firebase FCM. google-services.json pour Android et GoogleService-Info.plist pour iOS.
  2. Ajouter les deux fichiers directement à la racine de votre projet Ionic, ils seront déplacés automatiquement dans les builds des plateformes.
  3. Ajouter la dépendance Cordova cordova-plugin-fcm.
cordova plugin add cordova-plugin-fcm
  1. Voilà, maintenant vos applications sont capables de recevoir des Push Notifications en background.
    Vous pouvez aller encore plus loin dans l'implémentation Ionic (gestion des notifications en foreground par exemple) en allant directement lire la documentation officielle du plugin accessible sur Github github.com/fechanique/cordova-plugin-fcm.
Dans le cas où une erreur de compilation sur iOS avec le message suivant iOS build fails because of "invalid GOOGLE_APP_ID", c'est une erreur connue.
Afin de la résoudre, il suffit de copier manuellement le fichier GoogleService-Info.plist dans le répertoire platforms/ios/|YourProjectname]/Resources/Resources.
Autre point important: Dans les paramètres XCode de votre application iOS, n'oubliez pas de cocher les Capabilities suivantes: Push Notifications et Remote notifications dans Bacground Modes. Sans ces options, les notifications ne s'afficheront pas sur votre appareil pommé.

Ajouter une icône et une couleur personnalisée

Cette fonctionnalité est uniquement valable pour la plateforme Android. Apple utilise obligatoirement l'icône de l'application.

Depuis Android 5+ (Lollipop), il est possible de personnaliser l’icône de notification, profitez-en !

  1. Avant tout, vous devez créer une icône que vous allez simplement déposer dans le dossier /resources/android/custom/fcm_push_icon.png.
    Attention, cette icône doit être monochrome et transparente.
  2. Ensuite, vous pouvez télécharger ce Hook Ionic et le placer dans le dossier /hooks/android_custom_resources.js prévu à cet effet.
  3. Maintenant, vous pouvez modifier le fichier config.xml et ajouter la ligne suivante directement dans l'élément <plateform name="android">.
<hook src="hooks/android_custom_resources.js" type="after_prepare"/>
  1. Une dernière étape, vous devrez certainement modifier le fichier /hooks/android_custom_resources.js afin d'adapter la variable $resourceDirs avec les dossiers nécessaires selon votre version d'Android.
    Voici ce que nous utilisons pour la dernier version Android 7 Nougat :
  1. N'oubliez pas maintenant d'ajouter le nom du fichier icône et la couleur, à chacune de vos Push Notifications :
A présent, à chacun de vos builds, le Hook android_custom_resources va s'exécuter et déplacer vos fichiers de /resources/android/custom dans chacun des dossiers resources Android définis par la variable $resourceDirs.

Envoi d'une Push Notifications

“ On n'est jamais mieux servi que par soi-même. ”

Un développeur un chouia présomptueux

Nous vous recommandons grandement d'utiliser l'API REST de Firebase et donc d'envoyer vos propres Push Notifications en passant par un `POST` `HTTP` via cURL. En effet, la console Firebase ne propose pas toutes les fonctionnalités (Ex. personnaliser l'icône) et le service gratuit proposé par `cordova-plugin-fcm` n'est pas forcément à jour avec les dernières nouveautés.

Plusieurs solutions s’offrent à vous afin de tester vos Push Notifications:

  • Utiliser la console Firebase et le système Notification Compose, voir ce lien.
  • Utiliser le service libre de cordova-plugin-fcm, voir ce lien.
  • Envoyer vos propres Push Notifications en passant par un POST HTTP.
Voici un exemple cURL: (n’oubliez pas de remplacer le Header authorization avec votre propre Firebase Service Account)
N'oubliez pas de faire appel au bon destinataire dans le paramètre to.
Dans notre exemple, nous envoyons à tous les appareils avec /topics/all.

Sources