Kit de survie : Notifications avec pushd et Apache Cordova

Les notifications sont des fonctionnalités importantes sur smartphones de nos jours. Une des solutions est pushd : suivez le guide des premiers pas !

Pour un développeur qui utilise Apache Cordova, il existe des solutions qui permettent de gérer l'envoi de push notifications de manière dynamique sur tous les types d'OS mobiles. Une des solutions est pushd que vous pouvez retrouver sur ce dépot github. On peut rapidement l'installer sur un serveur et commencer a lui envoyer des commandes en curl pour tester l'API.

Pourquoi utiliser pushd ?

Avantages :

• Cette librairie propose l'envoi de notifications sur les 3 systèmes mobiles principaux.
• C'est une couche d'abstraction. Une même requête curl envoie systématiquement à tous les OS.
• Gestion de flux d'abonnements, on peut abonner chaque device à des flux.

  Inconvénients :

• Certaines difficultés pour mettre en place les certificats Apple.
• Implémentation supplémentaire dans Cordova pour des notifications qui s'incrémente sur Android.

Mise en place de pushd sur son serveur

Pour mettre en place pushd sur son serveur je vous conseille de suivre pas à pas ce qui est indiqué sur le readme de la page github du projet. Ici je vais vous expliquer plus en détail des parties qui me semblent importantes et qui sont vaguement expliquées.

Chaque clé du tableau «exports» présent dans le fichier settings.coffee est en fait un protocole utilisable lors de l'ajout d'un device à notre outil. Pour une personne souhaitant développer sur Android, iOS et Windows Phone. Les protocoles qui doivent l'intéresser sont : gcm pour les notifications Android, apns et apns-dev pour les notifications sur iOS (je reviendrai plus en détail sur cette implémentation), et pour terminer  mpns-toast, mpns-tile et mpns-raw pour Windows Phone.

Pushd avec Android

Dans cette partie, vous devez vous rendre dans le tableau "exports['gcm']", il faut ensuite vous rendre sur le site google developer et créer un projet pour ensuite générer une clé d'API (côté serveur). Il vous suffira de copier cette clé et de la coller dans "key".

Pushd avec iOS

Tout d'abord, il faut vous rendre sur le site d'Apple pour générer vos certificats de sécurité. Si vous comptez mettre votre application sur l'AppStore, il vous faudra générer deux certificats, un pour la phase de développement et un pour la phase de production. Voici un tutoriel qui vous aidera dans cette démarche.

Lorsque cela est fait, vous disposerez donc de deux fichiers. Un fichier en .cer et un fichier en .p12, le premier est le certificat, tandis que le second sera la clé associée au certificat. Vous devez les convertir en .pem en suivant les indications du fichier "settings.coffee" présent dans la partie"exports['apns']".

Pushd avec Windows Phone

Du côté de cet OS mobile, c'est simple et rapide, nous avons juste besoin d'activer le protocole mpns.

Mise en place des fonctionnalités de push dans une application Cordova

Apache Cordova est une plateforme de développement servant à créer des applications mobile native a l'aide de HTML, CSS et JavaScript. On dispose de différents plugins qui nous donnent accès à de nombreuses fonctionnalités des smartphones (Puce GPS, Appareil Photo..) La documentation officielle est très complète, je vous incite a aller regarder le site officiel pour commencer a développé avec.

Ensuite, après avoir initialisé votre projet vous pouvez ajouter le plugin phonegap-pushPlugin.

Voici la commande que vous pouvez faire pour l'installer sur votre projet rapidement.

cordova plugin add https://github.com/phonegap-build/PushPlugin.git

Cette commande va installer ce qu'il faut pour faire fonctionner le plugin de push. Il faut par la suite coder les fonctions d'inscriptions des devices aux différents clouds. Dès que cela est fait, tout est prêt pour recevoir les notifications. Il faut créer un enregistrement différent par plateformes car les fonctions appelées en fonction des réceptions de push seront différentes suivant les OS. Voici un exemple d'implémentation, il est préconisé de mettre ces fonctions dans le receivedEvent de l'application Cordova.

if ( device.platform == 'Android' || device.platform == 'Android' ) {
   pushNotification.register(
   successHandler,
   errorHandler,
   {
     "senderID":"[votre-sender-id]",
     "ecb":"onNotification"
   });
 }
 else if(device.platform == "Win32NT"){
   pushNotification.register(
   channelHandler,
   errorHandler,
   {
     "channelName": "pushNotif",
     "ecb": "onNotificationWP8",
     "uccb": "channelHandler",
     "errcb": "jsonErrorHandler"
   });
 }
 else {
   pushNotification.register(
   tokenHandler,
   errorHandler,
   {
     "badge":"true",
     "sound":"true",
     "alert":"true",
     "ecb":"onNotificationAPN"
   });
 }

Après avoir réalisé cela lors du lancement de l'application, ces fonctions vont enregistrer votre smartphone auprès du service qui lui est associé. Cela va renvoyer un registration id pour ios et pour Android ainsi qu'une URL pour les Windows phone. Cela est en fait le token que vous devrez inscrire dans pushd lors d'un ajout d'appareil.

Ensuite, vous devez implémenter les méthodes renvoyant les erreurs et les méthodes qui seront appelées lors de la réception d'une notification pendant que l'application est ouverte. Car si l'application n'est pas ouverte c'est votre système mobile qui va gérer cela tout seul en instanciant une notification dans la barre de statut.

Utilisation de Pushd

On peut communiquer avec pushd à l'aide de la fonction curl. Il est donc assez facile de réaliser une surcouche qui dynamisera et facilitera l'utilisation de cet outil.

On peut facilement réaliser l'inscription d'un device à pushd. Il suffit de récupérer l'id d'enregistrement au cloud le concernant. J'expliquerai plus en détail le registerID lors de la partie Cordova. Par exemple pour un iphone :

curl -d proto=apns-dev -d token=6e27bb9ec8dc79195d3eda3fa37fb4a7b5c0ef72ca7f1f3f8ea74c3f056d42f1 -d lang=fr -d badge=0 http://localhost/subscriber

Cette commande va nous renvoyer un objet json avec toutes les infos d'enregistrement. Pensez bien à récupérer l'id qui va nous servir pour enregistrer le device aux différents flux. Après avoir fait cela, nous pouvons déjà tester l'envoi d'un push avec la commande curl de test.

curl -X POST http://localhost/subscriber/2u3usHTAmKA/test

Si tout est bien configuré du côté de notre serveur et que notre application est fonctionnelle avec Cordova. Le device associé a l'id : 2u3usHTAmKA doit recevoir une notification en push avec le titre test pour Windows phone/Android et avec le titre [nom de l'application] sur IOS.

Si tout est OK, alors félicitations ! Vous avez réussi a créer rapidement est simplement un système avec un client et un serveur qui permet d'envoyer des push notification sur différents systèmes mobiles.

Pour aller plus loin, je vous conseille de lire les Readme.md du repository phunegap-build/PushPlugin ainsi que du repository rs/pushd. On peut y trouver de nombreuses infos utiles. Et avec tout cela vous pourrez facilement réaliser des applications plus complexes.