22
FEV

HTML5 Notifications - Les notifications HTML5 sur Webkit

Publié le 22/02/12 à 09h53 par DJo

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

Une nouvelle spécification HTML5, 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

Baraguiné par tsunamichups le 22/02/12 à 14h39
tsunamichups sur La Ferme du Web
Ca fonctionne pas sur mon firefox mis a jours
Dommage
Baraguiné par le 22/02/12 à 15h13
Normal, il est presciser que ca ne fonctione que sous webkit, firefox est baser sur gecko.
Cordialement
Baraguiné par WTGeek le 22/02/12 à 15h28
WTGeek sur La Ferme du Web
Woaw ! Juste ultra interessant, je vais suivre ça de très près en espérant le voir arriver sous FF ! :D
Baraguiné par tsunamichups le 27/02/12 à 11h29
tsunamichups sur La Ferme du Web
Ah oui je n'ai pas vu
Désoler

Mais j'ai quand même du mal avec ce qui passe chez pierre et qui ne passe pas chez paule ...

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web