Ludovic Frank - Développeur indépendant

NTFY.sh, envoyer facilement des notifications push sur smartphone et ordinateur

ionicons-v5-k Ludovic Frank 29 août 2023
1583 lectures Niveau :

Eh salut ! 😁,

Nous y voilà, la rentrée arrive, comme premier article de la saison on va parler notification Push.

Ici, on ne va pas utiliser l'exemple basique de notification qui consiste à envoyer sur votre propre téléphone une notification "sauvegarde réussie", mais on va parler de notification qui est envoyée par une application qui me fait vivre ... Donc, on parle bien d'un "produit" en prod et qui est utilisé chaque jour par des milliers d'utilisateurs, mais, par ce qu'il y a un mais : ce n'est pas à ces utilisateurs que nous allons envoyer les notifications...

L'application en question, vous là connaissez déjà, c'est mon application de réservation pour restaurant qui fonctionne sur Symfony avec Symfony-UX/Turbo .

La problématique est la suivante : lors des réservations, ce n’est pas un problème qu’elles arrivent au fil de l'eau et s'affichent dans une interface prévue à cet effet pour les restaurateurs, le problème c'est lors d'une annulation, un restaurant c'est beaucoup de collaborateur, beaucoup de monde et beaucoup de choses à gérer. Généralement, le restaurant reprend les réservations dans un carnet papier à côté, pour avoir tout au même endroit.
Donc, quand il y a une annulation, plus tôt ils le savent, mieux c'est.

Mon problème, c'est que je n'avais pas le temps de coder en interne un système de notification Push, en fait, pour le web seul, si j'avais pu, mais les collaborateurs concernés ont différents terminaux : iOS, Android et Windows (donc le web).

Qu'est-ce qu'une notification Push ?

Historiquement dans le web, le "push" n'existait pas, cela est arrivé sur les dernières années, que ce soit avec les "websocket" ou bah justement les notifications Push, qui sont très utilisées de manière commerciale, si vous savez, la motif pour penser a vous faire revenir sur Twitter par exemple.

La notification "push" est comme son nom l'indique, poussé vers l'appareil de l'utilisateur, il y a plusieurs protocoles, sur Android, sur IOS et sur le Web, l'idée est tout simplement qu'un événement qui se produit sur le serveur déclenche l'envoie d'une notification vers l'utilisateur, un petit message avec un "lien clickable".

Par nature, le protocole de notification Push est centralisé, en effet si vous voulez envoyer une notification Push sur Chrome, vous devez envoyer une requête HTTP aux services de notification de Chrome, pareil pour Safari... et iOS j'en parle même pas.

Qu'est-ce que NTFY.sh ?

Si vous avez suivi le paragraphe précédent, vous aurez donc compris que si par exemple, je veux envoyer une notification "native" sur iOS alors je dois "coder" pour iOS, pareil pour Android et pareil pour le "Web Push" qui est un standard.

NTFY se compose, d'un client Android, d'un client iOS et d'un serveur ainsi que de son front en web.

interface de NTFY

Cette interface vous permet de tester l'envoi de notification avec une interface graphique

Comme vous l'avez surement remarqué, NTFY est un projet Open Source, il est donc possible de l'installer sur son propre infra (serveur), ce que perso j'ai fait, car les notifications qui passent, ne regardent que les restaurateurs et personne d'autre 😁

Installer NTFY sur son serveur

Pour cela, rien de plus simple, vous avez une image docker a votre disposition. En plus de l'image docker, vous pouvez retrouver ce petit docker-compose, pour comprendre comment ça marche.

Je ne m'étale pas trop, car l'utilisation de docker n'est pas le point de cet article 🙂.

Envoyer des notifications Push

NTFY fonctionne avec des "topics", voyez ça comme un identifiant unique, qui définit un "sujet", par exemple vous pouvez créer un topic "annulation-ws74g848raf" pour les notifications qui concerne les annulations, ici j'ai rajouté des caractères aléatoires, car il faut voir le topic comme un "mot de passe", chaque personne connaissant ce topic pourra alors lire les notifications de ce topic, il vaut donc mieux le garder secret.

