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:
01.if (window.webkitNotifications) {
02.
03. if (window.webkitNotifications.checkPermission() == 0) {
04.
05.
06. } else {
07. window.webkitNotifications.requestPermission();
08. }
09.
10.} else {
11.
12.}
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
1.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)
Simple à mettre en place n'est-ce pas ?
Il est ensuite possible de coupler des fonctions de callbacks sur 2 évènements:
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