Blog

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

  Mis à jour le   4 min de lecture

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. Ces dernières participent à l'augmentation de l'engagement de l'application et sont donc, à ce titre, utiles dans le développement de votre projet. Nous vous livrons quelques éléments pour approfondir votre connaissance sur le sujet. 

Web push notifications: quels sont les navigateurs compatibles ?

Web push notifications demystified - high resolution picture
Web push notifications demystified - high resolution picture
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 les systèmes d'exploitation, 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 Progressive Web Apps 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 fonction 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 processus 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.
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. Cette icône 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. 

 
La technologie Progressive Web App vous permet de distribuer votre app dans un canal universel et libre, le web. Maintenant dotées de l'outil de notifications push, les PWA de GoodBarber vous permettent de rester en relation avec vos utilisateurs web.
POUR ALLER PLUS LOIN : 

À lire aussi

  4 min de lecture

Vos événements Ticketmaster remplissent seuls l'agenda de votre app

En bref. Ticketmaster est une extension de GoodBarber, l'app builder sans code, qui remplit une section Agenda avec les événements à venir qu'une salle vend sur Ticketmaster. Chaque événement arrive avec son visuel, sa description, sa date et son heure, et un bouton pour acheter ses billets sur Ticketmaster ; les événements annulés ne sont pas affichés. Vous la connectez avec une clé gratuite du portail développeur de Ticketmaster et l'identifiant de votre salle. Elle est gratuite pour les apps Content : chaque section compte pour une des extensions incluses dans votre plan.Beaucoup de salles y vendent déjà. Ticketmaster a vendu 346 millions de billets avec frais en 2025, selon les résultats annuels de Live Nation, publiés le 19 février 2026. Voici ce que donne l'extension pour une salle de concert qui vend tous ses spectacles sur Ticketmaster.

  5 min de lecture

Retrouvez des réponses dans vos podcasts avec GoodBarber Chatbot

Prenons une radio locale dont l’app propose des émissions en direct, une grille de programmes et des interviews à la demande. Chaque enregistrement possède un titre et une description. Ces informations facilitent la navigation, mais une interview contient souvent des détails utiles qui ne figurent pas dans son résumé.Dans notre exemple, l’épisode s’intitule « La ville que nous partageons ». Sa description présente une conversation sur la vie quotidienne en ville. Au cours de l’enregistrement, un urbaniste explique les mesures prévues contre la chaleur estivale : planter des arbres le long des trajets scolaires, créer de l’ombre dans les cours de récréation et remplacer certaines surfaces pavées par des espaces végétalisés.Aucune de ces mesures n’apparaît dans le titre ou la description. Un auditeur se souvient du sujet et demande :Quel épisode expliquait comment la ville compte réduire la chaleur estivale ?Nous avons ajouté les podcasts audio aux sources de connaissances de GoodBarber Chatbot pour que des questions comme celle-ci puissent mener à vos émissions. Deux niveaux sont disponibles : les informations écrites que vous publiez sur chaque épisode et le contenu audio que vous choisissez de faire transcrire.

  4 min de lecture

Vos lives et vos vidéos Twitch, désormais dans votre app

En bref. Twitch est une extension de GoodBarber, l'app builder sans code, qui ajoute une chaîne Twitch comme source d'une section Vidéo. Quand la chaîne est en live, le stream prend la tête de la section ; le reste du temps, la section liste les vidéos de la chaîne. Vous la connectez une fois, avec un Client ID et un Client Secret obtenus dans la console des développeurs Twitch. Elle est gratuite pour les apps Content : chaque section compte pour une des extensions incluses dans votre plan.Le public est sur Twitch. En septembre 2026, les spectateurs y ont regardé 1,51 milliard d'heures de lives, avec en moyenne 2,1 millions de personnes devant un stream à tout moment, selon TwitchTracker. Voici ce que donne l'extension pour une créatrice qui passe en live tous les mardis à 20 h.

Conseils pour créer une app