Découvrir l'API HTML5 Notification

Le 02/06/2015, par Bovino, Rédacteur

L'API Notification de HTML5 vous permet d'afficher à l'utilisateur des notifications (comme son nom l'indique ) à la manière des messages natifs du navigateur ou des extensions du navigateur.
Il s'agit d'une alternative élégantes aux abominables alert() ou aux fenêtres modales ( dont celles natives de HTML5 ).
Son utilisation est un peu particulière car elle requière une autorisation de l'utilisateur. On commence donc par vérifier que le navigateur implémente cette API, puis on demande l'autorisation :

Code javascript :

1
2
3
4
5
if('Notification' in window){ 
    Notification.requestPermission(function (status) { 
        // Reste du code de demande d'autorisation 
    } 
}

La méthode requestPermission() prend en paramètre une fonction de rappel à laquelle sera passé un argument dont la valeur correspond à l'autorisation accordée par l'utilisateur.
Trois valeurs sont possibles pour Notification.status :
• granted, l'autorisation a été accordée ;
• denied, l'autorisation a été refusée ;
• default, l'utilisateur a fermé la fenêtre de demande sans préciser s'il acceptait ou non.
Seul la première valeur permet d'afficher les messages.
La différence entre les deux autres valeurs est que si l'utilisateur fait un choix (autorisation ou refus), l'appel à Notification.status ne demandera plus l'autorisation et gardera le choix déjà fait, tant qu'aucun choix n'a été fait (default), la demande s'affichera.

Une fois l'autorisation obtenue, il est possible d'afficher des messages à l'aide du constructeur new Notification().
Ce constructeur prend deux paramètres : le titre du message et un objet définissant certaines propriétés du message. Cet objet peut contenir diverses propriétés prédéfinies dont les plus utiles sont :
• body, qui correspond au texte du message ;
• icon, qui permet d'associer une icône au message.

Code javascript :

1
2
3
4
var msg = new Notification('Mon titre', { 
    body: 'Texte de mon message.', 
    icon: 'chemin/de/limage.gif' 
});

Et voilà, votre message s'affiche !

Plusieurs événements sont associés à la notification :
• show, déclenché lorsque le message s'affiche ;
• click, déclenché lors du clic sur le message ;
• close, déclenché lorsque le message se ferme ;
• error, déclenché si une erreur survient.

Voir un exemple d'utilisation en ligne.

Compatibilité.
Cette API est implémentée sur toutes les dernières versions des navigateurs (pour les versions plus anciennes, un préfixe peut être requis) sauf Internet Explorer qui ne l'a pas encore implémentée.

Billet blog