RootsLabs

Pour améliorer l’expérience utilisateur dans notre monde actuel, il faut tenir au courant l’utilisateur des nouveautés, et cela se fait via les notifications. Elles peuvent être sur mobile, par SMS, mail ou chat. Aujourd’hui, je vous montrerais comment le faire en HTML5.

Support des notifications avec HTML5

La première étape avant de les utiliser est de tester si on peut les utiliser.

if (!("Notification" in window)) {
    alert("Ce navigateur ne supporte pas les notifications HTML5.");
    isSupported = false;
}
// Support Navigateur
isSupported = !!(
   win.Notification /* Safari, Chrome */
  || win.webkitNotifications /* Chrome & ff-html5notifications plugin */
  || navigator.mozNotification /* Firefox Mobile */
  || (win.external && win.external.msIsSiteMode() !== undefined) /* IE9+ */
);

Demander la permission

Maintenant que l’on sait que l’on peut utiliser les notifications, il faut demander à l’utilisateur si on peut utiliser les notifications sur ce site.

  // Demander la permission
  if (window.webkitNotifications && window.webkitNotifications.checkPermission) {
    window.webkitNotifications.requestPermission(callbackFunction);
  } else if (window.Notification && window.Notification.requestPermission) {
    window.Notification.requestPermission(callbackFunction);
  }
  // Récupérer la permission
  var permission;
  if (window.Notification && window.Notification.permissionLevel) {
    //Safari 6
    permission = window.Notification.permissionLevel();
  } else if (window.webkitNotifications && window.webkitNotifications.checkPermission) {
    //Chrome & Firefox avec le plugin html5-notifications
    switch(window.webkitNotifications.checkPermission()){
      case 0: permission = 'granted'; break;
      case 1: permission = 'default'; break;
      case 2: permission = 'denied'; break;
    }
  } else if (navigator.mozNotification) {
    //Firefox Mobile
    permission = 'granted';
  } else if (window.Notification && window.Notification.permission) {
    // Firefox 23+
    permission = window.Notification.permission;
  } else if (window.external && window.external.msIsSiteMode() !== undefined) { /* keep last */
    //IE9+
    permission = window.external.msIsSiteMode() ? 'granted' : 'default';
  }

Afficher une notification

Après avoir demandé la permission et que l’on sait que la permission est autorisée, on peut afficher la notification que l’on veut depuis le début.
La fonction pour créer et afficher une notification prend trois paramètres :

• title : le titre de la notification
• body : le contenu de la notification
• icon : l’icône utilisée par la notification

var notification;
var title = "Titre";
var body = "Beaucoup de texte";
var icon = "img/image.png";
if (window.Notification) { /* Safari 6, Chrome (23+) */
  notification =  new window.Notification(title, {
    /* Icône pour Chrome - Windows, Linux & Chrome OS */
    icon: isString(icon) ? icon : icon.x32,
    /* La description de la notification */
    body: body || ''
  });
} else if (window.webkitNotifications) { /* FF avec le plugin html5Notifications */
  notification = window.webkitNotifications.createNotification(icon, title, body);
  notification.show();
} else if (navigator.mozNotification) { /* Firefox Mobile */
  notification = navigator.mozNotification.createNotification(title, body, icon);
  notification.show();
} else if (window.external && window.external.msIsSiteMode()) { /* IE9+ */
  // Cache toutes les autres précédentes notifications
  window.external.msSiteModeClearIconOverlay();
  window.external.msSiteModeSetIconOverlay((isString(icon) ? icon : icon.x16), title);
  window.external.msSiteModeActivate();
  notification = {
    "ieVerification": ieVerification + 1
  };
}

Lien : Google Chrome
Lien : Mozilla Firefox
Lien : Plugin Firefox (< FF23)
Lien : Can I Use ?