HTML5 : Découvrir l’API de notifications

Il y a quelques années, HTML5 est arrivé avec son lot de nouveautés. Vous pensiez que cela se limitait aux nouveaux tags <header>,<article> etc ? En fait, HTML5 a fait beaucoup plus que cela, permettant même de s’extraire de jQuery ou autres libs, pour la validation de formulaires par exemple.
Dans cet article, je vous propose de découvrir une autre fonctionnalité, moins répandue mais très efficace : L’ API de notifications.

L’API de notifications ?

Vous l’avez déjà croisé, pour sûr. Cette API, native chez les navigateurs récents qui font du web (joke), permet d’afficher un message à destination de l’utilisateur, sur n’importe quel support.
Certains la qualifient d’alternative aux fenêtres modales ou à la fonction alert(). Pour ma part, c’est une fonctionnalité supplémentaire, qui se distingue de celles citées.
En effet, selon le support, la notification peut s’afficher directement dans le navigateur, avec les autres notifications dans Android, …

Le gros avantage est que cette API est totalement à la charge du navigateur : Pas besoin de librairie, c’est lui qui l’implémente, la gère et l’affiche comme il le souhaite.

Et ça sert à ?

Pour le moment, les usages qui en sont faits sont généralement les mêmes : Outlook propose une notification à chaque nouveau mail, Skype vous prévient d’un nouveau message lorsque vous utilisez sa version web ou encore, pour ceux qui connaissent, Slack en use très bien pour vous prévenir d’un message de vos collaborateurs.

Pour ma part, j’imagine très bien dans WordPress, lorsque je rédige un article, une telle notification si je reçois un commentaire (ça ne le rendra pas plus long ^^ ) ou encore dans un jeu web à la Ogame, pour les plus vieux, une alerte de fin de construction d’un bâtiment.

Question support, on est comment ?

Voilà la question qui fâche.
A ce jour, presque tous les navigateurs desktop s’y sont collés, hormis IE :

  • Firefox le supporte depuis sa version 22
  • Chrome, même combat (v22)
  • Safari depuis sa 6 ème version
  • Opera avec sa version 25
  • Et même Edge, avec la sortie de sa dernière version 14

En revanche, coté mobile, on est clairement à la ramasse, puisque d’après CanIUse aucun des navigateurs ne le supporte. Le navigateur d’Android est le seul à proposer une version utilisable avec un préfixe.
Pour ma part, Firefox sous Android fait ça très bien.

En image

Voilà le résultat que cela peut donner (rendu sous Firefox 51) :
notification

Cette fenêtre se place en bas à gauche de l’écran (oui oui écran, pas navigateur 😉 ) sous Firefox.

Sous Android à présent :

notif

Maintenant, voyons un peu comment mettre en place ce système.

Au code !

C’est parti. Pour cet exemple trivial, nous mettrons en place un simple bouton qui provoquera l’affichage d’une notification. Comprenez bien que dans un site web, cela ne servira à rien d’avoir un affichage lors d’un clic..

Fonction de notification

Dans une page html, nous allons créer une petite fonction qui servira à notifier l’utilisateur :

N’oubliez pas de l’entourer de balises  <script> 😉

Support du navigateur

En premier lieu, et nous en avons suffisamment parlé, il faut savoir si le navigateur supporte les notifications.
Pour ce, il suffit d’un petit test :

Pas besoin d’explication ? J’aurai très bien pu écrire :

Mais c’est comme vous préférez 😉 .On passe à la suite.

Autorisation de l’utilisateur

Ensuite, il faut savoir que cette fonctionnalité implique un choix de l’utilisateur. Pas question d’afficher vos notifications partout sans son consentement 😉

Cette demande est à la charge du navigateur, aussi elle peut prendre plusieurs formes :

android ask

Sous Firefox Android

ask firefox

Sous Firefox PC

Et voilà comment procéder à la demande utilisateur :

Ici, permission est la variable qui représente la choix de l’utilisateur. Elle peut prendre 3 formes :

  • granted : L’utilisateur a accepté de recevoir les notifications
  • denied : L’utilisateur a refusé
  • default : L’utilisateur ne s’est pas prononcé : Soit il a fermé la demande, soit il a cliqué sur ‘Plus tard’ sous Firefox par exemple.

Seule la réponse granted permet d’afficher des notifications. Même si l’utilisateur ne s’est pas prononcé, le navigateur n’affichera rien.

L’objet notification

A partir du moment où l’utilisateur a accepté la réception de notifications, on va pouvoir les afficher.
Voici comment créer une nouvelle instance notification :

A partir d’ici, la notification est affichée. Tout simple n’est-ce pas ? Le texte entré en paramètre correspond au titre de la notification. Mais ça ne s’arrête pas là.

Paramètres

Il est bien sûr possible de passer des paramètres à notre objet Notification. Voici les plus intéressants :

  • body : Texte (corps) à afficher
  • icon : URL de l’image à afficher

Méthodes

Il n’existe qu’une seule que nous n’avons déjà vu : Notification.close(), l’autre étant Notification.requestPermission(), statique. Celle-ci, à lancer sur une instance, est utilisée pour fermer la notification.

Et bien plus

L’ API offre bien plus de possibilités, que je ne détaillerai pas ici. Non pas par fainéantise bien sûr, mais surtout parce que la grosse partie n’est toujours pas implémentée dans les navigateurs, et donc inutilisable (voir le tableau de compatibilité). Je vous laisse consulter le MDN pour en savoir plus.

Le déclencheur

Comme dit plus haut, nous allons utiliser un bouton qui déclenchera l’affichage de la notification :

Lors du clic sur ce bouton, notre fonction Notify() sera appelée.

Je vous ai mis un petit Codepen pour avoir le rendu en direct. Vous pourrez y retrouver le script utilisé au complet, et le résultat en live :

See the Pen JExajv by MaxKoder (@MaxKoder) on CodePen.

7 Commentaires

Ajouter un commentaire

  1. Très bon article. Je savais pas que c’était aussi simple. Merci

    • Merci, j’apprécie 🙂

      Effectivement, l’objet Notification en lui-même est très simple à mettre en place, reste à lui trouver une réelle utilité dans vos sites 😉

      J’en profite pour dire que j’ai découvert hier, Twitter se servait de ces notifications, qu’il faut activer dans les paramètres du compte.

  2. Très bon article.
    Après, au lieu de se taper à chaque projet la vérification du support par le navigateur, l’autorisation par l’utilisateur, etc… j’ai découvert le plugin Javascript Push.js, dont j’ai fait une présentation sur mon blog :

    http://jump.ovh/2kPvaKt

    • Merci.

      Dans cet article, j’en fais la version longue, mais on peut aussi se passer des contrôles :

      Ici on ne s’est pas embêté, cependant le navigateur va tout de même demander à l’utilisateur de faire son choix.

    • J’oubliais :
      Le lien que tu fournis ne mène pas directement à l’article sur Push.js, mais ce n’est pas grave.
      En revanche, l’exemple que tu cites dans ton article (le lien vers MDN) est effectivement assez long et compliqué, il y a bien plus simple, même plus qu’avec Push 😉

  3. Il m’a tout de même fallu lire 3 articles de Max-Koder pour ensuite cliquer partout sur les « like », « follow NOW !! », « bookmark » ! Mais quelle honte !

Laisser un commentaire

Votre adresse mail ne sera pas publiée.

*

© 2017 Max-Koder — Propulsé par WordPress

Theme par Anders NorenHaut ↑