WEB NOTIFICATIONS API
Ch'tiJS #5 - 31/10/2013
Un petit mot sur moi
- Tom Panier aka neemzy
- Développeur web (front et back) chez Be Seen
- PHP principalement, HTML/CSS, et JavaScript :)
KÉZAKO ?
- Fait partie de la spec HTML 5
- Permet d'afficher des notifications dans la zone éponyme
- C'est un pont supplémentaire entre le web et le desktop
Support
- Actuellement : Chrome et Firefox
if (window.Notification) {
// ...
} else {
alert('Tu devras te contenter de ça !');
}Permissions (1/2)
- Nécessite d'obtenir une permission utilisateur :
console.log(window.Notification.permission);// vaudra "granted" ou "denied" si l'utilisateur a déjà répondu, "default" sinon
PERMISSIONS (2/2)
- Pour demander la permission :
window.Notification.requestPermission(function(permission) {
// Apparemment nécessaire pour Chrome pour l'instant
// Firefox peut déjà se passer de ce callback
window.Notification.permission = permission;
});- Attention : ceci doit être appelé par un écouteur d'évènement utilisateur (onclick...), sinon le navigateur l'ignorera
Premier exemple : originalité
var notification = new Notification('Hello world!');Second exemple : paramétrage
var notification = new Notification(
'InsertAfter',
{
dir: 'auto', // 'ltr' ou 'rtl',
lang: 'fr', // http://tools.ietf.org/html/bcp47
body: 'Le blog de Nicolas Froidure',
tag: 'javascript', // pour grouper les notifications
icon: 'http://www.insertafter.com/images/photo.png'
}
); - On peut récupérer les valeurs passées ainsi :
console.log(notification.body);API d'une instance
notification.onclick = function() {};
notification.onshow = function() {};
notification.onerror = function() {};
notification.onclose = function() {};
notification.close();Intérêt
-
Avertir l'utilisateur d'une manière à la fois visible et instantanée
-
Uniformiser le process (cf. validation formulaires HTML5)
- Idée : coupler avec l'API PageVisibility pour afficher des notifications uniquement si l'utilisateur est sur un autre onglet
DEMO TIME
- http://192.168.somethingsomething:3000
Merci !
- Principale source : https://developer.mozilla.org/en-US/docs/Web/API/notification
- Retrouvez la démo et l'URL de ces slides sur https://github.com/neemzy/messenger.io
- Passez donc faire un tour sur http://www.zaibatsu.fr
- Follow me ! @_neemzy
- Des questions ?
Web Notifications API
By neemzy
Web Notifications API
ChtiJS #5 - 31/10/2013
