HTML5 Notifications - Les notifications HTML5 sur Webkit

Une nouvelle spécification HTML5 très intéressante, toujours à l'état de brouillon, fait son apparition: Les notifications Web HTML5.

Une nouveauté qui pourrait être vraiment pratique pour de nombreuses applications web.

En effet, imaginez les sites web communautaires proposant des messageries internes ou des évènements live. Il pourrait être intéressant de notifier l'utilisateur qu'il y'a de nouveaux messages / évènements en attente.

On a vu comment attirer l'attention en manipulant la favicon de son site en Javascript, maintenant, voyons comment il sera possible de le faire plus efficacement encore!

Pour le moment, seul les navigateurs WebKit supportent l'API Notifications HTML5.

Vous pouvez tester sous Chrome le rendu d'une notification HTML5 avec cet exemple d'implémentation.

HTML5 Notifications: Côté code, comment ça fonctionne ?

Dans un premier temps, nous allons devoir vérifier si le navigateur supporte bien l'API Notifications et demander au navigateur d'accepter l'envoi des notifications si elles sont supportées:

if (window.webkitNotifications) {
      // Notifications supportées, on vérifie si l'utilisateur à bien donné l'autorisation d'utiliser les notifications
      if (window.webkitNotifications.checkPermission() == 0) { 
          // Si = 0, alors autorisé.  
          // On créé la notification !
      } else {
            window.webkitNotifications.requestPermission();
      }
      
} else {
      // Pas supporté, on affiche un message d'alerte
}

Il ne nous reste plus qu'à créer la notification. Il y'a deux possibilités, soit on créé une notification simple ou une notification en HTML:

Créer une notification HTML5 simple

var notif = window.webkitNotifications.createNotification('icon.png', 'Hello les Fermiers !', "Voici le contenu de ma super notification HTML5!");

Créer une notification HTML5 au contenu riche (html)

var notifHTML = window.webkitNotifications.createHTMLNotification('http://www.lafermeduweb.net/mapagehtmlaafficher.html');

Simple à mettre en place n'est-ce pas ?

Il est ensuite possible de coupler des fonctions de callbacks sur 2 évènements:

• A l'affichage de la notification: notif.ondisplay = function(){ // ... };
• A la fermeture de la notification: notif.onclose = function(){ // ... };

Vivement que tous les navigateurs supportent cette API, elle pourrait s'avérer très utile dans de nombreux projets.

Exemple d'utilisation

Doc sur les HTML5 notification sur HTML5Rocks