Voir le flux RSS

Bovino

[Actualité] Découvrir l'API HTML5 Notification

Note : 2 votes pour une moyenne de 5,00.
par , 02/06/2015 à 15h26 (1108 Affichages)
L'API Notification de HTML5 vous permet d'afficher à l'utilisateur des notifications (comme son nom l'indique ) à la manière des messages natifs du navigateur ou des extensions du navigateur.
Il s'agit d'une alternative élégantes aux abominables alert() ou aux fenêtres modales ( dont celles natives de HTML5 ).
Son utilisation est un peu particulière car elle requière une autorisation de l'utilisateur. On commence donc par vérifier que le navigateur implémente cette API, puis on demande l'autorisation :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
if('Notification' in window){
    Notification.requestPermission(function (status) {
        // Reste du code de demande d'autorisation
    }
}
La méthode requestPermission() prend en paramètre une fonction de rappel à laquelle sera passé un argument dont la valeur correspond à l'autorisation accordée par l'utilisateur.
Trois valeurs sont possibles pour Notification.status :
granted, l'autorisation a été accordée ;
denied, l'autorisation a été refusée ;
default, l'utilisateur a fermé la fenêtre de demande sans préciser s'il acceptait ou non.
Seul la première valeur permet d'afficher les messages.
La différence entre les deux autres valeurs est que si l'utilisateur fait un choix (autorisation ou refus), l'appel à Notification.status ne demandera plus l'autorisation et gardera le choix déjà fait, tant qu'aucun choix n'a été fait (default), la demande s'affichera.

Une fois l'autorisation obtenue, il est possible d'afficher des messages à l'aide du constructeur new Notification().
Ce constructeur prend deux paramètres : le titre du message et un objet définissant certaines propriétés du message. Cet objet peut contenir diverses propriétés prédéfinies dont les plus utiles sont :
body, qui correspond au texte du message ;
icon, qui permet d'associer une icône au message.
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
var msg = new Notification('Mon titre', {
    body: 'Texte de mon message.',
    icon: 'chemin/de/limage.gif'
});
Et voilà, votre message s'affiche !

Plusieurs événements sont associés à la notification :
show, déclenché lorsque le message s'affiche ;
click, déclenché lors du clic sur le message ;
close, déclenché lorsque le message se ferme ;
error, déclenché si une erreur survient.

Voir un exemple d'utilisation en ligne.

Compatibilité.
Cette API est implémentée sur toutes les dernières versions des navigateurs (pour les versions plus anciennes, un préfixe peut être requis) sauf Internet Explorer qui ne l'a pas encore implémentée.

Envoyer le billet « Découvrir l'API HTML5 Notification » dans le blog Viadeo Envoyer le billet « Découvrir l'API HTML5 Notification » dans le blog Twitter Envoyer le billet « Découvrir l'API HTML5 Notification » dans le blog Google Envoyer le billet « Découvrir l'API HTML5 Notification » dans le blog Facebook Envoyer le billet « Découvrir l'API HTML5 Notification » dans le blog Digg Envoyer le billet « Découvrir l'API HTML5 Notification » dans le blog Delicious Envoyer le billet « Découvrir l'API HTML5 Notification » dans le blog MySpace Envoyer le billet « Découvrir l'API HTML5 Notification » dans le blog Yahoo

Commentaires

  1. Avatar de kolodz
    • |
    • permalink
    Super billet !
    J'avoue que l'a démo claque

    Il y a une raison pour que les notifications Chrome soient "plus moche" que les notifications Firefox ?
  2. Avatar de guiloj
    • |
    • permalink
    Bonjour, fonctionnalité très intéressante, mais encore trop rudimentaire et moins visible que le fameux "alert".

    Un point très embarrassant avec une configuration à deux écran et le navigateur sur l'écran secondaire la notification apparait dans l'écran principal toujours en bas a droite donc a l'opposée du curseur et de la vision de l'utilisateur.

    Prometteur.

    Merci pour le billet et l’information.
  3. Avatar de a028762
    • |
    • permalink
    Ah, pas implémenté sur IE (IE11 ?). Décidément, MS ne croit toujours pas au WEB, toujours à la traîne.
    La démo ne fonctionne pas sur Firefox 40.0.3. ?
    Merci à l'auteur pour le billet
  4. Avatar de Kenjill20
    • |
    • permalink
    merci +1