Notifications push pour le web (démystifiées)

Ecrit par le Jeudi 12 Octobre 2017

Notifications push pour le web (démystifiées)
Il y a quelque jours, lors de la sortie de notre nouvelle gamme de produits PWA, nous a mis en ligne de nouvelles fonctionnalités. Parmi celles-ci, la possibilité d'envoyer des notifications push aux utilisateurs de votre Progressive Web App.

Web push notifications: quels sont les navigateurs compatibles ?

Avec les offres Progressive Web Apps, il est possible d'envoyer des notification push. Celle-ci sont reçues directement dans le navigateur web de l'utilisateur. Cette fonctionnalité est supportée par la majorité des navigateurs web récents, et la liste s'agrandit de jours en jours.

Le tableau ci-dessous donne une vue synthétique des OS/navigateurs qui sont compatibles avec la réception de notifications push. A chaque fois, c'est la dernière version stable du navigateur qui a été considérée dans notre étude.

Dans tous les systèmes d'exploitation, à l'exception d'iOS malheureusement, il existe un navigateur web capable de recevoir des notifications push. C'est très encourageant. Comme nous l'avons déjà évoqués, les PWAs sont le futur des apps. Même Apple semble vouloir rattraper son retard, avec l'annonce au cours de l'été du début des travaux pour l'utilisation de Service Workers dans Safari. 

Les services workers sont une brique essentielle pour permettre une expérience riche dans une PWA. Ce sont eux par exemple qui gèrent la réception des notifications push dans tous les navigateurs du tableau ci-dessus. Tous, à l'exception de Safari, qui utilise un système propriétaire. Ce système permet de recevoir des notifications dans OS X, mais pas dans iOS. L'équipe en charge du développement de Safari n'a d'ailleurs pas encore indiqué si la réception des notifications push serait géré ou pas par un service worker une fois ceux-ci supportés. On espère que ce sera le cas, ou bien qu'une alternative sera proposée pour iOS.

Les pré-requis pour que ça fonctionne

Si vous êtes curieux et que vous souhaitez en savoir plus sur le fonctionnement des notifications push, je vous conseille de lire la page How Push Works,  dans la base de connaissance de Google. On y explique bien le concept d'envoi/reception des push.

Pour que les notifications push puissent être reçues, il faut que plusieurs conditions soient remplies. 

De votre coté, vous devez établir une connection entre votre backoffice et les services tiers utilisés pour la distribution des notifications. Pour établir cette connection, il faut générer des clés d'API et/ou des certificats afin de garantir l'authenticité des échanges entre les serveurs de GoodBarber et les services de distribution des notifications. Pour Chrome, Firefox et Opera, nous utilisons Firebase, le plate-forme de Google. Pour Safari, nous utilisons APNs, la plate-forme d'Apple. 

Du coté de l'utilisateur final, il n'y a pas grand chose à faire. Juste consulter la PWA depuis un navigateur compatible avec la réception des push (voir tableau ci-dessus) et bien sûr, une fois sur le site, accepter la réception des push. 

Ensuite, à partir de votre backoffice, vous pourrez envoyer vos notifications.


 

Envoi et réception de notifications push

Depuis la page Users > Push > Envoyer  vous pouvez composer et distribuer votre notification push.

- Rédigez votre message
- Sélectionnez l'action qui sera effectuée lors de l'ouverture de la notification. Dans l'exemple de la copie d'écran ci-après, j'envoie mon utilisateur directement sur la page de réservation d'une table dans mon restaurant.
- Choisissez la date d'envoi du message. Immédiatement ou bien à une date ultérieure. Vous pouvez choisir de notifier l'utilisateur en respectant l'heure de son fuseau horaire.

La page vous indique le nombre d'utilisateurs (plus précisément le nombre de navigateurs web) qui recevront la notification.
Notifications push pour le web (démystifiées)

Du coté de l'utilisateur, la notification sera affichée sur son terminal. Les éléments visuels de cette notification sont personnalisables à partir de la page Builder > Ressources et Outils > Icônes

Parmi les icônes, vous trouverez l'icône de notification. Elle doit être monochrome sur fond transparent. Sur Android, elle s'affiche dans la status bar du téléphone lors de la réception du push. Lorsqu'on accède au détail de la notification, le logo du site apparait aussi.
 
Notifications push pour le web (démystifiées)

Notifications push pour le web (démystifiées)
La Progressive Web App vous permet de distribuer votre app dans un canal universel et libre, le web. Maintenant dotées des notifications push, les PWA de GoodBarber vous permettent de maintenir le lien avec vos utilisateurs web.



Entrez votre adresse email