Progi1984 : HTML5 : Et si on notifiait l’utilisateur ?
lundi 27 janvier 2014 à 09:30Pour 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 (
Lien : Can I Use ?
Cet article HTML5 : Et si on notifiait l’utilisateur ? est apparu en premier sur RootsLabs.
Original post of Progi1984.Votez pour ce billet sur Planet Libre.
Quoi de plus pénible qu’un outil en ligne de commande qui ne permet pas de rappeler les commandes déjà tapées ?
