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) :

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

Sous Android à présent :

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 :

function Notify()
{

}

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 :

function Notify()
{
    if('Notification' in window){
        alert("Je supporte l'API !");
    }
    else {
        alert("Mon navigateur est un dinosaure");
    }
}

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

if(window.Notification)

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 :

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

function Notify()
{
    if('Notification' in window){
        Notification.requestPermission(function(permission){
            alert(permission);
        });
    }
    else {
        alert("Mon navigateur est un dinosaure");
    }
}

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 :

var notification = new Notification('Salut !');

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

function Notify()
{
    if('Notification' in window){
        Notification.requestPermission(function(permission){
            if (permission === 'granted') {
                var notification = new Notification('Max Koder',{
                    body : 'Tu as cliqué sur le bouton, non ?',
                    icon : '
                });
            } 
            else if (permission === 'denied') {
                alert("Vous n'avez pas accepté les notifications, votre navigation peut en être affecté.");
            }
            else {
                alert("Veuillez accepter les notifications");
            }
        });
    }
    else {
        alert("Mon navigateur est un dinosaure");
    }
}

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.

var notification = new Notification('Max Koder',{
    body : 'Tu as cliqué sur le bouton, non ?',
    icon : '
});
setTimeout(function(){ notification.close() }, 3000);

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 :

<button onclick="Notify()">Afficher la notification</button>

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.

L’article HTML5 : Découvrir l’API de notifications est apparu en premier sur Max-Koder.