Le fonctionnement basique de NTFY

Ntfy, fonctionne simplement avec des requêtes HTTP, POST et PUT, pour envoyer une notification avec CURL vous pouvez tester ça :

Ici, toutes les personnes inscrites à "VotreTopic" recevront la notification "Eh Salut".

NTFY avec Symfony

Bah oui, forcément... dans mon cas j'ai eu besoin de l'utiliser avec Symfony... donc on va voir les deux méthodes, en fonction de votre version de PHP.

Avec PHP 8.0 et plus

Il y a tout simplement une bibliothèque pour ça

Une fois installée, son utilisation est facile

Voilà comment vous pouvez l'utiliser dans un "eventSubscriber" de Symfony.

Notez bien ici que mon « eventSubscriber » est "synchrone", ce qui veut dire que si l'évent est déclenché lors d'une requête HTTP alors, cela ralentira considérablement le temps de chargement, pensez au messenger de Symfony pour envoyer votre notification de manière asynchrone.

Pour les versions inférieures à PHP 8.0

Allez, ne faites pas semblant, on sait tous que vous avez des projets qui tournent encore sous PHP 5 😛
Pour ce genre de projet, on va tout simplement utiliser le client HTTP de Symfony

Ah bah oui, tout de suite, c'est moins beau, mais fonctionnel, ça tiendra le temps que vous mettiez à jour votre projet 🙂.

Tout comme avec les versions récentes de PHP, pensez à l'asynchrone 😉

L'intégration avec le système de notification de Symfony

Pour ceux qui veulent intégrer NTFY au système de notification de Symfony, jetez un œil par ici.

le cas iOS

Ah bah oui, comme toujours, iOS est un peu à part, et pour les notifications, c'est pareil.
Pour envoyer des notifications sur iOS il faut passer par le système de notification d'Apple, heureusement le dev de NTFY, y a pensé, dans les paramètres de votre serveur (fichier server.yml) pensez bien a mettre : upstream-base-url: "https://ntfy.sh".

Cela vous permettra d'utiliser l'application du store NTFY avec votre serveur, sans avoir à tout reconfig avec le service de motif d'Apple

Ça veut dire que mes messages passent par le serveur de NTFY ?
Aucune donnée sensible ne passe par le serveur de NTFY, un hash de l'URL complète de votre topic est créé comme topic sur le serveur ntfy.sh, ensuite, seul l'id de votre notification passe par e "topic", que le téléphone utilisera pour aller chercher le contenu de la notification sur votre propre serveur.
Pour plus de détail sur le mécanisme, c'est ici.

Safari (iOS), NTFY et les notifications push web

Oui, Safari sur iOS prend désormais en charge les web push, mais, il faut mettre la PWA sur l'écran d'accueil du smartphone, connaissant Apple et leurs "vision" des standards, j'ai préféré pas trop tester, car comme dit plus haut, ces notifications pour moi sont en prod, donc, je préfère passer par le service de notification native d'Apple pour le moment.
Quand j'aurais plus de recul sur les notifications sous Safari, alors je commencerais à l'utiliser en prod et mettrais à jour cet article.

Une notification sous iOS avec NTFY

Et pour Android ?

Bien sûr Android gère parfaitement les notifications Web dues à son ouverture.
Si vous souhaitez utiliser l'application du store, vous avez deux choix, soit comme sur iOS utiliser le système propre à Android, exposé par Google, soit vous pouvez laisser l'app tourner en tâche de fond et allez chercher les nouvelles notifications, l'avantage de la seconde solution est la décentralisation, mais évidement ça a un cout, et dans le cas présent, le cout est la batterie.

Conclusion

NTFY, vous permet d'avoir votre propre serveur de notification dans mon cas, il m'a bien été utile et ma éviter des prises de tête inutile sur des choses pas si importantes que ça, ce qui ma permit de garder mon attention a travailler sur des choses qui ont plus d'importance pour mes clients 😁.
Merci d'avoir lu cet article et à la prochaine 🙂