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 !


Made with Slides.com