RootsLabs

More than a tool ! GitHub Google+ LinkedIn RSS

HTML5 : Et si on notifiait l’utilisateur ?

Progi1984 - Commentaires (3)

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.

Logo 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 ?

Commentaires

1. HTML5 : Et si on notifiait l'utilisateur ? | we..., le 28 janvier 2014 à 00:24

[…] Les notifications sont partout : mobile, ordinateur, TV…. Comment un développeur peut notifier ses utilisateurs ? Commencons par les notifications HTML5. (HTML5 : Et si on notifiait l?utilisateur ?  […]

2. RootsLabs » Notifier par e-mail en PHP, le 17 février 2014 à 10:37

[…] un première article sur les notifications HTML5, je vais continuer cette série sur les notifications avec l’e-mail. Comment notifier […]

3. RootsLabs » Notifier via XMPP en PHP, le 6 juin 2018 à 14:01

[…] Talk/Hangout ou derrière la messagerie instantanée de Facebook. Donc dans cet article, après les notifications HTML5 et par email, nous allons utiliser PHP pour envoyer un petit message de chat sur Google […]

Ajouter un commentaire

Commentaire :